/* ==========================================================================
   LP02 · UNIT 5 · PARTNER ROUTES
   (copy sections "For audit, tax and accounting firms" and
    "For ERP and software partners")
   --------------------------------------------------------------------------
   One navy "console" section with an accessible segmented TAB switch
   (WAI-ARIA tabs, routes.js). Each tab panel pairs its copy with its own
   illustrative UI:
     A · multi-client workspace — a client-account switcher (authorised
         badges) beside report cards that refresh as the active account
         changes (loops while visible).
     B · integration routes — "Ready connector" and "Fatorly API" route
         cards; a flow line from the client's system lights the active
         route while the other dims (loops while visible).
   Progressive enhancement: without JS the tab bar is hidden and both
   panels show one after another, each with its visible h2. With JS the
   tab labels carry the titles and the panel h2s become visually hidden.
   ========================================================================== */

.routes {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 169, 182, 0.16), transparent 70%),
    linear-gradient(180deg, #021746 0%, var(--c-navy) 100%);
}

.routes__decor {
  background:
    radial-gradient(ellipse 35% 45% at 0% 80%, rgba(1, 62, 106, 0.9), transparent 70%),
    radial-gradient(ellipse 30% 35% at 100% 60%, rgba(0, 169, 182, 0.08), transparent 70%);
}

[dir="rtl"] .routes__decor {
  scale: -1 1;
}

/* ---------------------------------------------------------------------------
   Segmented tab switch
   --------------------------------------------------------------------------- */
.routes__tabs {
  display: none;                 /* shown only once routes.js enhances */
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  max-inline-size: 46rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 5vw, 3rem);
  padding: 0.375rem;
  border-radius: 22px;
  border: 1px solid var(--c-glass-border);
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.routes.is-enhanced .routes__tabs {
  display: grid;
}

/* Sliding highlight behind the active tab (position set via --x / --w) */
.routes__glider {
  position: absolute;
  inset-block: 0.375rem;
  inset-inline-start: 0;
  inline-size: var(--w, 50%);
  border-radius: 17px;
  background-color: var(--c-teal);
  box-shadow: 0 10px 30px -10px rgba(0, 169, 182, 0.7);
  translate: var(--x, 0.375rem) 0;
  transition: translate 0.45s var(--ease-in-out), inline-size 0.45s var(--ease-in-out);
}

.routes__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-block-size: 4.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: 17px;
  color: var(--c-on-dark-body);
  font-family: var(--ff-display);
  font-size: clamp(0.8125rem, 0.75rem + 0.35vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: color 0.35s var(--ease-out);
}

@media (min-width: 48rem) {
  .routes__tab {
    flex-direction: row;
    gap: var(--space-sm);
    font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  }
}

.routes__tab svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex-shrink: 0;
}

.routes__tab[aria-selected="true"] {
  color: var(--c-navy);
}

.routes__tab:not([aria-selected="true"]):hover {
  color: var(--c-on-dark);
}

/* ---------------------------------------------------------------------------
   Panels
   --------------------------------------------------------------------------- */
.routes__panels {
  display: grid;
  gap: clamp(4rem, 8vw, 6rem);
}

.routes.is-enhanced .routes__panels {
  gap: 0;
}

.route-panel {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.route-panel[hidden] {
  display: none;
}

@media (min-width: 48rem) {
  .route-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.route-panel__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .route-panel__copy {
    justify-items: start;
    text-align: start;
  }
}

.route-panel__copy p {
  max-inline-size: 32rem;
  color: var(--c-on-dark-body);
}

/* Lead sentence of each panel */
.route-panel__copy .route-panel__lead {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-on-dark);
}

.route-panel__icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 16px;
  background-color: var(--c-teal);
  color: var(--c-navy);
  box-shadow: 0 0 0 6px rgba(0, 169, 182, 0.15);
}

