/* Hub v231: lightweight 3D-cartoon office simulation layered over the v228 map. */

.hub-office-simulation-v231,
.hub-office-notice-v231,
.hub-office-motion-toggle-v231 {
  display: none;
}

.hub-office-controls-v231 {
  display: contents;
}

@media (min-width: 1200px) {
  .hub-office-simulation-ready-v231 .hub-department-floor-v228:not(.is-map-hidden) .hub-department-stage-v228 {
    min-height: 720px;
    overflow: hidden;
    border-color: rgba(65, 116, 170, .34);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(8, 29, 56, .2)),
      url("/assets/hub-command-office-cartoon-v231.webp") center / cover no-repeat;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .5),
      inset 0 -74px 100px rgba(8, 26, 53, .16),
      0 22px 55px rgba(24, 55, 88, .18);
  }

  .hub-department-floor-v228:not(.is-map-hidden) .hub-office-simulation-v231 {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: block;
    width: 1100px;
    height: 620px;
    overflow: visible;
    transform: translate(-50%, -48%);
    pointer-events: none;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-heading {
    z-index: 7;
    top: 14px;
    right: 18px;
    left: 18px;
    min-height: 58px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 16px;
    background: rgba(247, 251, 255, .86);
    box-shadow: 0 9px 24px rgba(18, 52, 90, .12);
    color: #18314e;
    text-shadow: none;
    backdrop-filter: blur(10px) saturate(1.08);
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-heading h2,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-heading span {
    color: #18314e;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-heading .eyebrow {
    color: #236ac0;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-grid {
    z-index: 6;
    inset: 86px 18px 18px;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card {
    width: 270px;
    min-height: 112px;
    max-height: 112px;
    padding: 13px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .82);
    border-top: 4px solid var(--accent, #2e7bd4);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 91%, transparent);
    box-shadow:
      0 15px 30px rgba(7, 29, 58, .23),
      inset 0 1px 0 rgba(255, 255, 255, .8);
    backdrop-filter: blur(12px) saturate(1.08);
    transform-origin: 50% 100%;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:hover,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:focus-visible,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:focus-within {
    transform: translateY(-5px) rotateX(2deg);
    border-color: rgba(255, 255, 255, .98);
    box-shadow:
      0 22px 38px rgba(7, 29, 58, .28),
      0 0 0 3px rgba(73, 156, 241, .17),
      inset 0 1px 0 #fff;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:nth-child(1) { top: 0; left: 0; }
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:nth-child(2) { top: 0; left: calc(50% - 135px); }
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:nth-child(3) { top: 0; right: 0; }
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:nth-child(4) { right: 0; bottom: 0; }
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:nth-child(5) { bottom: 0; left: calc(50% - 135px); }
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:nth-child(6) { bottom: 0; left: 0; }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card > .primary-icon {
    position: absolute;
    top: 17px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 13px;
    box-shadow: 0 7px 14px rgba(18, 46, 78, .13), inset 0 1px 0 rgba(255, 255, 255, .8);
    font-size: 12px;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card > small,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card > p,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card > b,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-access-label {
    display: none;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card > h3 {
    margin: 5px 0 0 57px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.25;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .hub-office-notice-v231 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 57px);
    min-height: 27px;
    margin: 9px 0 0 57px;
    padding: 4px 8px;
    overflow: hidden;
    border: 1px solid rgba(45, 113, 191, .22);
    border-radius: 999px;
    background: rgba(234, 244, 255, .94);
    color: #245c9c;
    box-shadow: 0 4px 10px rgba(20, 62, 107, .09), inset 0 1px 0 rgba(255, 255, 255, .82);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  .hub-office-notice-v231 > i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3d85d3;
    box-shadow: 0 0 0 3px rgba(61, 133, 211, .13);
    animation: hub-office-notice-pulse-v231 2.4s ease-in-out infinite;
  }

  .hub-office-notice-v231 > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hub-office-notice-v231 > b {
    flex: 0 0 auto;
    min-width: 15px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .hub-office-notice-v231[data-tone="critical"] { border-color: rgba(190, 49, 72, .27); background: rgba(255, 230, 235, .96); color: #a61f38; }
  .hub-office-notice-v231[data-tone="critical"] > i { background: #d63b55; box-shadow: 0 0 0 3px rgba(214, 59, 85, .15); }
  .hub-office-notice-v231[data-tone="attention"] { border-color: rgba(184, 112, 13, .27); background: rgba(255, 244, 210, .96); color: #8c5609; }
  .hub-office-notice-v231[data-tone="attention"] > i { background: #e2a22c; box-shadow: 0 0 0 3px rgba(226, 162, 44, .16); }
  .hub-office-notice-v231[data-tone="clear"] { border-color: rgba(33, 137, 102, .25); background: rgba(226, 248, 239, .96); color: #176c51; }
  .hub-office-notice-v231[data-tone="clear"] > i { background: #2ca87c; box-shadow: 0 0 0 3px rgba(44, 168, 124, .14); }
  .hub-office-notice-v231[data-tone="unavailable"] { border-style: dashed; background: rgba(241, 244, 248, .96); color: #5f6c7c; }
  .hub-office-notice-v231[data-tone="unavailable"] > i { background: #8491a0; box-shadow: none; animation: none; }
  .hub-office-notice-v231[data-tone="restricted"] { border-color: rgba(103, 73, 171, .24); background: rgba(241, 235, 255, .96); color: #6749a7; }
  .hub-office-notice-v231[data-tone="restricted"] > i { background: #815eca; box-shadow: 0 0 0 3px rgba(129, 94, 202, .14); }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner {
    width: 310px;
    min-height: 140px;
    max-height: 140px;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner > h3 {
    margin-top: 4px;
    padding-right: 62px;
    font-size: 16px;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner > .hub-office-notice-v231 {
    position: absolute;
    top: 12px;
    right: 12px;
    max-width: 116px;
    margin: 0;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner .revenue-partner-links {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner .revenue-partner-links a {
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner .revenue-partner-links strong { font-size: 11px; }
  .hub-department-floor-v228:not(.is-map-hidden) .primary-revenue-partner .revenue-partner-links span { font-size: 9px; }

  .hub-department-floor-v228:not(.is-map-hidden) .hub-department-core-v228 {
    z-index: 4;
    width: 144px;
    height: 144px;
    transform: translate(-50%, -44%);
    border: 1px solid rgba(117, 218, 255, .7);
    background:
      radial-gradient(circle at 38% 28%, rgba(83, 180, 255, .42), transparent 27%),
      linear-gradient(145deg, rgba(8, 42, 79, .94), rgba(5, 24, 50, .94));
    box-shadow:
      0 0 0 8px rgba(49, 150, 211, .14),
      0 18px 36px rgba(2, 24, 52, .32),
      inset 0 1px 0 rgba(255, 255, 255, .18);
    animation: hub-office-core-float-v231 5.5s ease-in-out infinite;
  }

  .hub-office-avatar-v231 {
    --shirt: #2f82d5;
    --shirt-dark: #1b5c9d;
    position: absolute;
    width: 44px;
    height: 64px;
    offset-rotate: 0deg;
    animation: hub-office-route-v231 24s linear infinite;
    filter: drop-shadow(0 8px 7px rgba(7, 27, 50, .25));
  }

  .hub-office-avatar-v231[data-tone="amber"] { --shirt: #f1aa39; --shirt-dark: #b86b13; }
  .hub-office-avatar-v231[data-tone="teal"] { --shirt: #25a990; --shirt-dark: #14715f; }
  .hub-office-avatar-v231[data-tone="coral"] { --shirt: #ec6f62; --shirt-dark: #a83d37; }

  .hub-office-avatar-shell-v231 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    animation: hub-office-step-v231 .68s ease-in-out infinite alternate;
  }

  .hub-office-avatar-shadow-v231 {
    position: absolute;
    right: 6px;
    bottom: 0;
    left: 6px;
    height: 9px;
    transform: scaleX(.9);
    border-radius: 50%;
    background: rgba(10, 29, 47, .22);
    filter: blur(2px);
  }

  .hub-office-avatar-head-v231 {
    position: absolute;
    z-index: 3;
    top: 2px;
    left: 12px;
    width: 21px;
    height: 22px;
    border: 2px solid rgba(111, 62, 25, .18);
    border-radius: 48% 48% 45% 45%;
    background: linear-gradient(145deg, #ffd6ac, #eaa56e);
    box-shadow: inset 4px 3px 4px rgba(255, 255, 255, .38), 0 2px 4px rgba(71, 38, 17, .22);
  }

  .hub-office-avatar-head-v231::before,
  .hub-office-avatar-head-v231::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #3a2c27;
  }

  .hub-office-avatar-head-v231::before { left: 5px; }
  .hub-office-avatar-head-v231::after { right: 5px; }

  .hub-office-avatar-head-v231 > i {
    position: absolute;
    top: -3px;
    right: -2px;
    left: -2px;
    height: 10px;
    border-radius: 55% 60% 35% 28%;
    background: linear-gradient(145deg, #4b2e22, #201811);
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .09);
  }

  .hub-office-avatar-body-v231 {
    position: absolute;
    z-index: 2;
    top: 23px;
    left: 10px;
    width: 25px;
    height: 25px;
    border-radius: 9px 9px 6px 6px;
    background: linear-gradient(145deg, var(--shirt), var(--shirt-dark));
    box-shadow: inset 5px 3px 5px rgba(255, 255, 255, .24), 0 3px 5px rgba(18, 51, 70, .2);
  }

  .hub-office-avatar-arm-v231 {
    position: absolute;
    z-index: 1;
    top: 27px;
    left: 5px;
    width: 34px;
    height: 8px;
    transform: rotate(-3deg);
    border-radius: 999px;
    background: linear-gradient(90deg, #e7a270 0 14%, var(--shirt-dark) 15% 85%, #e7a270 86%);
    animation: hub-office-wave-v231 .68s ease-in-out infinite alternate;
  }

  .hub-office-avatar-legs-v231 {
    position: absolute;
    z-index: 1;
    bottom: 8px;
    left: 12px;
    width: 21px;
    height: 13px;
  }

  .hub-office-avatar-legs-v231::before,
  .hub-office-avatar-legs-v231::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 7px;
    height: 15px;
    transform-origin: 50% 0;
    border-radius: 3px 3px 5px 5px;
    background: linear-gradient(#263b56 0 72%, #152235 73%);
    animation: hub-office-leg-v231 .68s ease-in-out infinite alternate;
  }

  .hub-office-avatar-legs-v231::before { left: 1px; }
  .hub-office-avatar-legs-v231::after { right: 1px; animation-direction: alternate-reverse; }

  .hub-office-avatar-prop-v231 {
    position: absolute;
    z-index: 4;
    top: 29px;
    right: 2px;
    width: 10px;
    height: 15px;
    transform: rotate(-10deg);
    border: 2px solid #dceaff;
    border-radius: 2px;
    background: #315983;
    box-shadow: 0 2px 3px rgba(19, 40, 67, .22);
  }

  .hub-office-avatar-v231.is-designer {
    offset-path: path("M 150 245 C 230 230 310 260 395 310 C 345 360 265 390 180 398 C 132 352 126 294 150 245");
    animation-duration: 23s;
    animation-delay: -6s;
  }

  .hub-office-avatar-v231.is-maker {
    offset-path: path("M 450 188 C 500 220 505 270 468 318 C 435 365 450 420 515 455 C 552 398 548 341 520 300 C 490 258 475 220 450 188");
    animation-duration: 28s;
    animation-delay: -17s;
  }

  .hub-office-avatar-v231.is-maker .hub-office-avatar-prop-v231 {
    top: 31px;
    right: -1px;
    width: 15px;
    height: 9px;
    border: 2px solid #f8e4a9;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, #e09b32 0 3px, #fff0bd 3px 6px);
  }

  .hub-office-avatar-v231.is-shipper {
    width: 50px;
    offset-path: path("M 930 242 C 895 285 852 330 780 364 C 714 397 675 438 650 482 C 745 486 832 450 900 398 C 953 355 970 292 930 242");
    animation-duration: 25s;
    animation-delay: -10s;
  }

  .hub-office-avatar-v231.is-shipper .hub-office-avatar-prop-v231 {
    top: 35px;
    right: -19px;
    width: 30px;
    height: 20px;
    transform: rotate(0);
    border: 2px solid #23445f;
    border-radius: 4px;
    background:
      linear-gradient(90deg, transparent 45%, rgba(120, 75, 27, .22) 46% 54%, transparent 55%),
      linear-gradient(#dca65c 0 48%, #c28b46 49%);
  }

  .hub-office-avatar-v231.is-shipper .hub-office-avatar-prop-v231::before,
  .hub-office-avatar-v231.is-shipper .hub-office-avatar-prop-v231::after {
    content: "";
    position: absolute;
    bottom: -6px;
    width: 7px;
    height: 7px;
    border: 2px solid #182b3d;
    border-radius: 50%;
    background: #526476;
  }

  .hub-office-avatar-v231.is-shipper .hub-office-avatar-prop-v231::before { left: 1px; }
  .hub-office-avatar-v231.is-shipper .hub-office-avatar-prop-v231::after { right: 1px; }

  .hub-office-avatar-v231.is-coordinator {
    top: 45%;
    left: 57%;
    animation: hub-office-idle-v231 4.8s ease-in-out infinite;
  }

  .hub-office-avatar-v231.is-coordinator .hub-office-avatar-shell-v231 { animation-duration: 1.9s; }
  .hub-office-avatar-v231.is-coordinator .hub-office-avatar-arm-v231 { transform-origin: 10% 50%; animation: hub-office-coordinator-wave-v231 4.8s ease-in-out infinite; }
  .hub-office-avatar-v231.is-coordinator .hub-office-avatar-prop-v231 { width: 12px; height: 16px; border-color: #fff2c8; background: #745732; }

  .hub-office-simulation-v231.is-paused-v231 .hub-office-avatar-v231,
  .hub-office-simulation-v231.is-paused-v231 .hub-office-avatar-v231 *,
  .hub-department-floor-v228.is-office-motion-paused-v231 .hub-department-core-v228 {
    animation-play-state: paused !important;
  }

  .hub-office-controls-v231 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .hub-office-motion-toggle-v231 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 44px;
    color: #245d9e;
  }

  .hub-office-motion-toggle-v231[aria-pressed="true"] {
    border-color: rgba(43, 137, 105, .34);
    background: color-mix(in srgb, var(--surface) 84%, #d9f6ea);
    color: #176b52;
  }

  .hub-office-motion-toggle-v231:focus-visible {
    outline: 3px solid rgba(47, 132, 226, .35);
    outline-offset: 3px;
  }

  html[data-dark="true"] .hub-department-floor-v228:not(.is-map-hidden) .primary-heading {
    border-color: rgba(139, 194, 245, .26);
    background: rgba(10, 29, 55, .87);
  }

  html[data-dark="true"] .hub-department-floor-v228:not(.is-map-hidden) .primary-heading h2,
  html[data-dark="true"] .hub-department-floor-v228:not(.is-map-hidden) .primary-heading span { color: #edf7ff; }
  html[data-dark="true"] .hub-department-floor-v228:not(.is-map-hidden) .primary-heading .eyebrow { color: #78c8ff; }
  html[data-dark="true"] .hub-department-floor-v228:not(.is-map-hidden) .primary-card { border-color: rgba(151, 200, 241, .32); background: rgba(10, 28, 53, .9); }
}

@keyframes hub-office-route-v231 {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes hub-office-step-v231 {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-3px) rotate(1deg); }
}

@keyframes hub-office-leg-v231 {
  from { transform: rotate(18deg); }
  to { transform: rotate(-18deg); }
}

@keyframes hub-office-wave-v231 {
  from { transform: rotate(5deg); }
  to { transform: rotate(-7deg); }
}

@keyframes hub-office-coordinator-wave-v231 {
  0%, 34%, 100% { transform: rotate(-3deg); }
  40% { transform: rotate(-34deg); }
  46% { transform: rotate(-8deg); }
  52% { transform: rotate(-31deg); }
  60% { transform: rotate(-3deg); }
}

@keyframes hub-office-idle-v231 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(7px, -3px, 0); }
}

@keyframes hub-office-core-float-v231 {
  0%, 100% { transform: translate(-50%, -44%); }
  50% { transform: translate(-50%, -48%); }
}

@keyframes hub-office-notice-pulse-v231 {
  0%, 100% { opacity: .72; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-office-simulation-v231,
  .hub-office-simulation-v231 *,
  .hub-office-notice-v231 > i,
  .hub-department-floor-v228 .hub-department-core-v228 {
    animation: none !important;
  }

  .hub-office-motion-toggle-v231 { display: none !important; }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card {
    transition: none !important;
  }

  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:hover,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:focus-visible,
  .hub-department-floor-v228:not(.is-map-hidden) .primary-card:focus-within {
    transform: none !important;
  }
}