.route-panel__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* With tabs active, the tab label is the visible title */
.routes.is-enhanced .route-panel h2 {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Shared mock "window"
   --------------------------------------------------------------------------- */
.mock {
  position: relative;
  inline-size: 100%;
  max-inline-size: 36rem;
  margin-inline: auto;
  padding: var(--space-md);
  border-radius: 22px;
  border: 1px solid var(--c-glass-border);
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-block-end: var(--space-sm);
  margin-block-end: var(--space-md);
  border-block-end: 1px solid var(--c-glass-border);
}

.mock__bar i {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
}

.mock__bar i:first-child {
  background-color: var(--c-teal);
}

.mock__bar img {
  inline-size: 4.75rem;
  margin-inline-start: auto;
  filter: brightness(0) invert(1);
  opacity: 0.65;
}

.sk {
  display: block;
  block-size: 0.4rem;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------------------
   Mock A — multi-client workspace
   --------------------------------------------------------------------------- */
.ws {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: var(--space-sm);
}

.ws__clients {
  display: grid;
  align-content: start;
  gap: 0.375rem;
}

.ws__client {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.ws__client.is-active {
  border-color: rgba(0, 169, 182, 0.55);
  background-color: rgba(0, 169, 182, 0.12);
}

.ws__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 8px;
  background-color: var(--tone, #1E3A6E);
  color: var(--c-white);
}

.ws__avatar svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

.ws__client .sk {
  flex: 1;
}

.ws__auth {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background-color: var(--c-teal);
  color: var(--c-navy);
}

.ws__auth svg {
  inline-size: 0.7rem;
  block-size: 0.7rem;
}

/* Status chip over the main area */
.ws__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: start;
  padding-block: 0.3rem;
  padding-inline: 0.625rem;
  border-radius: var(--r-pill);
  background-color: var(--c-teal);
  color: var(--c-navy);
  font-size: 0.75rem;
  font-weight: 600;
}

.ws__chip svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
}

.ws__main {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

.ws__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.ws__card {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.06);
}

.ws__card--wide {
  grid-column: 1 / -1;
}

/* Mini bar chart; bar heights are changed by routes.js per client */
.ws__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  block-size: 3rem;
}

.ws__bars span {
  flex: 1;
  block-size: var(--h, 50%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--c-teal), rgba(0, 169, 182, 0.25));
  transition: block-size 0.6s var(--ease-in-out);
}

.ws__rows {
  display: grid;
  gap: 0.4rem;
}

.ws__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ws__row svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex-shrink: 0;
  color: var(--c-teal);
}

.ws__row .sk {
  flex: 1;
}

/* Ring gauge */
.ws__ring {
  inline-size: 3rem;
  block-size: 3rem;
}

.ws__ring circle {
  fill: none;
  stroke-width: 4;
}

.ws__ring .bg { stroke: rgba(255, 255, 255, 0.12); }
.ws__ring .fg {
  stroke: var(--c-teal);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ease-in-out);
}

/* Narrow phones: client list on top, main below */
@media (max-width: 29.99rem) {
  .ws {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws__clients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Mock B — integration routes
   --------------------------------------------------------------------------- */
.integ {
  display: grid;
  gap: var(--space-md);
}

.integ__source {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-self: center;
  padding: 0.625rem 0.875rem;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--c-on-dark);
}

.integ__source svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--c-teal);
}

.integ__source .sk {
  inline-size: 5rem;
}

/* Forked flow lines (SVG) */
.integ__fork {
  inline-size: 100%;
  block-size: 3rem;
  overflow: visible;
}

.integ__fork path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke: rgba(255, 255, 255, 0.18);
  transition: stroke 0.5s var(--ease-out);
}

.integ__fork path.is-on {
  stroke: var(--c-teal);
  stroke-dasharray: 4 6;
  animation: integ-flow 0.9s linear infinite;
}

@keyframes integ-flow {
  to { stroke-dashoffset: -10; }
}

.integ__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.integ__route {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-md);
  border-radius: 16px;
  border: 1px solid var(--c-glass-border);
  background-color: rgba(255, 255, 255, 0.04);
  opacity: 0.55;
  transition: opacity 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
              background-color 0.5s var(--ease-out);
}

.integ__route.is-on {
  opacity: 1;
  border-color: rgba(0, 169, 182, 0.6);
  background-color: rgba(0, 169, 182, 0.1);
}

.integ__route-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.integ__route-head span:first-child {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 10px;
  background-color: var(--c-teal);
  color: var(--c-navy);
}

.integ__route-head svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

/* Connector card body: plug + switch */
.integ__plug {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.integ__plug .sk {
  flex: 1;
}

.integ__switch {
  position: relative;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 1.125rem;
  border-radius: var(--r-pill);
  background-color: var(--c-teal);
}

.integ__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-end: 0.1875rem;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 50%;
  background-color: var(--c-white);
}

/* API card body: code-like skeleton (always LTR) */
.integ__code {
  display: grid;
  gap: 0.35rem;
  padding: 0.625rem;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  direction: ltr;
}

.integ__code-line {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.integ__code-line b {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-teal);
}

.integ__code-line .sk:nth-child(odd)  { background-color: rgba(127, 220, 227, 0.45); }
.integ__code-line .sk:nth-child(even) { background-color: rgba(255, 255, 255, 0.22); }

/* Destination: Fatorly */
.integ__dest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem;
  border-radius: 14px;
  background-color: var(--c-white);
}

.integ__dest img {
  inline-size: 6rem;
}

/* RTL: the route columns mirror, so the fork/join lines mirror with them */
[dir="rtl"] .integ__fork {
  scale: -1 1;
}