/*
 * Genie Operations Hub — original light editorial identity.
 * The layout is inspired by expressive ink-led editorial sites while retaining
 * the private reporting product's existing data, controls, and accessibility.
 */
@import url("../fonts/source-sans-3/font-face.css");
@import url("../fonts/fraunces/font-face.css");

:root:not(.dark) {
  --background: 30 28.5714% 97.2549%;
  --foreground: 216.667 100% 14.1176%;
  --card: 0 0% 99.6078%;
  --card-foreground: 216.667 100% 14.1176%;
  --popover: 0 0% 99.6078%;
  --popover-foreground: 216.667 100% 14.1176%;
  --primary: 220.274 100% 14.3137%;
  --primary-foreground: 0 0% 99.6078%;
  --secondary: 210 20% 96.0784%;
  --secondary-foreground: 216.667 100% 14.1176%;
  --muted: 210 20% 96.0784%;
  --muted-foreground: 215.385 21.3115% 35.8824%;
  --accent: 220 100% 97.6471%;
  --accent-foreground: 217.127 96.7914% 36.6667%;
  --destructive: 0.405405 60.6557% 47.8431%;
  --destructive-foreground: 0 0% 99.6078%;
  --border: 0 0% 92.9412%;
  --input: 0 0% 92.9412%;
  --ring: 217.07 92.8994% 33.1373%;
  --chart-1: 217.07 92.8994% 33.1373%;
  --chart-2: 140.225 50.8571% 34.3137%;
  --chart-3: 216.667 100% 14.1176%;
  --chart-4: 38.4507 73.1959% 61.9608%;
  --chart-5: 30.1538 82.9787% 53.9216%;
  --radius: 0.5rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Source Sans 3 Variable", "Source Sans 3", Arial, Helvetica, sans-serif;
  font-variation-settings: "wght" 430;
  letter-spacing: 0.002em;
}

:root:not(.dark) body {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(90deg, rgba(19, 34, 57, 0.024) 1px, transparent 1px),
    linear-gradient(rgba(19, 34, 57, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 74% 8%, rgba(22, 80, 154, 0.08), transparent 33rem);
  background-size: 72px 72px, 72px 72px, auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

.performance-ink-shell {
  min-height: 100vh;
  color: hsl(var(--foreground));
}

.performance-ink-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid hsl(var(--foreground) / 0.16);
  background: hsl(var(--background) / 0.91);
  backdrop-filter: blur(18px) saturate(125%);
}

.performance-ink-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 5rem;
  width: min(100%, 120rem);
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.4vw, 2.5rem);
}

/* Client switcher slot filled by the reporting pages via portal. */
.performance-ink-header__clients {
  display: flex;
  justify-content: center;
  min-width: 0;
  padding-inline: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.performance-ink-header__clients::-webkit-scrollbar {
  display: none;
}

.performance-ink-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  color: inherit;
  text-decoration: none;
}

.performance-ink-brand__mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid hsl(var(--foreground));
  border-radius: 50%;
  color: hsl(var(--primary));
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.performance-ink-brand__mark svg {
  width: 1rem;
  height: 1rem;
}

.performance-ink-brand:hover .performance-ink-brand__mark {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  transform: rotate(-7deg);
}

.performance-ink-brand > span:last-child {
  display: grid;
  line-height: 1.05;
}

.performance-ink-brand strong {
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 650;
}

.performance-ink-brand small {
  margin-top: 0.28rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.performance-ink-header__quick {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3.4rem);
}

.performance-ink-header__quick a {
  position: relative;
  color: hsl(var(--foreground));
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.performance-ink-header__quick a::after {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  left: 0;
  height: 2px;
  background: hsl(var(--primary));
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.performance-ink-header__quick a:hover::after,
.performance-ink-header__quick a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.performance-ink-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.performance-theme-toggle {
  border: 1px solid hsl(var(--foreground) / 0.15);
  border-radius: 50%;
}

.performance-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.65rem;
  padding: 0.62rem 1rem;
  border: 1px solid hsl(var(--foreground));
  border-radius: 999px;
  color: hsl(var(--foreground));
  background: transparent;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.performance-menu-trigger:hover {
  color: hsl(var(--background));
  background: hsl(var(--foreground));
  transform: translateY(-1px);
}

.performance-menu-trigger svg {
  width: 1rem;
  height: 1rem;
}

.performance-menu-dialog {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(20rem, 0.92fr) minmax(29rem, 1.08fr);
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  box-shadow: none !important;
  transform: none !important;
}

.performance-menu-dialog > button {
  z-index: 5;
  top: clamp(1.2rem, 2.5vw, 2.5rem);
  right: clamp(1.2rem, 2.5vw, 2.5rem);
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid hsl(var(--foreground) / 0.45);
  border-radius: 50%;
  opacity: 1;
}

.performance-menu-dialog > button svg {
  width: 1.15rem;
  height: 1.15rem;
}

.performance-menu-dialog__art {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid hsl(var(--foreground) / 0.16);
  background:
    linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%);
}

.performance-menu-dialog__wash,
.performance-reporting-hero__wash,
.performance-login__wash {
  position: absolute;
  border-radius: 47% 53% 61% 39% / 47% 42% 58% 53%;
  background:
    radial-gradient(circle at 38% 34%, hsl(210 82% 44% / 0.33), hsl(217 79% 28% / 0.14) 42%, transparent 70%);
  filter: blur(4px);
  animation: performance-ink-bloom 7s steps(8, end) infinite alternate;
}

.performance-menu-dialog__wash {
  inset: 11% 3% 5% 8%;
}

.performance-menu-dialog__art img {
  position: absolute;
  inset: 3% -4% 1% -6%;
  width: 110%;
  height: 96%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(1.08) contrast(1.04);
}

.dark .performance-menu-dialog__art img,
.dark .performance-reporting-hero__art img,
.dark .performance-login__art img {
  mix-blend-mode: normal;
}

.performance-menu-dialog__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(3.8rem, 6vw, 7rem) clamp(2rem, 6vw, 7rem) clamp(1.6rem, 3vw, 3.5rem);
  overflow-y: auto;
}

.performance-menu-dialog__heading {
  max-width: 45rem;
}

.performance-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--primary));
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.performance-eyebrow svg {
  width: 0.9rem;
  height: 0.9rem;
}

.performance-menu-dialog__heading h2 {
  margin-top: 0.85rem;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3.25rem, 6.3vw, 7.6rem);
  font-weight: 530;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.performance-menu-dialog__heading p:last-child {
  max-width: 42rem;
  margin-top: 1.25rem;
  color: hsl(var(--muted-foreground));
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
}

.performance-menu-dialog__links {
  display: grid;
  margin-top: clamp(2rem, 5vh, 4.5rem);
  border-top: 1px solid hsl(var(--foreground) / 0.2);
}

.performance-menu-dialog__links a {
  display: grid;
  grid-template-columns: 2rem 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid hsl(var(--foreground) / 0.2);
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color 180ms ease, padding 180ms ease, background-color 180ms ease;
}

.performance-menu-dialog__links a > span {
  color: hsl(var(--primary));
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.performance-menu-dialog__links a > svg {
  width: 1rem;
  height: 1rem;
}

.performance-menu-dialog__links a > svg:last-child {
  justify-self: end;
  transition: transform 180ms ease;
}

.performance-menu-dialog__links a strong {
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 530;
}

.performance-menu-dialog__links a:hover,
.performance-menu-dialog__links a.is-active {
  padding-inline: 0.7rem;
  color: hsl(var(--primary));
  background: hsl(var(--accent) / 0.65);
}

.performance-menu-dialog__links a:hover > svg:last-child {
  transform: translate(3px, -3px);
}

.performance-menu-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 2.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
}

.performance-menu-dialog__footer button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  color: hsl(var(--background));
  background: hsl(var(--foreground));
  font-weight: 700;
}

.performance-menu-dialog__footer button svg {
  width: 0.9rem;
  height: 0.9rem;
}

.performance-ink-main {
  min-height: calc(100vh - 9rem);
}

.performance-ink-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1rem, 2.4vw, 2.5rem);
  border-top: 1px solid hsl(var(--foreground) / 0.16);
  color: hsl(var(--muted-foreground));
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-page {
  padding-bottom: 2rem;
}

.performance-client-canvas {
  position: relative;
  min-height: calc(100vh - 9rem);
  overflow: hidden;
  isolation: isolate;
}

.performance-client-canvas__content {
  position: relative;
  z-index: 2;
  width: min(100%, 118.75rem);
  margin-inline: auto;
  padding: 1.25rem 1rem 2.75rem;
}

.performance-client-tabs {
  top: 5rem !important;
  border-color: hsl(var(--foreground) / 0.16) !important;
  background: hsl(var(--background) / 0.94) !important;
  box-shadow: 0 8px 28px hsl(var(--foreground) / 0.04);
}

.performance-client-tabs nav a {
  position: relative;
  border-radius: 999px;
  letter-spacing: 0.025em;
}

.performance-client-tabs nav a[aria-current="page"] {
  box-shadow: 0 5px 18px hsl(var(--primary) / 0.2);
}

.performance-reporting-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(23rem, 0.97fr);
  min-height: clamp(26rem, 36vw, 35rem);
  overflow: hidden;
  border-top: 1px solid hsl(var(--foreground) / 0.2);
  border-bottom: 1px solid hsl(var(--foreground) / 0.2);
  background: hsl(var(--card) / 0.68);
  isolation: isolate;
}

.performance-reporting-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, transparent 49.86%, hsl(var(--foreground) / 0.13) 50%, transparent 50.14%),
    linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 4.5rem;
  content: "";
  pointer-events: none;
}

.performance-reporting-hero__copy {
  align-self: center;
  padding: clamp(2rem, 5.2vw, 6rem);
}

.performance-reporting-hero h1 {
  max-width: 54rem;
  margin-top: 0.95rem;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3rem, 5.8vw, 7.4rem);
  font-weight: 520;
  line-height: 0.88;
  letter-spacing: -0.058em;
}

.performance-reporting-hero h1 em {
  color: hsl(var(--primary));
  font-weight: 410;
}

.performance-reporting-hero__copy > p:not(.performance-eyebrow) {
  max-width: 39rem;
  margin-top: 1.45rem;
  color: hsl(var(--muted-foreground));
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.55;
}

.performance-reporting-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.7rem;
}

.performance-reporting-hero__facts span {
  padding: 0.45rem 0.75rem;
  border: 1px solid hsl(var(--foreground) / 0.2);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.performance-reporting-hero__art {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.performance-reporting-hero__wash {
  inset: 9% 5% 8% 4%;
  z-index: 0;
}

.performance-reporting-hero__art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: clamp(0.5rem, 2.2vw, 2rem);
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(1.09) contrast(1.04);
}

.performance-period-card,
.performance-table-card,
.dashboard-page .stat-card,
.dashboard-page [data-slot="card"] {
  border-color: hsl(var(--foreground) / 0.16);
}

.performance-period-card,
.performance-table-card,
.dashboard-page .stat-card {
  border-radius: 0.2rem;
  background: hsl(var(--card) / 0.92);
  box-shadow: none !important;
}

.performance-period-card {
  border-left: 4px solid hsl(var(--primary));
}

.performance-period-card button {
  border-color: hsl(var(--foreground) / 0.24);
  background: hsl(var(--background));
}

.performance-report-tabs > div:first-child {
  scrollbar-width: thin;
}

.performance-report-tabs [role="tablist"] {
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid hsl(var(--foreground) / 0.14);
  background: hsl(var(--muted) / 0.66);
}

.performance-report-tabs [role="tab"] {
  border-radius: 0.1rem;
  font-size: 0.76rem;
  letter-spacing: 0.025em;
}

.performance-report-tabs [role="tab"][data-state="active"] {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  box-shadow: none;
}

.dashboard-page .kpi-grid {
  gap: 0.75rem;
}

.dashboard-page .stat-card {
  position: relative;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.dashboard-page .stat-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: hsl(var(--primary) / 0.38);
  content: "";
  transition: width 180ms ease, background-color 180ms ease;
}

.dashboard-page .stat-card:hover {
  border-color: hsl(var(--primary) / 0.4);
  transform: translateY(-2px);
}

.dashboard-page .stat-card:hover::before {
  width: 5px;
  background: hsl(var(--primary));
}

.dashboard-page .stat-card p.text-2xl {
  font-family: "Fraunces Variable", Georgia, serif;
  font-weight: 620;
}

.performance-table-card .data-table {
  border-radius: 0;
}

.performance-table-card table {
  font-variant-numeric: tabular-nums;
}

.performance-table-card thead {
  background: hsl(var(--muted) / 0.82);
}

.performance-table-card tbody tr:nth-child(even) {
  background: hsl(var(--muted) / 0.2);
}

.performance-table-card tbody tr:hover {
  background: hsl(var(--accent) / 0.42);
}

.performance-login {
  display: grid;
  grid-template-columns: minmax(25rem, 1.08fr) minmax(25rem, 0.92fr);
  min-height: 100vh;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

.performance-login__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 6rem);
  border-right: 1px solid hsl(var(--foreground) / 0.16);
  background:
    linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
  isolation: isolate;
}

.performance-login__wash {
  inset: 8% 1% 25% 7%;
  z-index: -1;
}

.performance-login__art img {
  position: absolute;
  inset: -7% -7% 18% 2%;
  z-index: -1;
  width: 110%;
  height: 84%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(1.08) contrast(1.04);
}

.performance-login__statement {
  max-width: 57rem;
}

.performance-login__statement h1 {
  margin-top: 0.9rem;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3rem, 5.5vw, 7rem);
  font-weight: 520;
  line-height: 0.9;
  letter-spacing: -0.058em;
}

.performance-login__statement h1 em {
  color: hsl(var(--primary));
  font-weight: 410;
}

.performance-login__statement > p:last-child {
  max-width: 43rem;
  margin-top: 1.4rem;
  color: hsl(var(--muted-foreground));
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

.performance-login__form {
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(2rem, 6vw, 7rem);
}

.performance-login__card {
  width: min(100%, 30rem);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.performance-login__card > div {
  padding-inline: 0;
}

.performance-login__lock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--primary));
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.performance-login__lock svg {
  width: 0.95rem;
  height: 0.95rem;
}

.performance-login__brand {
  margin-bottom: 2.4rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid hsl(var(--foreground) / 0.18);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.performance-login__card h2 {
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(2.7rem, 4.5vw, 4.8rem);
  font-weight: 530;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.performance-login__card input {
  min-height: 3rem;
  border-radius: 0;
  border-width: 0 0 1px;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}

.performance-login__card input:focus-visible {
  border-color: hsl(var(--primary));
  box-shadow: 0 2px 0 hsl(var(--primary));
}

.performance-login__submit {
  display: inline-flex;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.1rem;
  margin-top: 0.8rem;
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.performance-login__submit svg {
  width: 1rem;
  height: 1rem;
  transition: transform 180ms ease;
}

.performance-login__submit:hover svg {
  transform: translateX(4px);
}

.performance-login__private-note {
  margin-top: 1.4rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes performance-ink-bloom {
  0% {
    transform: scale(0.96) rotate(-1deg);
    opacity: 0.72;
  }
  100% {
    transform: scale(1.045) rotate(1deg);
    opacity: 1;
  }
}

@media (max-width: 1080px) {
  .performance-ink-header__inner {
    grid-template-columns: 1fr auto;
  }

  .performance-ink-header__clients {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 0 0 0.6rem;
  }

  .performance-ink-header__quick {
    display: none;
  }

  .performance-reporting-hero {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.75fr);
  }
}

@media (max-width: 900px) {
  .performance-menu-dialog {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .performance-menu-dialog__art {
    position: absolute;
    inset: 0;
    min-height: auto;
    border: 0;
    opacity: 0.16;
    pointer-events: none;
  }

  .performance-menu-dialog__content {
    position: relative;
    min-height: 100dvh;
    overflow: visible;
  }

  .performance-reporting-hero {
    grid-template-columns: 1fr;
  }

  .performance-reporting-hero::before {
    background-image: linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px);
    background-size: 100% 4.5rem;
  }

  .performance-reporting-hero__art {
    min-height: 22rem;
    border-top: 1px solid hsl(var(--foreground) / 0.13);
  }

  .performance-login {
    grid-template-columns: 1fr;
  }

  .performance-login__art {
    min-height: 31rem;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--foreground) / 0.16);
  }

  .performance-login__art img {
    inset: -13% -3% 16% 10%;
    width: 92%;
  }
}

@media (max-width: 640px) {
  .performance-ink-header__inner {
    min-height: 4.35rem;
    padding-inline: 0.85rem;
  }

  .performance-ink-brand small,
  .performance-menu-trigger span {
    display: none;
  }

  .performance-menu-trigger {
    display: grid;
    place-items: center;
    width: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
  }

  .performance-theme-toggle {
    width: 2.45rem;
    height: 2.45rem;
  }

  .performance-menu-dialog__content {
    padding: 4.6rem 1.1rem 1.4rem;
  }

  .performance-menu-dialog__heading h2 {
    font-size: clamp(3rem, 16vw, 5.25rem);
  }

  .performance-menu-dialog__links a {
    grid-template-columns: 1.7rem 1.25rem minmax(0, 1fr) 1.25rem;
    gap: 0.55rem;
  }

  .performance-menu-dialog__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .performance-client-tabs {
    top: 4.35rem !important;
  }

  .performance-reporting-hero {
    min-height: 0;
  }

  .performance-reporting-hero__copy {
    padding: 2.4rem 1.15rem;
  }

  .performance-reporting-hero h1 {
    font-size: clamp(2.75rem, 14vw, 4.6rem);
  }

  .performance-reporting-hero__facts {
    display: grid;
    grid-template-columns: 1fr;
  }

  .performance-reporting-hero__facts span {
    width: fit-content;
  }

  .performance-reporting-hero__art {
    min-height: 18rem;
  }

  .performance-ink-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .performance-login__art {
    min-height: 27rem;
    padding: 1.35rem;
  }

  .performance-login__statement h1 {
    font-size: clamp(2.7rem, 14vw, 4.5rem);
  }

  .performance-login__statement > p:last-child {
    font-size: 0.95rem;
  }

  .performance-login__form {
    padding: 2.2rem 1.25rem 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Approved light treatment: sharp pastel ink landscape lives inside the paper itself. */
html:not(.dark) .performance-client-canvas {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.027) 1px, transparent 1px),
    url("/img/ink/genie-pastel-landscape.png");
  background-size: 100% 4.5rem, 8.5rem 100%, cover;
  background-position: 0 0, 0 0, center bottom;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
}

html:not(.dark) .performance-client-canvas::before {
  content: none;
}

html:not(.dark) .performance-client-canvas::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 56rem 32rem at 19% 22rem, hsl(var(--background) / 0.5) 0, transparent 100%),
    linear-gradient(180deg, hsl(var(--background) / 0.24) 0, transparent 24rem);
  content: "";
  pointer-events: none;
}

html:not(.dark) .performance-client-canvas__content::before {
  position: absolute;
  top: 50rem;
  right: 1rem;
  left: 1rem;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.32), transparent);
  content: "";
}

html:not(.dark) .performance-reporting-hero {
  display: block;
  min-height: clamp(36rem, 48vw, 52rem);
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
  background-color: transparent;
}

html:not(.dark) .performance-reporting-hero::before {
  z-index: 0;
  background-image:
    linear-gradient(90deg, hsl(var(--background) / 0.99) 0%, hsl(var(--background) / 0.93) 36%, transparent 61%),
    linear-gradient(hsl(var(--foreground) / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 4.5rem, 8.5rem 100%;
}

html:not(.dark) .performance-reporting-hero__copy {
  position: relative;
  z-index: 3;
  width: min(56%, 58rem);
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5.4vw, 6.5rem);
}

/* The landscape background already carries the creature; no floating hero artwork in light mode. */
html:not(.dark) .performance-reporting-hero__art,
html:not(.dark) .performance-reporting-hero__wash {
  display: none;
}

html:not(.dark) .performance-reporting-hero__art {
  position: absolute;
  z-index: 1;
  inset: -12% -5% -14% 29%;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
  isolation: auto;
}

html:not(.dark) .performance-reporting-hero__wash {
  inset: 9% 2% 7% 22%;
  z-index: 0;
  opacity: 0.62;
}

html:not(.dark) .performance-reporting-hero__art img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: right center;
  opacity: 0.98;
  mix-blend-mode: multiply;
  filter: saturate(1.12) contrast(1.06);
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 68% 52%, #000 50%, rgb(0 0 0 / 0.93) 67%, transparent 98%);
  mask-image: radial-gradient(ellipse 72% 78% at 68% 52%, #000 50%, rgb(0 0 0 / 0.93) 67%, transparent 98%);
}

html:not(.dark) .performance-menu-dialog {
  background:
    linear-gradient(hsl(var(--foreground) / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.03) 1px, transparent 1px),
    hsl(var(--background));
  background-size: 100% 4.5rem, 8.5rem 100%, 100% 100%;
}

html:not(.dark) .performance-menu-dialog__art,
html:not(.dark) .performance-login__art {
  border-color: transparent;
  background: transparent;
}

html:not(.dark) .performance-menu-dialog__art img {
  inset: -7% -12% -7% -10%;
  width: 122%;
  height: 114%;
  -webkit-mask-image: radial-gradient(ellipse 76% 82% at 47% 53%, #000 50%, rgb(0 0 0 / 0.9) 69%, transparent 98%);
  mask-image: radial-gradient(ellipse 76% 82% at 47% 53%, #000 50%, rgb(0 0 0 / 0.9) 69%, transparent 98%);
}

html:not(.dark) .performance-login {
  background:
    linear-gradient(hsl(var(--foreground) / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.03) 1px, transparent 1px),
    hsl(var(--background));
  background-size: 100% 4.5rem, 8.5rem 100%, 100% 100%;
}

html:not(.dark) .performance-login__art img {
  inset: -9% -12% 12% -6%;
  width: 118%;
  height: 94%;
  -webkit-mask-image: radial-gradient(ellipse 77% 81% at 50% 47%, #000 50%, rgb(0 0 0 / 0.9) 68%, transparent 98%);
  mask-image: radial-gradient(ellipse 77% 81% at 50% 47%, #000 50%, rgb(0 0 0 / 0.9) 68%, transparent 98%);
}

@media (max-width: 900px) {
  .performance-client-canvas__content {
    padding-inline: 1rem;
  }

  html:not(.dark) .performance-client-canvas::before {
    background-position:
      right -12rem top 48rem,
      left -12rem top 58%,
      right -11rem bottom -5rem;
    background-size: 40rem auto, 35rem auto, 38rem auto;
    opacity: 0.09;
  }

  html:not(.dark) .performance-reporting-hero {
    min-height: 47rem;
  }

  html:not(.dark) .performance-reporting-hero::before {
    background-image:
      linear-gradient(180deg, hsl(var(--background) / 0.99) 0%, hsl(var(--background) / 0.97) 48%, transparent 70%),
      linear-gradient(hsl(var(--foreground) / 0.045) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--foreground) / 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 4.5rem, 8.5rem 100%;
  }

  html:not(.dark) .performance-reporting-hero__copy {
    width: min(100%, 40rem);
    min-height: 0;
    padding: 2.6rem 1.25rem;
  }

  html:not(.dark) .performance-reporting-hero__art {
    inset: 43% -20% -8% -20%;
    min-height: 0;
    border: 0;
  }

  html:not(.dark) .performance-reporting-hero__wash {
    inset: 4% 8% 2% 9%;
  }

  html:not(.dark) .performance-reporting-hero__art img {
    object-position: center bottom;
    -webkit-mask-image: radial-gradient(ellipse 72% 74% at 52% 58%, #000 48%, rgb(0 0 0 / 0.9) 69%, transparent 98%);
    mask-image: radial-gradient(ellipse 72% 74% at 52% 58%, #000 48%, rgb(0 0 0 / 0.9) 69%, transparent 98%);
  }

  html:not(.dark) .performance-menu-dialog__art {
    border: 0;
    opacity: 0.2;
  }

  html:not(.dark) .performance-login__art {
    border-right: 0;
    border-bottom-color: transparent;
  }
}

@media (max-width: 640px) {
  .performance-client-canvas__content {
    padding: 0.85rem 0.85rem 2rem;
  }

  html:not(.dark) .performance-client-canvas::before {
    background-position:
      right -13rem top 47rem,
      left -13rem top 59%,
      right -13rem bottom -3rem;
    background-size: 34rem auto, 32rem auto, 34rem auto;
    opacity: 0.075;
  }

  html:not(.dark) .performance-client-canvas__content::before {
    right: 0.85rem;
    left: 0.85rem;
  }

  html:not(.dark) .performance-reporting-hero {
    min-height: 48rem;
  }

  html:not(.dark) .performance-reporting-hero__copy {
    padding: 2.45rem 1.15rem;
  }

  html:not(.dark) .performance-reporting-hero__art {
    inset: 48% -29% -7% -28%;
    min-height: 0;
  }

  html:not(.dark) .performance-reporting-hero__wash {
    inset: 0 11% 1% 11%;
  }

  html:not(.dark) .performance-login__art img {
    inset: -11% -9% 11% 2%;
    width: 108%;
  }
}

/*
 * Approved Japanese ink landscape system.
 * This final layer replaces the earlier single-image light treatment while
 * preserving the Hub's layout, data controls, and reporting behavior.
 */
:root.dark {
  --background: 211 71% 11%;
  --foreground: 40 37% 92%;
  --card: 211 69% 16%;
  --card-foreground: 40 37% 92%;
  --popover: 211 65% 16%;
  --popover-foreground: 40 37% 92%;
  --primary: 211 40% 80%;
  --primary-foreground: 211 71% 11%;
  --secondary: 211 58% 22%;
  --secondary-foreground: 40 37% 92%;
  --muted: 211 48% 22%;
  --muted-foreground: 211 27% 73%;
  --accent: 211 45% 26%;
  --accent-foreground: 40 37% 92%;
  --border: 211 28% 36%;
  --input: 211 29% 38%;
  --ring: 211 40% 73%;
  --chart-1: 211 46% 67%;
  --chart-2: 40 49% 57%;
  --chart-3: 204 31% 61%;
  --chart-4: 193 25% 54%;
  --chart-5: 217 33% 76%;
}

html.dark body {
  background:
    linear-gradient(hsl(var(--foreground) / 0.032) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.026) 1px, transparent 1px),
    linear-gradient(145deg, #07172b 0%, #0a203b 53%, #08192f 100%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
}

.performance-client-canvas,
html:not(.dark) .performance-client-canvas {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.034) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.028) 1px, transparent 1px),
    radial-gradient(ellipse 75% 34rem at 75% 10rem, rgba(218, 189, 121, 0.11), transparent 70%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  background-position: 0 0;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: scroll;
}

html.dark .performance-client-canvas {
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.032) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.026) 1px, transparent 1px),
    radial-gradient(ellipse 64% 32rem at 77% 9rem, rgba(198, 164, 92, 0.065), transparent 73%),
    linear-gradient(145deg, #07172b 0%, #0a203b 53%, #08192f 100%);
  background-size: 72px 72px, 72px 72px, 100% 100%, 100% 100%;
}

.performance-client-canvas::after,
html:not(.dark) .performance-client-canvas::after {
  position: absolute;
  inset: clamp(49rem, 54vw, 61rem) 0 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 48rem 21rem at 69% 8rem, rgba(184, 146, 71, 0.1), transparent 75%),
    linear-gradient(180deg, rgba(247, 243, 234, 0) 0%, rgba(112, 142, 168, 0.12) 12rem, rgba(35, 74, 116, 0.18) 100%);
  content: "";
  pointer-events: none;
}

html.dark .performance-client-canvas::after {
  background:
    radial-gradient(ellipse 45rem 20rem at 68% 8rem, rgba(198, 164, 92, 0.055), transparent 78%),
    linear-gradient(180deg, rgba(8, 26, 48, 0) 0%, rgba(10, 35, 63, 0.22) 12rem, rgba(20, 55, 91, 0.3) 100%);
}

.performance-client-canvas__content {
  z-index: 2;
}

.performance-client-landscape {
  position: absolute;
  top: clamp(29rem, 35vw, 37rem);
  left: 50%;
  z-index: 1;
  width: min(116%, 112rem);
  height: clamp(31rem, 37vw, 42rem);
  object-fit: contain;
  object-position: center top;
  opacity: 0.32;
  filter: saturate(0.88) contrast(1.03);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}

html.dark .performance-client-landscape {
  opacity: 0.26;
  filter: saturate(0.78) contrast(1.05) brightness(1.22);
  mix-blend-mode: screen;
}

.performance-reporting-hero,
html:not(.dark) .performance-reporting-hero {
  display: block;
  min-height: clamp(31rem, 35vw, 36rem);
  overflow: hidden;
  border: 0;
  background: transparent;
}

.performance-reporting-hero::before,
html:not(.dark) .performance-reporting-hero::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 54rem 34rem at 21% 49%, rgba(247, 243, 234, 0.38), transparent 100%),
    linear-gradient(90deg, hsl(var(--background) / 0.72) 0%, hsl(var(--background) / 0.47) 34%, transparent 62%),
    linear-gradient(hsl(var(--foreground) / 0.034) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 4.5rem, 8.5rem 100%;
}

html.dark .performance-reporting-hero::before {
  background:
    radial-gradient(ellipse 48rem 29rem at 19% 48%, rgba(10, 31, 57, 0.22), transparent 100%),
    linear-gradient(90deg, rgba(7, 23, 43, 0.52) 0%, rgba(8, 27, 50, 0.25) 38%, transparent 64%),
    linear-gradient(hsl(var(--foreground) / 0.032) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.026) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 4.5rem, 8.5rem 100%;
}

.performance-reporting-hero__copy,
html:not(.dark) .performance-reporting-hero__copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(52%, 58rem);
  min-height: inherit;
  padding: clamp(2.5rem, 4.3vw, 5.3rem);
}

.performance-reporting-hero h1 {
  font-size: clamp(3.1rem, 4.6vw, 5.4rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
}

html.dark .performance-reporting-hero h1 {
  color: #f2ede3;
}

html.dark .performance-reporting-hero h1 em {
  color: #bacde2;
}

html.dark .performance-eyebrow {
  color: #b9cce1;
}

html.dark .performance-eyebrow svg {
  color: #c6a45c;
}

.performance-reporting-hero__art,
html:not(.dark) .performance-reporting-hero__art {
  position: absolute;
  inset: 1rem 2.8% 0 50%;
  z-index: 2;
  display: grid;
  min-height: 0;
  overflow: visible;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}

.performance-reporting-hero__wash,
html:not(.dark) .performance-reporting-hero__wash {
  display: block;
  inset: 8% 0 10% 7%;
  z-index: 0;
  background:
    radial-gradient(circle at 68% 27%, rgba(217, 189, 121, 0.2), transparent 19%),
    radial-gradient(ellipse at center, rgba(50, 87, 130, 0.12), transparent 67%);
  filter: blur(8px);
  animation: none;
}

html.dark .performance-reporting-hero__wash {
  inset: 12% 4% 13% 11%;
  background:
    radial-gradient(circle at 68% 27%, rgba(198, 164, 92, 0.1), transparent 19%),
    radial-gradient(ellipse at center, rgba(122, 153, 183, 0.055), transparent 67%);
  filter: blur(5px);
}

.performance-reporting-hero__art img,
html:not(.dark) .performance-reporting-hero__art img {
  position: relative;
  inset: auto;
  z-index: 2;
  width: min(100%, 43rem);
  height: min(100%, 34rem);
  max-height: 34rem;
  padding: 0;
  object-fit: contain;
  object-position: center;
  opacity: 0.98;
  mix-blend-mode: multiply;
  filter:
    saturate(0.82)
    contrast(1.16)
    drop-shadow(0 10px 20px rgba(16, 29, 52, 0.08));
  -webkit-mask-image: none;
  mask-image: none;
}

html.dark .performance-reporting-hero__art img {
  opacity: 0.9;
  mix-blend-mode: screen;
  filter:
    grayscale(0.74)
    sepia(0.12)
    saturate(0.58)
    invert(0.82)
    brightness(1.13)
    contrast(1.28)
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.performance-reporting-hero__gold-brush {
  position: absolute;
  right: 3%;
  bottom: 16%;
  z-index: 3;
  width: 58%;
  height: 19%;
  border-top: 3px solid rgba(184, 146, 71, 0.64);
  border-radius: 50%;
  opacity: 0.76;
  transform: rotate(-8deg);
}

.performance-reporting-hero__gold-brush::before,
.performance-reporting-hero__gold-brush::after {
  position: absolute;
  border-radius: 50%;
  background: rgba(184, 146, 71, 0.72);
  content: "";
}

.performance-reporting-hero__gold-brush::before {
  top: -10px;
  left: 18%;
  width: 7px;
  height: 7px;
  box-shadow:
    34px -11px 0 -1px rgba(184, 146, 71, 0.65),
    66px 1px 0 -2px rgba(184, 146, 71, 0.58),
    105px -15px 0 0 rgba(184, 146, 71, 0.48);
}

.performance-reporting-hero__gold-brush::after {
  right: 14%;
  bottom: 0;
  width: 5px;
  height: 5px;
  box-shadow:
    22px 6px 0 -1px rgba(184, 146, 71, 0.55),
    48px -3px 0 0 rgba(184, 146, 71, 0.46);
}

html.dark .performance-reporting-hero__gold-brush {
  border-color: rgba(207, 171, 91, 0.66);
  opacity: 0.72;
}

.performance-period-card,
.performance-table-card,
.dashboard-page .stat-card,
.dashboard-page [data-slot="card"] {
  background: hsl(var(--card) / 0.84);
  box-shadow: 0 11px 29px hsl(var(--foreground) / 0.055) !important;
  backdrop-filter: blur(9px);
}

.performance-period-card {
  border-left-color: #b89247;
}

html.dark .performance-period-card,
html.dark .performance-table-card,
html.dark .dashboard-page .stat-card,
html.dark .dashboard-page [data-slot="card"] {
  border-color: rgba(223, 233, 242, 0.14);
  background: rgba(12, 37, 65, 0.79);
  box-shadow: 0 12px 29px rgba(0, 0, 0, 0.14) !important;
}

html.dark .performance-period-card {
  border-left-color: #c6a45c;
}

html.dark .performance-period-card button {
  border-color: rgba(223, 233, 242, 0.15);
  background: rgba(19, 48, 80, 0.74);
}

html.dark .performance-report-tabs [role="tablist"] {
  border-color: rgba(223, 233, 242, 0.17);
  background: rgba(10, 31, 56, 0.68);
}

html.dark .performance-report-tabs [role="tab"][data-state="active"] {
  color: #0a1c32;
  background: #f2ede3;
}

@media (max-width: 900px) {
  .performance-reporting-hero,
  html:not(.dark) .performance-reporting-hero {
    min-height: 39rem;
  }

  .performance-reporting-hero__copy,
  html:not(.dark) .performance-reporting-hero__copy {
    width: min(100%, 43rem);
    min-height: 0;
    padding: 2.7rem 1.5rem;
  }

  .performance-reporting-hero__art,
  html:not(.dark) .performance-reporting-hero__art {
    inset: 19rem -2% 0 26%;
  }

  .performance-client-landscape {
    top: 36rem;
    width: 138%;
    height: 32rem;
  }

  .performance-client-canvas::after,
  html:not(.dark) .performance-client-canvas::after {
    inset: 53rem 0 0;
  }
}

@media (max-width: 640px) {
  .performance-client-canvas,
  html:not(.dark) .performance-client-canvas {
    background-size: 52px 52px, 52px 52px, 100% 100%;
  }

  .performance-client-canvas__content {
    padding: 0.85rem 0.85rem 2rem;
  }

  .performance-reporting-hero,
  html:not(.dark) .performance-reporting-hero {
    min-height: 38.5rem;
  }

  .performance-reporting-hero::before,
  html:not(.dark) .performance-reporting-hero::before {
    background:
      linear-gradient(180deg, hsl(var(--background) / 0.96) 0%, hsl(var(--background) / 0.78) 44%, transparent 72%),
      linear-gradient(hsl(var(--foreground) / 0.034) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--foreground) / 0.028) 1px, transparent 1px);
    background-size: 100% 100%, 100% 3.25rem, 3.25rem 100%;
  }

  html.dark .performance-reporting-hero::before {
    background:
      linear-gradient(180deg, rgba(7, 23, 43, 0.82) 0%, rgba(8, 27, 50, 0.54) 44%, transparent 73%),
      linear-gradient(hsl(var(--foreground) / 0.032) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--foreground) / 0.026) 1px, transparent 1px);
    background-size: 100% 100%, 100% 3.25rem, 3.25rem 100%;
  }

  .performance-reporting-hero__copy,
  html:not(.dark) .performance-reporting-hero__copy {
    width: 100%;
    padding: 2.2rem 1rem 1rem;
  }

  .performance-reporting-hero h1 {
    max-width: 24rem;
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: 0.96;
  }

  .performance-reporting-hero__copy > p:not(.performance-eyebrow) {
    max-width: 23rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.52;
  }

  .performance-reporting-hero__facts {
    display: flex;
    gap: 0.42rem;
    margin-top: 1rem;
  }

  .performance-reporting-hero__facts span {
    padding: 0.38rem 0.55rem;
    font-size: 0.52rem;
    letter-spacing: 0.065em;
  }

  .performance-reporting-hero__art,
  html:not(.dark) .performance-reporting-hero__art {
    inset: 19.5rem -4% 0 21%;
    place-items: center end;
  }

  .performance-reporting-hero__art img,
  html:not(.dark) .performance-reporting-hero__art img {
    width: min(100%, 22rem);
    height: 20rem;
    max-height: 20rem;
    object-position: right center;
  }

  html.dark .performance-reporting-hero__art img {
    opacity: 0.82;
  }

  .performance-reporting-hero__gold-brush {
    right: 5%;
    bottom: 17%;
    width: 50%;
  }

  .performance-client-landscape {
    top: 35rem;
    width: 165%;
    height: 29rem;
  }

  .performance-client-canvas::after,
  html:not(.dark) .performance-client-canvas::after {
    inset: 49rem 0 0;
  }

  .performance-period-card > div {
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Genie Operations Hub — expanded private preview
   ========================================================================== */

:root {
  --goh-ink: #10243f;
  --goh-blue: #154f91;
  --goh-blue-deep: #0b315d;
  --goh-blue-soft: #dce8f3;
  --goh-pearl: #f7f5ed;
  --goh-paper: #fffefa;
  --goh-gold: #b88a34;
  --goh-green: #31745f;
  --goh-amber: #b56b22;
  --goh-red: #b94742;
  --goh-line: rgba(16, 36, 63, 0.16);
  --goh-shadow: 0 22px 70px rgba(12, 38, 70, 0.09);
  --goh-topbar: 76px;
  --goh-sidebar: 272px;
}

.goh-preview {
  min-height: 100vh;
  color: var(--goh-ink);
  background:
    linear-gradient(90deg, rgba(18, 54, 94, 0.022) 1px, transparent 1px),
    linear-gradient(rgba(18, 54, 94, 0.018) 1px, transparent 1px),
    var(--goh-pearl);
  background-size: 74px 74px;
}

.goh-preview *,
.goh-preview *::before,
.goh-preview *::after {
  box-sizing: border-box;
}

.goh-preview button,
.goh-preview a {
  -webkit-tap-highlight-color: transparent;
}

.goh-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  display: grid;
  grid-template-columns: var(--goh-sidebar) minmax(0, 1fr) auto;
  align-items: center;
  height: var(--goh-topbar);
  border-bottom: 1px solid var(--goh-line);
  background: rgba(250, 249, 243, 0.91);
  backdrop-filter: blur(18px) saturate(135%);
}

.goh-topbar__brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.1rem;
  border-right: 1px solid var(--goh-line);
}

.goh-topbar__brand > a {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.goh-topbar__brand > a > span:last-child {
  display: grid;
  min-width: 0;
  line-height: 1.02;
}

.goh-topbar__brand strong {
  overflow: hidden;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-topbar__brand small {
  margin-top: 0.3rem;
  color: rgba(16, 36, 63, 0.58);
  font-size: 0.61rem;
  font-weight: 730;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}

.goh-fairy-avatar {
  display: inline-block;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  overflow: hidden;
  border: 1px solid rgba(16, 36, 63, 0.35);
  border-radius: 50%;
  background-color: #e9edf0;
  background-image: url("../img/ink/genie-fairy-avatar-source.png");
  background-position: 66% 72%;
  background-repeat: no-repeat;
  background-size: 720%;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.72),
    0 7px 20px rgba(16, 36, 63, 0.12);
}

.goh-fairy-avatar--large {
  width: 2.85rem;
  height: 2.85rem;
}

.goh-mobile-menu,
.goh-sidebar__mobile-head {
  display: none;
}

.goh-topbar__nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  gap: clamp(1.3rem, 3vw, 3.5rem);
  padding-inline: 1.5rem;
}

.goh-topbar__nav a {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(16, 36, 63, 0.67);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.goh-topbar__nav a::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--goh-blue);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.goh-topbar__nav a:hover,
.goh-topbar__nav a.is-active {
  color: var(--goh-ink);
}

.goh-topbar__nav a:hover::after,
.goh-topbar__nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.goh-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  padding-right: 1.15rem;
}

.goh-preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0 0.78rem;
  border: 1px solid rgba(184, 138, 52, 0.34);
  border-radius: 999px;
  color: #76551c;
  background: rgba(255, 247, 224, 0.76);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.goh-preview-pill span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--goh-gold);
  box-shadow: 0 0 0 4px rgba(184, 138, 52, 0.14);
}

.goh-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(16, 36, 63, 0.2);
  border-radius: 0.5rem;
  color: var(--goh-ink);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.73rem;
  font-weight: 720;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.goh-action:hover {
  border-color: rgba(21, 79, 145, 0.5);
  color: var(--goh-blue);
  background: #fff;
  transform: translateY(-1px);
}

.goh-action svg {
  width: 0.9rem;
  height: 0.9rem;
}

.goh-action--primary {
  border-color: var(--goh-blue-deep);
  color: #fff;
  background: var(--goh-blue-deep);
  box-shadow: 0 8px 24px rgba(11, 49, 93, 0.16);
}

.goh-action--primary:hover {
  color: #fff;
  background: var(--goh-blue);
}

.goh-sidebar {
  position: fixed;
  inset: var(--goh-topbar) auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--goh-sidebar);
  overflow-y: auto;
  border-right: 1px solid var(--goh-line);
  background:
    radial-gradient(circle at 15% 5%, rgba(21, 79, 145, 0.08), transparent 15rem),
    rgba(249, 248, 242, 0.94);
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 36, 63, 0.2) transparent;
}

.goh-sidebar__section {
  display: grid;
  gap: 0.18rem;
  padding: 1.15rem 0.85rem 0;
}

.goh-sidebar__section + .goh-sidebar__section {
  margin-top: 0.4rem;
}

.goh-sidebar__section > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.35rem;
  padding: 0 0.58rem;
  color: rgba(16, 36, 63, 0.46);
  font-size: 0.61rem;
  font-weight: 780;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.goh-sidebar__section > p span {
  display: grid;
  place-items: center;
  min-width: 1.45rem;
  min-height: 1.2rem;
  padding: 0 0.28rem;
  border: 1px solid rgba(16, 36, 63, 0.12);
  border-radius: 999px;
  color: rgba(16, 36, 63, 0.67);
  background: rgba(255, 255, 255, 0.54);
  letter-spacing: 0;
}

.goh-sidebar__section > a,
.goh-sidebar__section > button {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.34rem;
  padding: 0.47rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  color: rgba(16, 36, 63, 0.7);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 620;
  text-align: left;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.goh-sidebar__section > a:hover,
.goh-sidebar__section > button:hover,
.goh-sidebar__section > a.is-active {
  border-color: rgba(21, 79, 145, 0.14);
  color: var(--goh-blue-deep);
  background: rgba(220, 232, 243, 0.64);
}

.goh-sidebar__section > a.is-active {
  font-weight: 740;
  box-shadow: inset 3px 0 var(--goh-blue);
}

.goh-sidebar__section > a svg,
.goh-sidebar__section > button svg {
  width: 1rem;
  height: 1rem;
}

.goh-sidebar__section > a b,
.goh-sidebar__section > button b {
  min-width: 1.35rem;
  padding: 0.1rem 0.32rem;
  border-radius: 999px;
  color: rgba(16, 36, 63, 0.68);
  background: rgba(16, 36, 63, 0.07);
  font-size: 0.59rem;
  font-weight: 760;
  text-align: center;
}

.goh-sidebar__section--workspaces {
  max-height: 25rem;
  padding-bottom: 0.45rem;
  overflow-y: auto;
  border-block: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-workspace-dot {
  width: 0.52rem;
  height: 0.52rem;
  margin-left: 0.22rem;
  border: 1px solid rgba(21, 79, 145, 0.55);
  border-radius: 50%;
  background: rgba(21, 79, 145, 0.13);
}

.goh-sidebar__footer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.68rem;
  margin-top: auto;
  padding: 0.85rem;
  border-top: 1px solid var(--goh-line);
  background: rgba(249, 248, 242, 0.94);
  backdrop-filter: blur(12px);
}

.goh-sidebar__footer > span {
  display: grid;
  min-width: 0;
  line-height: 1.08;
}

.goh-sidebar__footer strong {
  font-size: 0.8rem;
}

.goh-sidebar__footer small {
  margin-top: 0.2rem;
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.64rem;
}

.goh-sidebar__footer button {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  color: rgba(16, 36, 63, 0.54);
  background: transparent;
}

.goh-sidebar__footer button:hover {
  color: var(--goh-blue);
  background: rgba(21, 79, 145, 0.09);
}

.goh-sidebar__footer button svg {
  width: 1rem;
  height: 1rem;
}

.goh-sidebar-backdrop {
  display: none;
}

.goh-main {
  min-height: 100vh;
  margin-left: var(--goh-sidebar);
  padding-top: var(--goh-topbar);
  overflow: hidden;
}

.goh-hero {
  --goh-landscape: url("../img/landscapes/all-clients.png");
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(25rem, 0.77fr);
  min-height: 31.5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(16, 36, 63, 0.18);
  isolation: isolate;
  background:
    linear-gradient(105deg, rgba(255, 254, 250, 0.98) 0%, rgba(250, 249, 243, 0.94) 51%, rgba(230, 237, 243, 0.68) 100%);
}

.goh-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(16, 36, 63, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 36, 63, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 78% 32%, rgba(21, 79, 145, 0.14), transparent 25rem);
  background-size: 64px 64px, 64px 64px, auto;
  content: "";
}

.goh-hero__copy {
  position: relative;
  z-index: 4;
  align-self: start;
  max-width: 58rem;
  padding: clamp(3.5rem, 6vw, 6.1rem) clamp(2rem, 5.3vw, 6.6rem) 11rem;
}

.goh-eyebrow,
.goh-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  margin: 0;
  color: var(--goh-blue);
  font-size: 0.65rem;
  font-weight: 790;
  letter-spacing: 0.145em;
  text-transform: uppercase;
}

.goh-eyebrow svg,
.goh-icon-label svg {
  width: 0.88rem;
  height: 0.88rem;
}

.goh-hero h1 {
  max-width: 52rem;
  margin: 1rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3.4rem, 5.3vw, 6.5rem);
  font-weight: 510;
  line-height: 0.9;
  letter-spacing: -0.052em;
}

.goh-hero h1 em {
  color: var(--goh-blue);
  font-weight: 470;
}

.goh-hero__copy > p:not(.goh-eyebrow) {
  max-width: 43rem;
  margin: 1.35rem 0 0;
  color: rgba(16, 36, 63, 0.67);
  font-size: clamp(0.98rem, 1.2vw, 1.18rem);
  line-height: 1.58;
}

.goh-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.goh-hero__facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(16, 36, 63, 0.15);
  border-radius: 999px;
  color: rgba(16, 36, 63, 0.72);
  background: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  font-weight: 680;
  backdrop-filter: blur(6px);
}

.goh-hero__facts svg {
  width: 0.82rem;
  height: 0.82rem;
  color: var(--goh-green);
}

.goh-hero__art {
  position: relative;
  z-index: 2;
  min-height: 100%;
  pointer-events: none;
}

.goh-hero__art img {
  position: absolute;
  z-index: 2;
  top: 1.1rem;
  right: -2%;
  width: min(105%, 42rem);
  height: 29rem;
  object-fit: contain;
  object-position: right center;
  filter: saturate(0.9) contrast(1.05);
}

.goh-hero__ink-wash {
  position: absolute;
  z-index: 1;
  inset: 8% 3% 24% 9%;
  border-radius: 59% 41% 56% 44% / 49% 42% 58% 51%;
  background:
    radial-gradient(circle at 55% 45%, rgba(21, 79, 145, 0.22), rgba(47, 102, 154, 0.07) 47%, transparent 72%);
  filter: blur(7px);
}

.goh-hero__landscape {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -3.7rem;
  left: 0;
  height: 16.5rem;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(247, 245, 237, 0.12) 65%, rgba(247, 245, 237, 0.72) 100%),
    var(--goh-landscape);
  background-attachment: scroll, fixed;
  background-position: center, center 75%;
  background-repeat: no-repeat;
  background-size: 100% 100%, max(92rem, 100vw) auto;
  opacity: 0.9;
  pointer-events: none;
  filter: saturate(0.82) contrast(1.02);
}

.goh-content {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 1.4rem;
  width: min(100%, 98rem);
  margin: -3.5rem auto 0;
  padding: 0 clamp(1.1rem, 2.5vw, 2.5rem) 4rem;
}

.goh-truth-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.72rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(21, 79, 145, 0.2);
  border-radius: 0.65rem;
  background: rgba(241, 247, 251, 0.94);
  box-shadow: 0 12px 34px rgba(16, 36, 63, 0.06);
  backdrop-filter: blur(12px);
}

.goh-truth-banner svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.08rem;
  color: var(--goh-blue);
}

.goh-truth-banner p {
  margin: 0;
  color: rgba(16, 36, 63, 0.7);
  font-size: 0.76rem;
  line-height: 1.5;
}

.goh-truth-banner strong {
  color: var(--goh-ink);
}

.goh-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.goh-metric {
  min-width: 0;
  padding: 1rem 1rem 0.95rem;
  overflow: hidden;
  border: 1px solid rgba(16, 36, 63, 0.15);
  border-radius: 0.68rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 250, 0.89));
  box-shadow: 0 13px 38px rgba(15, 42, 73, 0.07);
}

.goh-metric.is-warning {
  border-color: rgba(181, 107, 34, 0.35);
  background: linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(253, 244, 226, 0.9));
}

.goh-metric > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.goh-metric > div span {
  overflow: hidden;
  color: rgba(16, 36, 63, 0.55);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.goh-metric > div svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--goh-blue);
}

.goh-metric > strong {
  display: block;
  margin-top: 0.56rem;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(1.85rem, 2.6vw, 2.8rem);
  font-weight: 570;
  line-height: 1;
  letter-spacing: -0.035em;
}

.goh-metric > small {
  display: block;
  margin-top: 0.43rem;
  overflow: hidden;
  color: rgba(16, 36, 63, 0.56);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-section {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.4rem;
  scroll-margin-top: calc(var(--goh-topbar) + 1rem);
}

.goh-section__heading,
.goh-panel__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.goh-section__heading h2,
.goh-panel__heading h2 {
  margin: 0.35rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.025em;
}

.goh-section__heading > span,
.goh-panel__heading > span {
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.7rem;
  font-weight: 680;
}

.goh-attention-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.goh-attention {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 14.8rem;
  padding: 1.08rem;
  overflow: hidden;
  border: 1px solid rgba(181, 107, 34, 0.32);
  border-radius: 0.7rem;
  background:
    linear-gradient(155deg, rgba(255, 252, 244, 0.98), rgba(251, 242, 224, 0.9));
  box-shadow: 0 15px 44px rgba(62, 45, 18, 0.06);
}

.goh-attention::after {
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 10rem;
  height: 10rem;
  border: 1.7rem solid rgba(184, 138, 52, 0.06);
  border-radius: 50%;
  content: "";
}

.goh-attention--danger {
  border-color: rgba(185, 71, 66, 0.34);
  background: linear-gradient(155deg, rgba(255, 249, 248, 0.98), rgba(249, 230, 228, 0.9));
}

.goh-attention__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.goh-attention__top span {
  color: rgba(16, 36, 63, 0.52);
  font-size: 0.61rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.goh-attention__top b {
  padding: 0.23rem 0.5rem;
  border-radius: 999px;
  color: #805019;
  background: rgba(181, 107, 34, 0.11);
  font-size: 0.61rem;
}

.goh-attention--danger .goh-attention__top b {
  color: #9f3734;
  background: rgba(185, 71, 66, 0.1);
}

.goh-attention h3 {
  position: relative;
  z-index: 1;
  margin: 0.85rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 590;
  line-height: 1.16;
}

.goh-attention > p {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0.6rem 0 1rem;
  color: rgba(16, 36, 63, 0.64);
  font-size: 0.75rem;
  line-height: 1.5;
}

.goh-attention__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.goh-attention__actions > button:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.55rem;
  border: 0;
  color: rgba(16, 36, 63, 0.58);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 690;
}

.goh-attention__actions > button:last-child:hover {
  color: var(--goh-blue);
}

.goh-attention__actions > button:last-child svg {
  width: 0.82rem;
  height: 0.82rem;
}

.goh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  gap: 0.9rem;
  scroll-margin-top: calc(var(--goh-topbar) + 1rem);
}

.goh-grid--wide {
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.72fr);
}

.goh-panel {
  min-width: 0;
  padding: 1.08rem;
  border: 1px solid rgba(16, 36, 63, 0.15);
  border-radius: 0.72rem;
  background: rgba(255, 254, 250, 0.91);
  box-shadow: 0 15px 48px rgba(13, 40, 72, 0.065);
}

.goh-panel__heading {
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(16, 36, 63, 0.1);
}

.goh-panel__heading h2 {
  margin-top: 0.26rem;
  font-size: 1.35rem;
}

.goh-panel__heading > button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.35rem 0.2rem;
  border: 0;
  color: var(--goh-blue);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 730;
}

.goh-panel__heading > button svg {
  width: 0.85rem;
  height: 0.85rem;
}

.goh-run-list {
  display: grid;
}

.goh-run-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 3rem;
  align-items: center;
  gap: 0.72rem;
  min-height: 3.45rem;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-run-row:last-child {
  border-bottom: 0;
}

.goh-status-dot {
  display: inline-block;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: rgba(16, 36, 63, 0.28);
  box-shadow: 0 0 0 4px rgba(16, 36, 63, 0.05);
}

.goh-status-dot.is-good {
  background: var(--goh-green);
  box-shadow: 0 0 0 4px rgba(49, 116, 95, 0.1);
}

.goh-status-dot.is-warning {
  background: var(--goh-amber);
  box-shadow: 0 0 0 4px rgba(181, 107, 34, 0.1);
}

.goh-status-dot.is-danger {
  background: var(--goh-red);
  box-shadow: 0 0 0 4px rgba(185, 71, 66, 0.1);
}

.goh-run-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  line-height: 1.22;
}

.goh-run-row strong {
  overflow: hidden;
  font-size: 0.77rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-run-row small {
  margin-top: 0.2rem;
  overflow: hidden;
  color: rgba(16, 36, 63, 0.52);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-run-row > b {
  padding: 0.2rem 0.43rem;
  border-radius: 999px;
  color: rgba(16, 36, 63, 0.62);
  background: rgba(16, 36, 63, 0.06);
  font-size: 0.58rem;
  font-weight: 750;
  white-space: nowrap;
}

.goh-run-row > b.is-good {
  color: var(--goh-green);
  background: rgba(49, 116, 95, 0.09);
}

.goh-run-row > b.is-warning {
  color: #995a1f;
  background: rgba(181, 107, 34, 0.09);
}

.goh-run-row time {
  color: rgba(16, 36, 63, 0.42);
  font-size: 0.65rem;
  text-align: right;
}

.goh-outcome-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-outcome-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: rgba(16, 36, 63, 0.52);
  font-size: 0.61rem;
}

.goh-outcome-key i,
.goh-chart-key i {
  display: inline-block;
  width: 0.55rem;
  height: 0.18rem;
  background: rgba(16, 36, 63, 0.32);
}

.goh-outcome-key i.is-good {
  background: var(--goh-green);
}

.goh-outcome-key i.is-warning {
  background: var(--goh-amber);
}

.goh-outcome-key i.is-danger {
  background: var(--goh-red);
}

.goh-panel--schedule > .goh-action {
  width: 100%;
  margin-top: 0.75rem;
}

.goh-schedule-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.15rem;
  border-bottom: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-schedule-card time {
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
}

.goh-schedule-card > span {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.goh-schedule-card strong {
  overflow: hidden;
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-schedule-card small {
  margin-top: 0.25rem;
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.62rem;
}

.goh-schedule-card b {
  color: var(--goh-blue);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.goh-status,
.goh-sample-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: rgba(16, 36, 63, 0.62) !important;
  background: rgba(16, 36, 63, 0.06);
  font-size: 0.58rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.goh-status.is-good {
  color: var(--goh-green) !important;
  background: rgba(49, 116, 95, 0.09);
}

.goh-status.is-warning {
  color: #915417 !important;
  background: rgba(181, 107, 34, 0.1);
}

.goh-sync-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 1rem;
}

.goh-sync-flow > div {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 6.6rem;
  padding: 0.65rem;
  border: 1px solid rgba(16, 36, 63, 0.11);
  border-radius: 0.55rem;
  background: rgba(241, 245, 247, 0.64);
}

.goh-sync-flow > div:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -0.52rem;
  z-index: 2;
  width: 0.54rem;
  height: 1px;
  background: rgba(16, 36, 63, 0.25);
  content: "";
}

.goh-sync-flow span {
  color: rgba(16, 36, 63, 0.35);
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 0.72rem;
}

.goh-sync-flow small {
  min-height: 2.1rem;
  margin-top: 0.28rem;
  color: rgba(16, 36, 63, 0.55);
  font-size: 0.6rem;
  line-height: 1.2;
}

.goh-sync-flow strong {
  align-self: end;
  margin-top: auto;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 590;
}

.goh-sample-note {
  margin: 0.72rem 0 0;
  color: rgba(16, 36, 63, 0.48);
  font-size: 0.64rem;
  line-height: 1.4;
}

.goh-source-list {
  display: grid;
}

.goh-source-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.75rem;
  border-bottom: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-source-list > div:last-child {
  border-bottom: 0;
}

.goh-source-list > div > span:nth-child(2) {
  display: grid;
  line-height: 1.15;
}

.goh-source-list strong {
  font-size: 0.74rem;
}

.goh-source-list small {
  margin-top: 0.22rem;
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.62rem;
}

.goh-source-list b {
  padding: 0.2rem 0.42rem;
  border-radius: 999px;
  color: rgba(16, 36, 63, 0.62);
  background: rgba(16, 36, 63, 0.06);
  font-size: 0.57rem;
}

.goh-source-list b.is-good {
  color: var(--goh-green);
  background: rgba(49, 116, 95, 0.09);
}

.goh-source-list b.is-warning {
  color: #93591d;
  background: rgba(181, 107, 34, 0.09);
}

.goh-workspace-matrix {
  padding-bottom: 1rem;
}

.goh-workspace-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.goh-workspace-cards a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.63rem;
  min-height: 3.7rem;
  padding: 0.56rem;
  border: 1px solid rgba(16, 36, 63, 0.11);
  border-radius: 0.55rem;
  color: var(--goh-ink);
  background: rgba(248, 249, 247, 0.68);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.goh-workspace-cards a:hover {
  border-color: rgba(21, 79, 145, 0.34);
  background: #fff;
  transform: translateY(-1px);
}

.goh-workspace-card__mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(21, 79, 145, 0.2);
  border-radius: 50%;
  color: var(--goh-blue);
  background: rgba(220, 232, 243, 0.72);
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 650;
}

.goh-workspace-cards a > span:nth-child(2) {
  display: grid;
  min-width: 0;
  line-height: 1.18;
}

.goh-workspace-cards strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-workspace-cards small {
  margin-top: 0.2rem;
  overflow: hidden;
  color: rgba(16, 36, 63, 0.48);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-workspace-cards svg {
  width: 0.85rem;
  height: 0.85rem;
  color: rgba(16, 36, 63, 0.42);
}

.goh-client-tabs {
  display: flex;
  gap: 0.28rem;
  padding: 0.34rem;
  overflow-x: auto;
  border: 1px solid rgba(16, 36, 63, 0.14);
  border-radius: 0.65rem;
  background: rgba(255, 254, 250, 0.94);
  box-shadow: 0 10px 30px rgba(16, 36, 63, 0.06);
  scrollbar-width: none;
}

.goh-client-tabs::-webkit-scrollbar {
  display: none;
}

.goh-client-tabs button {
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 0.42rem;
  color: rgba(16, 36, 63, 0.58);
  background: transparent;
  font-size: 0.66rem;
  font-weight: 720;
  white-space: nowrap;
}

.goh-client-tabs button:hover,
.goh-client-tabs button.is-active {
  border-color: rgba(21, 79, 145, 0.16);
  color: var(--goh-blue-deep);
  background: rgba(220, 232, 243, 0.65);
}

.goh-chart {
  display: flex;
  align-items: end;
  gap: clamp(0.3rem, 1vw, 0.85rem);
  height: 11rem;
  margin-top: 1.2rem;
  padding: 1rem 0.8rem 0;
  border-bottom: 1px solid rgba(16, 36, 63, 0.16);
  background:
    repeating-linear-gradient(to bottom, transparent, transparent calc(25% - 1px), rgba(16, 36, 63, 0.07) 25%);
}

.goh-chart i {
  flex: 1;
  min-width: 0.3rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: linear-gradient(180deg, rgba(21, 79, 145, 0.88), rgba(21, 79, 145, 0.3));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5);
}

.goh-chart i:nth-child(3n + 2) {
  background: linear-gradient(180deg, rgba(184, 138, 52, 0.84), rgba(184, 138, 52, 0.27));
}

.goh-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.goh-chart-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.6rem;
}

.goh-chart-key span:first-child i {
  background: var(--goh-blue);
}

.goh-chart-key span:nth-child(2) i {
  background: var(--goh-gold);
}

.goh-chart-key span:nth-child(3) i {
  background: var(--goh-green);
}

.goh-panel--focus {
  display: flex;
  flex-direction: column;
}

.goh-focus-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 4.25rem;
  border-bottom: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-focus-item > span:nth-child(2) {
  display: grid;
  line-height: 1.16;
}

.goh-focus-item strong {
  font-size: 0.73rem;
}

.goh-focus-item small {
  margin-top: 0.24rem;
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.62rem;
}

.goh-focus-item > b {
  color: var(--goh-green);
  font-size: 0.62rem;
}

.goh-sync-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.goh-sync-detail > div {
  display: grid;
  min-height: 4.7rem;
  padding: 0.65rem;
  border: 1px solid rgba(16, 36, 63, 0.11);
  border-radius: 0.5rem;
  background: rgba(241, 245, 247, 0.58);
}

.goh-sync-detail small {
  color: rgba(16, 36, 63, 0.48);
  font-size: 0.6rem;
}

.goh-sync-detail strong {
  align-self: end;
  margin-top: 0.55rem;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 570;
}

.goh-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.goh-resource-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 4.25rem;
  padding: 0.65rem;
  border: 1px solid rgba(16, 36, 63, 0.11);
  border-radius: 0.55rem;
  background: rgba(248, 249, 247, 0.65);
}

.goh-resource-grid article > svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--goh-blue);
}

.goh-resource-grid article > span {
  display: grid;
  min-width: 0;
  line-height: 1.16;
}

.goh-resource-grid strong {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-resource-grid small {
  margin-top: 0.24rem;
  overflow: hidden;
  color: rgba(16, 36, 63, 0.5);
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goh-resource-grid article > button:not(.goh-action) {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(16, 36, 63, 0.14);
  border-radius: 0.4rem;
  color: var(--goh-blue);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.61rem;
  font-weight: 720;
}

.goh-resource-grid article > button:not(.goh-action) svg {
  width: 0.75rem;
  height: 0.75rem;
}

.goh-panel--section-preview {
  min-height: 23rem;
}

.goh-section-placeholder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}

.goh-section-placeholder > span {
  display: grid;
  min-height: 6.6rem;
  padding: 0.85rem;
  border: 1px solid rgba(16, 36, 63, 0.11);
  border-radius: 0.55rem;
  background:
    linear-gradient(145deg, rgba(241, 246, 249, 0.72), rgba(255, 255, 255, 0.75));
}

.goh-section-placeholder strong {
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1rem;
  font-weight: 570;
}

.goh-section-placeholder small {
  align-self: end;
  color: rgba(16, 36, 63, 0.52);
  font-size: 0.64rem;
}

.goh-body-copy {
  margin: 1rem 0;
  color: rgba(16, 36, 63, 0.65);
  font-size: 0.8rem;
  line-height: 1.58;
}

.goh-proof-list {
  display: grid;
  margin: 0;
}

.goh-proof-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
  border-bottom: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-proof-list dt {
  color: rgba(16, 36, 63, 0.54);
  font-size: 0.68rem;
}

.goh-proof-list dd {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 720;
  text-align: right;
}

.goh-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.65rem;
  width: min(30rem, calc(100vw - 2rem));
  padding: 0.9rem;
  border: 1px solid rgba(21, 79, 145, 0.3);
  border-radius: 0.65rem;
  color: var(--goh-ink);
  background: rgba(250, 253, 255, 0.97);
  box-shadow: 0 20px 70px rgba(11, 49, 93, 0.22);
  backdrop-filter: blur(14px);
  animation: goh-toast-enter 220ms ease-out both;
}

.goh-toast > svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--goh-blue);
}

.goh-toast > span {
  color: rgba(16, 36, 63, 0.7);
  font-size: 0.74rem;
  line-height: 1.45;
}

.goh-toast > span strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--goh-ink);
}

.goh-toast > button {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  color: rgba(16, 36, 63, 0.52);
  background: rgba(16, 36, 63, 0.05);
}

.goh-toast > button svg {
  width: 0.9rem;
  height: 0.9rem;
}

@keyframes goh-toast-enter {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1280px) {
  :root {
    --goh-sidebar: 248px;
  }

  .goh-topbar {
    grid-template-columns: var(--goh-sidebar) minmax(0, 1fr) auto;
  }

  .goh-topbar__nav {
    gap: 1.4rem;
  }

  .goh-topbar__actions .goh-action {
    width: 2.4rem;
    padding-inline: 0;
  }

  .goh-topbar__actions .goh-action span {
    display: none;
  }

  .goh-hero {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.64fr);
  }

  .goh-hero__copy {
    padding-left: 3rem;
  }

  .goh-sync-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .goh-sync-flow > div:nth-child(3)::after {
    display: none;
  }

  .goh-workspace-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 1024px) {
  :root {
    --goh-topbar: 68px;
  }

  .goh-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .goh-topbar__brand {
    border-right: 0;
  }

  .goh-mobile-menu {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.45rem;
    height: 2.45rem;
    margin-right: 0.45rem;
    border: 1px solid rgba(16, 36, 63, 0.16);
    border-radius: 0.48rem;
    color: var(--goh-ink);
    background: rgba(255, 255, 255, 0.6);
  }

  .goh-mobile-menu svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .goh-topbar__nav {
    display: none;
  }

  .goh-sidebar {
    z-index: 90;
    inset: 0 auto 0 0;
    width: min(20rem, 88vw);
    transform: translateX(-105%);
    transition: transform 220ms ease;
  }

  .goh-sidebar.is-open {
    transform: translateX(0);
  }

  .goh-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
    visibility: hidden;
    background: rgba(6, 20, 37, 0.42);
    opacity: 0;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .goh-sidebar-backdrop.is-open {
    visibility: visible;
    opacity: 1;
  }

  .goh-sidebar__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.3rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--goh-line);
  }

  .goh-sidebar__mobile-head strong {
    font-family: "Fraunces Variable", Georgia, serif;
    font-size: 1rem;
  }

  .goh-sidebar__mobile-head button {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid rgba(16, 36, 63, 0.14);
    border-radius: 50%;
    color: var(--goh-ink);
    background: transparent;
  }

  .goh-sidebar__mobile-head svg {
    width: 1rem;
    height: 1rem;
  }

  .goh-main {
    margin-left: 0;
  }

  .goh-hero__copy {
    padding-left: 2rem;
  }

  .goh-grid,
  .goh-grid--wide {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .goh-topbar__brand {
    min-width: 0;
    padding-left: 0.7rem;
  }

  .goh-topbar__brand .goh-fairy-avatar {
    width: 2.25rem;
    height: 2.25rem;
  }

  .goh-topbar__brand strong {
    font-size: 0.88rem;
  }

  .goh-topbar__brand small {
    display: none;
  }

  .goh-topbar__actions {
    padding-right: 0.65rem;
  }

  .goh-topbar__actions .goh-action {
    display: none;
  }

  .goh-preview-pill {
    min-height: 2rem;
    padding-inline: 0.58rem;
    font-size: 0.58rem;
  }

  .goh-hero {
    display: block;
    min-height: 41.5rem;
  }

  .goh-hero__copy {
    max-width: none;
    padding: 2.5rem 1rem 16rem;
  }

  .goh-hero h1 {
    max-width: 27rem;
    font-size: clamp(3rem, 13vw, 4.7rem);
    line-height: 0.92;
  }

  .goh-hero__copy > p:not(.goh-eyebrow) {
    max-width: 29rem;
    margin-top: 1rem;
    font-size: 0.9rem;
  }

  .goh-hero__facts {
    gap: 0.36rem;
    margin-top: 0.9rem;
  }

  .goh-hero__facts span {
    min-height: 1.75rem;
    padding: 0.26rem 0.48rem;
    font-size: 0.56rem;
  }

  .goh-hero__art {
    position: absolute;
    inset: 17.2rem 0 0;
  }

  .goh-hero__art img {
    top: 0;
    right: -7%;
    width: 80%;
    height: 23rem;
  }

  .goh-hero__ink-wash {
    inset: 4% 2% 22% 24%;
  }

  .goh-hero__landscape {
    bottom: -1.8rem;
    height: 13rem;
    background-attachment: scroll;
    background-position: center, center bottom;
    background-size: 100% 100%, auto 16rem;
  }

  .goh-content {
    gap: 1rem;
    margin-top: -1.3rem;
    padding: 0 0.72rem 2.5rem;
  }

  .goh-truth-banner {
    padding: 0.75rem;
  }

  .goh-truth-banner p {
    font-size: 0.68rem;
  }

  .goh-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .goh-metric {
    padding: 0.8rem;
  }

  .goh-metric > strong {
    font-size: 1.9rem;
  }

  .goh-metric > small {
    white-space: normal;
  }

  .goh-attention-grid {
    grid-template-columns: 1fr;
  }

  .goh-attention {
    min-height: 13.2rem;
  }

  .goh-section__heading,
  .goh-panel__heading {
    align-items: flex-start;
  }

  .goh-section__heading > span,
  .goh-panel__heading > span {
    max-width: 8rem;
    text-align: right;
  }

  .goh-panel {
    padding: 0.85rem;
  }

  .goh-run-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .goh-run-row time {
    display: none;
  }

  .goh-run-row strong {
    white-space: normal;
  }

  .goh-run-row small {
    white-space: normal;
  }

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

  .goh-sync-flow > div:nth-child(2)::after,
  .goh-sync-flow > div:nth-child(4)::after {
    display: none;
  }

  .goh-sync-flow > div:nth-child(3)::after {
    display: block;
  }

  .goh-workspace-cards {
    grid-template-columns: 1fr;
  }

  .goh-client-tabs {
    margin-inline: -0.1rem;
  }

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

  .goh-resource-grid {
    grid-template-columns: 1fr;
  }

  .goh-section-placeholder {
    grid-template-columns: 1fr;
  }

  .goh-toast {
    right: 0.75rem;
    bottom: 0.75rem;
    width: calc(100vw - 1.5rem);
  }
}

@media (max-width: 420px) {
  .goh-mobile-menu {
    width: 2.2rem;
    height: 2.2rem;
    margin-right: 0.32rem;
  }

  .goh-topbar__brand > a {
    gap: 0.48rem;
  }

  .goh-topbar__brand strong {
    max-width: 9.6rem;
  }

  .goh-preview-pill {
    padding-inline: 0.46rem;
    letter-spacing: 0.03em;
  }

  .goh-hero {
    min-height: 43rem;
  }

  .goh-hero__copy {
    padding-top: 2rem;
  }

  .goh-hero h1 {
    font-size: 3.25rem;
  }

  .goh-hero__art {
    inset: 19rem 0 0;
  }

  .goh-metric > div span {
    white-space: normal;
  }

  .goh-metric > strong {
    font-size: 1.7rem;
  }

  .goh-attention__actions {
    flex-wrap: wrap;
  }

  .goh-schedule-card {
    grid-template-columns: 2.7rem minmax(0, 1fr);
  }

  .goh-schedule-card > b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .goh-preview *,
  .goh-preview *::before,
  .goh-preview *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .goh-hero__landscape {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   Control centre — live pages (Phase 2B)
   Big top navigation, small client tiles, per-client side navigation, and the
   ink landscape as a parallax band behind the content rather than the hero.
   ========================================================================== */

/* Big top navigation: dashboard first, then one entry per client. */
.goh-topnav {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.goh-topnav::-webkit-scrollbar {
  display: none;
}

.goh-topnav a {
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--goh-ink);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.goh-topnav a:hover { background: var(--goh-blue-soft); }

.goh-topnav a.is-active {
  border-color: var(--goh-blue);
  background: var(--goh-blue);
  color: #fff;
}

.goh-topnav__divider {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 1.4rem;
  margin: 0 0.35rem;
  background: var(--goh-line);
}

/* The landscape sits behind the content, not across the hero. */
.goh-parallax-band {
  position: relative;
  padding: 2rem 0 2.5rem;
  isolation: isolate;
}

.goh-parallax-band::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(247, 245, 237, 0.94) 0%, rgba(247, 245, 237, 0.72) 38%, rgba(247, 245, 237, 0.95) 100%),
    var(--goh-landscape);
  background-attachment: scroll, fixed;
  background-position: center, center 60%;
  background-repeat: no-repeat;
  background-size: 100% 100%, max(92rem, 100vw) auto;
  filter: saturate(0.8) contrast(1.02);
  content: "";
}

/* Small client tiles — five in a row. */
.goh-client-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.goh-client-tile {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.7rem;
  border: 1px solid var(--goh-line);
  border-radius: 14px;
  background: var(--goh-paper);
  box-shadow: 0 8px 24px rgba(12, 38, 70, 0.05);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.goh-client-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(12, 38, 70, 0.11);
}

/* The artwork is a small round portrait, never a full-bleed picture. */
.goh-client-tile img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--goh-pearl);
}

.goh-client-tile strong {
  display: block;
  font-size: 0.86rem;
  line-height: 1.2;
}

.goh-client-tile small {
  display: block;
  color: rgba(16, 36, 63, 0.62);
  font-size: 0.71rem;
  line-height: 1.3;
}

@media (max-width: 1400px) { .goh-client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .goh-client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .goh-client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .goh-client-grid { grid-template-columns: minmax(0, 1fr); } }

/* Client page: its own left navigation beside the content. */
.goh-client-nav {
  display: grid;
  gap: 0.15rem;
}

.goh-client-nav__title {
  margin: 0 0 0.4rem;
  padding: 0 0.7rem;
  color: rgba(16, 36, 63, 0.55);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.goh-client-nav button {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--goh-ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.goh-client-nav button:hover { background: var(--goh-blue-soft); }
.goh-client-nav button.is-active { background: var(--goh-blue); color: #fff; }




/* Permanent left navigation beside the content, on every page. */
.goh-shell-body {
  display: grid;
  grid-template-columns: var(--goh-sidebar) minmax(0, 1fr);
  align-items: start;
}

.goh-sidenav {
  position: sticky;
  top: var(--goh-topbar);
  height: calc(100vh - var(--goh-topbar));
  padding: 1rem 0.7rem;
  border-right: 1px solid var(--goh-line);
  overflow-y: auto;
}

.goh-sidenav nav {
  display: grid;
  gap: 0.15rem;
}

.goh-sidenav a {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  color: var(--goh-ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.goh-sidenav a svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: 0.72;
}

.goh-sidenav a:hover { background: var(--goh-blue-soft); }

.goh-sidenav a.is-active {
  background: var(--goh-blue);
  color: #fff;
}

.goh-sidenav a.is-active svg { opacity: 1; }

/* On a narrow screen the left column would crush the content, so it lies down
   and becomes a scrolling strip under the header instead.

   It must not simply disappear: Explore only carries the app's own settings,
   so hiding this rail would strand every operations area and every client
   section — Sales, Leads, Jobs and the rest would be unreachable on a phone. */
@media (max-width: 900px) {
  .goh-shell-body { grid-template-columns: minmax(0, 1fr); }

  .goh-sidenav {
    position: sticky;
    top: var(--goh-topbar);
    z-index: 5;
    height: auto;
    padding: 0.5rem 0.7rem;
    border-right: 0;
    border-bottom: 1px solid var(--goh-line);
    background: var(--goh-paper, #fff);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .goh-sidenav::-webkit-scrollbar { display: none; }

  /* Both fillers — the operations areas and a client's own sections — turn
     into one horizontal row of thumb-sized targets. */
  .goh-sidenav nav,
  .goh-sidenav .goh-client-nav {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    width: max-content;
    min-width: 100%;
  }

  .goh-sidenav a,
  .goh-sidenav .goh-client-nav button {
    flex: 0 0 auto;
    width: auto;
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--goh-blue-soft);
    white-space: nowrap;
  }

  .goh-sidenav a.is-active,
  .goh-sidenav .goh-client-nav button.is-active {
    background: var(--goh-blue);
    color: #fff;
  }

  /* The client's name is a heading for a vertical list; in a row it only
     steals space, so the buttons speak for themselves. */
  .goh-sidenav .goh-client-nav__title { display: none; }
}


/* Zen circles beside the fairy, in the dry-brush style of the Genie artwork. */
.goh-enso {
  position: absolute;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.goh-enso__stroke {
  stroke: rgba(16, 36, 63, 0.34);
  vector-effect: non-scaling-stroke;
}

/* The brush lands heavy and lifts thin. */
.goh-enso__stroke--body {
  stroke-width: 9;
  stroke-dasharray: 210 6 90 4 150 9;
  opacity: 0.5;
}

.goh-enso__stroke--inner {
  stroke-width: 4;
  stroke-dasharray: 130 10 60 7;
  opacity: 0.34;
}

/* Dry bristle streaks along the outside of the sweep. */
.goh-enso__stroke--bristle {
  stroke-width: 1.4;
  stroke-dasharray: 26 12 46 20 14 30;
  opacity: 0.4;
}

.goh-enso--one {
  top: -6%;
  left: -9%;
  width: 24rem;
  height: 24rem;
}

.goh-enso--two {
  right: -2%;
  bottom: -10%;
  width: 15rem;
  height: 15rem;
  opacity: 0.72;
}

@media (max-width: 900px) {
  .goh-enso--one { width: 14rem; height: 14rem; }
  .goh-enso--two { width: 9.5rem; height: 9.5rem; }
}

/* One-glance client state. Colour is backed by a word, never colour alone. */
.goh-standing {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.goh-standing__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.goh-standing--critical { border-color: rgba(185, 71, 66, 0.35); background: rgba(185, 71, 66, 0.1); color: var(--goh-red); }
.goh-standing--attention { border-color: rgba(181, 107, 34, 0.32); background: rgba(181, 107, 34, 0.1); color: var(--goh-amber); }
.goh-standing--watch { border-color: rgba(21, 79, 145, 0.3); background: rgba(21, 79, 145, 0.08); color: var(--goh-blue); }
.goh-standing--settled { border-color: rgba(49, 116, 95, 0.3); background: rgba(49, 116, 95, 0.09); color: var(--goh-green); }
.goh-standing--unknown { border-color: var(--goh-line); background: rgba(16, 36, 63, 0.05); color: rgba(16, 36, 63, 0.6); }

/* Alert rows on a client page. */
.goh-alert-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(16, 36, 63, 0.08);
}

.goh-alert-row:last-child { border-bottom: 0; }
.goh-alert-row strong { display: block; font-size: 0.9rem; line-height: 1.3; }
.goh-alert-row small { display: block; color: rgba(16, 36, 63, 0.62); font-size: 0.76rem; line-height: 1.4; }
.goh-alert-row time { color: rgba(16, 36, 63, 0.5); font-size: 0.72rem; white-space: nowrap; }

.goh-hero__standing { margin: 0.35rem 0 0.6rem; }

/* ========================================================================== */
/* Genie Control Panel v8 — charcoal, paper and warm-gold control system.      */
/* The rules are scoped so reporting pages keep their existing verified data. */
/* ========================================================================== */

.gcp-v8-shell {
  --gcp-paper: #eee9e0;
  --gcp-paper-bright: #ffffff;
  --gcp-charcoal: #222222;
  --gcp-charcoal-2: #2b2b2a;
  --gcp-ink: #252522;
  --gcp-ink-soft: #69675f;
  --gcp-gold: #d5af69;
  --gcp-gold-deep: #8e6429;
  --gcp-gold-pale: #efe1c2;
  --gcp-mist: #e7e4de;
  --gcp-line: #d5cfc4;
  --gcp-green: #32715c;
  --gcp-green-pale: #dce9e2;
  --gcp-rose: #9b5352;
  --gcp-rose-pale: #f1dfdc;
  --gcp-shadow: 0 18px 52px rgba(35, 32, 27, 0.11);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  color: var(--gcp-ink);
  background: var(--gcp-paper);
}

.dark .gcp-v8-shell {
  --gcp-paper: #191918;
  --gcp-paper-bright: #242422;
  --gcp-charcoal: #111110;
  --gcp-charcoal-2: #1a1a19;
  --gcp-ink: #f2efe8;
  --gcp-ink-soft: #b4afa5;
  --gcp-gold: #d7b36f;
  --gcp-gold-deep: #e0bc76;
  --gcp-gold-pale: #493b25;
  --gcp-mist: #343330;
  --gcp-line: #45433e;
  --gcp-green-pale: #223c33;
  --gcp-rose-pale: #4a2e2d;
  --gcp-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

.gcp-v8-sidebar {
  position: sticky;
  top: 0;
  z-index: 45;
  align-self: start;
  min-height: 100vh;
  height: 100vh;
  padding: 1.75rem 1.25rem 1.35rem;
  overflow: hidden auto;
  color: #f4f1ea;
  background: var(--gcp-charcoal);
}

.gcp-v8-sidebar::before,
.gcp-v8-sidebar::after {
  position: absolute;
  border: 1px solid rgba(213, 175, 105, 0.28);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.gcp-v8-sidebar::before { top: 5.5rem; right: -9.5rem; width: 14rem; height: 14rem; }
.gcp-v8-sidebar::after { bottom: 5rem; left: -5rem; width: 7rem; height: 7rem; }

.gcp-v8-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  color: inherit;
  text-decoration: none;
}

.gcp-v8-brand__mark {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid var(--gcp-gold);
  border-radius: 50%;
  background: var(--gcp-gold);
}

.gcp-v8-brand__mark img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 52%; }
.gcp-v8-brand strong { display: block; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.25rem; font-weight: 580; line-height: 1; }
.gcp-v8-brand small { display: block; margin-top: 0.3rem; color: #aaa69d; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

.gcp-v8-sidebar__nav { position: relative; z-index: 1; padding-bottom: 8.5rem; }
.gcp-v8-nav-group { margin-top: 1.65rem; }
.gcp-v8-nav-group > p { margin: 0; padding: 0 0.65rem 0.5rem; color: #8f8c84; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.gcp-v8-nav-group > a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.85rem;
  margin-top: 0.18rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  color: #d9d6cf;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}
.gcp-v8-nav-group > a svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: #aaa69d; }
.gcp-v8-nav-group > a:hover { background: rgba(255, 255, 255, 0.07); }
.gcp-v8-nav-group > a.is-active { color: var(--gcp-charcoal); background: var(--gcp-gold); }
.gcp-v8-nav-group > a.is-active svg { color: var(--gcp-charcoal); }

.gcp-v8-private-note {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.35rem;
  left: 1.25rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
  background: var(--gcp-charcoal-2);
}
.gcp-v8-private-note span { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; font-weight: 750; }
.gcp-v8-private-note i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #8cba9e; box-shadow: 0 0 0 5px rgba(140, 186, 158, 0.12); }
.gcp-v8-private-note small { display: block; margin-top: 0.55rem; color: #aaa69d; font-size: 0.68rem; line-height: 1.35; }

.gcp-v8-surface { min-width: 0; background: var(--gcp-paper); }
.gcp-v8-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
  padding: 0 2.35rem;
  border-bottom: 1px solid var(--gcp-line);
  background: var(--gcp-paper-bright);
}
.gcp-v8-context { display: grid; line-height: 1.15; }
.gcp-v8-context strong { font-size: 0.95rem; }
.gcp-v8-context small { margin-top: 0.3rem; color: var(--gcp-ink-soft); font-size: 0.72rem; }
.gcp-v8-topbar .performance-ink-header__clients { justify-content: center; padding: 0 1rem; }

.gcp-v8-account { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; }
.gcp-v8-account > button,
.gcp-v8-theme-toggle { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--gcp-line); border-radius: 50%; color: var(--gcp-ink); background: var(--gcp-paper-bright); }
.gcp-v8-account > button svg { width: 1rem; height: 1rem; }
.gcp-v8-owner { display: flex; align-items: center; gap: 0.55rem; margin-left: 0.25rem; padding-left: 0.75rem; border-left: 1px solid var(--gcp-line); }
.gcp-v8-owner i { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; color: white; background: var(--gcp-charcoal); font-style: normal; font-size: 0.75rem; font-weight: 800; }
.gcp-v8-owner small { color: var(--gcp-ink-soft); font-size: 0.7rem; white-space: nowrap; }
.gcp-v8-mobile-rail { display: none; }

.gcp-v8-page-frame { min-width: 0; }
.gcp-v8-page-frame > .goh-sidenav:empty { display: none; }
.gcp-v8-page-frame > .goh-sidenav:not(:empty) {
  position: sticky;
  top: 4.75rem;
  z-index: 8;
  width: 100%;
  height: auto;
  padding: 0.55rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--gcp-line);
  background: var(--gcp-paper-bright);
  overflow: auto hidden;
}
.gcp-v8-page-frame > .goh-sidenav:not(:empty) .goh-client-nav { display: flex; align-items: center; gap: 0.35rem; width: max-content; min-width: 100%; }
.gcp-v8-page-frame > .goh-sidenav:not(:empty) .goh-client-nav__title { margin: 0 0.5rem 0 0; padding: 0; }
.gcp-v8-page-frame > .goh-sidenav:not(:empty) button { width: auto; min-height: 2.35rem; padding: 0.45rem 0.8rem; border-radius: 999px; white-space: nowrap; }
.gcp-v8-page-frame .performance-ink-main { min-width: 0; }
.gcp-v8-shell .performance-ink-footer { margin: 0; color: var(--gcp-ink-soft); background: var(--gcp-paper-bright); border-color: var(--gcp-line); }

.gcp-v8-main { width: min(100% - 4.5rem, 91rem); margin: 0 auto; padding: 2rem 0 3.5rem; }
.gcp-v8-title-row { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.gcp-v8-title-row h1 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(2.65rem, 4.3vw, 4.25rem); font-weight: 570; line-height: 0.95; letter-spacing: -0.045em; }
.gcp-v8-eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; color: var(--gcp-gold-deep); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; }
.gcp-v8-eyebrow svg { width: 0.95rem; height: 0.95rem; }
.gcp-v8-read-state { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.75rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-ink-soft); background: var(--gcp-paper-bright); font-size: 0.72rem; font-weight: 750; }
.gcp-v8-read-state svg { width: 1rem; height: 1rem; color: var(--gcp-green); }

.gcp-v8-hero,
.gcp-v8-hubs-hero {
  display: grid;
  grid-template-columns: minmax(22rem, 0.9fr) minmax(32rem, 1.2fr);
  min-height: 17.75rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 1.75rem;
  background: var(--gcp-paper-bright);
  box-shadow: var(--gcp-shadow);
}
.gcp-v8-hero__copy,
.gcp-v8-hubs-hero > div { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 2.25rem 2.1rem; }
.gcp-v8-hero h2,
.gcp-v8-hubs-hero h2 { max-width: 38rem; margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 560; line-height: 1.04; letter-spacing: -0.04em; }
.gcp-v8-hero__copy > p:not(.gcp-v8-eyebrow),
.gcp-v8-hubs-hero > div > p:not(.gcp-v8-eyebrow) { max-width: 38rem; margin: 0.9rem 0 0; color: var(--gcp-ink-soft); font-size: 0.92rem; line-height: 1.5; }
.gcp-v8-hero__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.35rem; }
.gcp-v8-button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.65rem; padding: 0 1rem; border: 1px solid var(--gcp-charcoal); border-radius: 999px; color: white; background: var(--gcp-charcoal); font-size: 0.78rem; font-weight: 750; text-decoration: none; }
.gcp-v8-button svg { width: 1rem; height: 1rem; }
.gcp-v8-button.is-secondary { color: var(--gcp-ink); border-color: var(--gcp-line); background: transparent; }
.gcp-v8-hero__art { position: relative; min-height: 17.75rem; overflow: hidden; background: var(--gcp-mist); }
.gcp-v8-hero__art img,
.gcp-v8-hubs-hero > img { display: block; width: 100%; height: 100%; min-height: 17.75rem; object-fit: cover; object-position: 58% 52%; }
.gcp-v8-hero__art > span { position: absolute; right: 1rem; bottom: 1rem; padding: 0.45rem 0.65rem; border-radius: 999px; color: white; background: rgba(34, 34, 34, 0.82); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }

.gcp-v8-truth { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; margin-top: 0.85rem; padding: 0.75rem 0.9rem; border: 1px dashed var(--gcp-line); border-radius: 0.85rem; color: var(--gcp-ink-soft); background: color-mix(in srgb, var(--gcp-paper-bright) 70%, transparent); }
.gcp-v8-truth svg { width: 1.05rem; height: 1.05rem; color: var(--gcp-gold-deep); }
.gcp-v8-truth p { margin: 0; font-size: 0.72rem; line-height: 1.45; }
.gcp-v8-truth strong { color: var(--gcp-ink); }

.gcp-v8-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.85rem; }
.gcp-v8-metric { position: relative; min-height: 7.25rem; overflow: hidden; padding: 1.05rem; border: 1px solid var(--gcp-line); border-radius: 1.1rem; background: var(--gcp-paper-bright); }
.gcp-v8-metric::after { position: absolute; top: -1.9rem; right: -1.9rem; width: 4rem; height: 4rem; border: 1px solid rgba(142, 100, 41, 0.28); border-radius: 50%; content: ""; }
.gcp-v8-metric > div { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--gcp-ink-soft); font-size: 0.66rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; }
.gcp-v8-metric svg { width: 1.05rem; height: 1.05rem; color: var(--gcp-gold-deep); }
.gcp-v8-metric > strong { display: block; margin-top: 0.75rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 2rem; font-weight: 580; line-height: 1; }
.gcp-v8-metric > small { display: block; margin-top: 0.35rem; color: var(--gcp-ink-soft); font-size: 0.7rem; line-height: 1.3; }
.gcp-v8-metric.is-warning { border-color: color-mix(in srgb, var(--gcp-gold) 65%, var(--gcp-line)); }

.gcp-v8-overview-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(19rem, 0.72fr); gap: 0.85rem; margin-top: 0.85rem; }
.gcp-v8-panel { border: 1px solid var(--gcp-line); border-radius: 1.35rem; background: var(--gcp-paper-bright); box-shadow: 0 9px 28px rgba(35, 32, 27, 0.045); }
.gcp-v8-panel__head { min-height: 4.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v8-panel__head > div { display: flex; align-items: center; gap: 0.65rem; }
.gcp-v8-panel__head > div > svg { width: 1.25rem; height: 1.25rem; color: var(--gcp-gold-deep); }
.gcp-v8-panel__head strong { display: block; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.35rem; font-weight: 560; }
.gcp-v8-panel__head small { display: block; margin-top: 0.15rem; color: var(--gcp-ink-soft); font-size: 0.68rem; }
.gcp-v8-panel__head > a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gcp-gold-deep); font-size: 0.72rem; font-weight: 800; }
.gcp-v8-panel__head > a svg { width: 0.9rem; height: 0.9rem; }
.gcp-v8-empty-state { padding: 2rem 1.25rem; color: var(--gcp-ink-soft); font-size: 0.82rem; line-height: 1.5; }
.gcp-v8-agenda { padding: 0.4rem 1.2rem 0.85rem; }
.gcp-v8-agenda article { min-height: 4.25rem; display: grid; grid-template-columns: 3.8rem 0.3rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; border-top: 1px solid var(--gcp-line); }
.gcp-v8-agenda article:first-child { border-top: 0; }
.gcp-v8-agenda time { display: grid; color: var(--gcp-ink-soft); font-size: 0.67rem; }
.gcp-v8-agenda time strong { color: var(--gcp-ink); font-family: "Fraunces Variable", Georgia, serif; font-size: 0.9rem; }
.gcp-v8-agenda article > i { width: 0.25rem; height: 2.45rem; border-radius: 999px; background: var(--gcp-gold); }
.gcp-v8-agenda article > div > strong { display: block; font-size: 0.82rem; }
.gcp-v8-agenda article > div > small { display: block; margin-top: 0.15rem; color: var(--gcp-ink-soft); font-size: 0.68rem; }
.gcp-v8-agenda article > span { padding: 0.3rem 0.5rem; border-radius: 999px; color: var(--gcp-ink-soft); background: var(--gcp-mist); font-size: 0.6rem; font-weight: 750; text-transform: capitalize; }

.gcp-v8-focus-panel { position: relative; overflow: hidden; padding: 1.4rem; border-radius: 1.35rem; color: white; background: var(--gcp-charcoal); }
.gcp-v8-focus-panel::after { position: absolute; top: 3rem; right: -7rem; width: 11rem; height: 11rem; border: 1px solid rgba(213, 175, 105, 0.3); border-radius: 50%; content: ""; }
.gcp-v8-focus-panel > div { position: relative; z-index: 1; }
.gcp-v8-focus-panel .gcp-v8-eyebrow { color: var(--gcp-gold); }
.gcp-v8-focus-panel h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.8rem; font-weight: 560; line-height: 1.05; }
.gcp-v8-focus-panel > div > p:not(.gcp-v8-eyebrow) { margin: 0.65rem 0 1rem; color: #bbb7ae; font-size: 0.76rem; line-height: 1.4; }
.gcp-v14-view-all { display: inline-flex; align-items: center; gap: 0.35rem; margin: -0.35rem 0 1rem; color: var(--gcp-gold); font-size: 0.68rem; font-weight: 850; text-decoration: none; }
.gcp-v14-view-all svg { width: 0.85rem; height: 0.85rem; }
.gcp-v8-focus-list { display: grid; gap: 0.45rem; }
.gcp-v8-focus-list > article { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-height: 4.15rem; padding: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; color: white; background: rgba(255, 255, 255, 0.065); }
.gcp-v8-focus-list > article > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--gcp-charcoal); background: var(--gcp-gold); }
.gcp-v8-focus-list > article svg { width: 0.95rem; height: 0.95rem; }
.gcp-v8-focus-list > article > a { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.35rem; padding: 0.45rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: var(--gcp-charcoal); background: var(--gcp-gold); font-size: 0.67rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.gcp-v8-focus-list > article > a:hover { background: #e3c283; }
.gcp-v8-focus-list strong { display: block; font-size: 0.72rem; line-height: 1.3; }
.gcp-v8-focus-list small { display: -webkit-box; margin-top: 0.12rem; overflow: hidden; color: #aaa69d; font-size: 0.65rem; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gcp-v8-focus-clear { display: flex; align-items: center; gap: 0.55rem; padding: 1rem 0; color: #c7c3bb; font-size: 0.78rem; }
.gcp-v8-focus-clear svg { width: 1.1rem; color: #8cba9e; }

.gcp-v8-section { margin-top: 1.85rem; }
.gcp-v8-section__head { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin: 0 0.1rem 0.8rem; }
.gcp-v8-section__head h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.9rem; font-weight: 560; line-height: 1; letter-spacing: -0.03em; }
.gcp-v8-section__head > div > p:last-child { margin: 0.42rem 0 0; color: var(--gcp-ink-soft); font-size: 0.78rem; }
.gcp-v8-section__head > a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gcp-gold-deep); font-size: 0.72rem; font-weight: 800; }
.gcp-v8-section__head > a svg { width: 0.9rem; height: 0.9rem; }
.gcp-v8-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.gcp-v8-client-card { min-height: 10.9rem; display: flex; flex-direction: column; padding: 1.1rem; border: 1px solid var(--gcp-line); border-radius: 1.15rem; color: inherit; background: var(--gcp-paper-bright); text-decoration: none; }
.gcp-v8-client-card:hover { border-color: color-mix(in srgb, var(--gcp-gold-deep) 50%, var(--gcp-line)); transform: translateY(-2px); }
.gcp-v8-client-card__top { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.gcp-v8-client-card__top > img { width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; object-fit: cover; background: var(--gcp-mist); }
.gcp-v8-client-card > strong { display: block; margin-top: 0.8rem; font-size: 0.95rem; }
.gcp-v8-client-card > p { margin: 0.35rem 0 0; color: var(--gcp-ink-soft); font-size: 0.72rem; line-height: 1.35; }
.gcp-v8-client-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--gcp-line); }
.gcp-v8-client-card__bottom small { color: var(--gcp-ink-soft); font-size: 0.66rem; }
.gcp-v8-client-card__bottom b { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--gcp-gold-deep); font-size: 0.67rem; }
.gcp-v8-client-card__bottom svg { width: 0.8rem; height: 0.8rem; }

.gcp-v8-hub-overview { margin-top: 0.85rem; overflow: hidden; }
.gcp-v8-hub-overview__head { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 1.2rem 0.5rem; }
.gcp-v8-hub-overview__head h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.8rem; font-weight: 560; line-height: 1; letter-spacing: -0.03em; }
.gcp-v8-hub-overview__head p:last-child { margin: 0.45rem 0 0; color: var(--gcp-ink-soft); font-size: 0.76rem; }
.gcp-v8-hub-overview__head > span { flex: 0 0 auto; text-align: right; }
.gcp-v8-hub-overview__head > span strong { display: block; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.65rem; font-weight: 580; }
.gcp-v8-hub-overview__head > span small { color: var(--gcp-ink-soft); font-size: 0.65rem; }
.gcp-v8-hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; padding: 0.9rem 1.2rem 1.2rem; }
.gcp-v8-hub-card { overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 1rem; color: inherit; background: var(--gcp-paper-bright); text-decoration: none; }
.gcp-v8-hub-card:hover,
.gcp-v8-hub-card.is-active { border-color: var(--gcp-gold-deep); transform: translateY(-2px); }
.gcp-v8-hub-card.is-active { box-shadow: inset 0 0 0 1px var(--gcp-gold-deep); }
.gcp-v8-hub-card__art { display: block; height: 7rem; overflow: hidden; background: var(--gcp-mist); }
.gcp-v8-hub-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #fff; }
.gcp-v8-hub-card__body { display: block; padding: 0.8rem; }
.gcp-v8-hub-card__body > span:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; }
.gcp-v8-hub-card__body > span:first-child svg { width: 1rem; height: 1rem; color: var(--gcp-gold-deep); }
.gcp-v8-hub-card__body > span:first-child strong { font-family: "Fraunces Variable", Georgia, serif; font-size: 1.05rem; font-weight: 560; line-height: 1.05; }
.gcp-v8-hub-card__body > span:first-child b { padding: 0.25rem 0.4rem; border-radius: 999px; background: var(--gcp-mist); font-size: 0.6rem; }
.gcp-v8-hub-card__body > small { display: block; margin-top: 0.45rem; color: var(--gcp-ink-soft); font-size: 0.67rem; line-height: 1.3; }
.gcp-v8-hub-card__body > em { display: block; margin-top: 0.8rem; color: var(--gcp-gold-deep); font-size: 0.58rem; font-style: normal; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.gcp-v8-hub-card__body > p { min-height: 2.8rem; margin: 0.32rem 0 0; color: var(--gcp-ink-soft); font-size: 0.69rem; line-height: 1.35; }
.gcp-v8-hub-open { display: flex !important; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-gold-deep); font-size: 0.67rem; font-weight: 800; }
.gcp-v8-hub-open svg { width: 0.85rem; height: 0.85rem; }

.gcp-v8-workflows { margin-top: 0.85rem; overflow: hidden; }
.gcp-v8-workflow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.4rem 1.2rem 0.9rem; }
.gcp-v8-workflow-list article { min-height: 4rem; display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.45rem; border-top: 1px solid var(--gcp-line); }
.gcp-v8-workflow-list article:nth-child(-n + 2) { border-top: 0; }
.gcp-v8-workflow-list article > span { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 0.7rem; color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); }
.gcp-v8-workflow-list article > span svg { width: 1rem; height: 1rem; }
.gcp-v8-workflow-list strong { display: block; font-size: 0.78rem; }
.gcp-v8-workflow-list small { display: block; margin-top: 0.15rem; color: var(--gcp-ink-soft); font-size: 0.65rem; }
.gcp-v8-workflow-list article > b,
.gcp-v8-workflow-state > b { padding: 0.3rem 0.5rem; border-radius: 999px; font-size: 0.62rem; text-transform: capitalize; }
.gcp-v8-workflow-list .is-active,
.gcp-v8-workflow-state .is-active { color: var(--gcp-green); background: var(--gcp-green-pale); }
.gcp-v8-workflow-list .is-paused,
.gcp-v8-workflow-state .is-paused { color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); }

/* Knowledge hub page. */
.gcp-v8-hubs-hero > div > span { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; margin-top: 1.1rem; padding: 0.45rem 0.65rem; border-radius: 999px; color: var(--gcp-green); background: var(--gcp-green-pale); font-size: 0.7rem; font-weight: 750; }
.gcp-v8-hubs-hero > div > span svg { width: 0.95rem; height: 0.95rem; }
.gcp-v8-hub-chooser { margin-top: 1.8rem; }
.gcp-v8-hub-grid.is-chooser { padding: 0; }
.gcp-v8-hub-grid.is-chooser .gcp-v8-hub-card__art { height: 8.75rem; }
.gcp-v8-workflow-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: 0.85rem; padding: 1.15rem; border: 1px solid var(--gcp-line); border-radius: 1.2rem; background: var(--gcp-paper-bright); }
.gcp-v8-workflow-banner > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.85rem; color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); }
.gcp-v8-workflow-banner > span svg { width: 1.25rem; height: 1.25rem; }
.gcp-v8-workflow-banner h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.45rem; font-weight: 560; }
.gcp-v8-workflow-banner > div > p:not(.gcp-v8-eyebrow) { margin: 0.3rem 0 0; color: var(--gcp-ink-soft); font-size: 0.75rem; }
.gcp-v8-workflow-banner > div > small { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; color: var(--gcp-ink-soft); font-size: 0.65rem; }
.gcp-v8-workflow-banner > div > small svg { width: 0.85rem; height: 0.85rem; }
.gcp-v8-workflow-state { display: grid; justify-items: end; gap: 0.35rem; }
.gcp-v8-workflow-state > span { color: var(--gcp-ink-soft); font-size: 0.65rem; }
.gcp-v8-workflow-state > a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--gcp-gold-deep); font-size: 0.67rem; font-weight: 800; }
.gcp-v8-workflow-state > a svg { width: 0.8rem; height: 0.8rem; }

.gcp-v8-library { margin-top: 2rem; }
.gcp-v8-match-count { padding: 0.45rem 0.65rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-ink-soft); background: var(--gcp-paper-bright); font-size: 0.7rem; font-weight: 750; }
.gcp-v8-search-panel { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 0.65rem; padding: 0.85rem; border: 1px solid var(--gcp-line); border-radius: 1rem; background: var(--gcp-paper-bright); }
.gcp-v8-search-panel > label { position: relative; }
.gcp-v8-search-panel > label > svg { position: absolute; z-index: 2; top: 0.72rem; left: 0.75rem; width: 1rem; height: 1rem; color: var(--gcp-ink-soft); }
.gcp-v8-search-panel input { padding-left: 2.35rem; color: var(--gcp-ink); background: var(--gcp-paper-bright); border-color: var(--gcp-line); }
.gcp-v8-search-panel button { color: var(--gcp-ink); background: var(--gcp-paper-bright); border-color: var(--gcp-line); }
.gcp-v8-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.8rem; }
.gcp-v8-result-card { min-height: 15rem; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 1.1rem; background: var(--gcp-paper-bright); }
.gcp-v8-result-card:hover { border-color: var(--gcp-gold-deep); }
.gcp-v8-result-card > button { width: 100%; height: 100%; min-height: 15rem; display: flex; flex-direction: column; padding: 1.15rem; border: 0; color: var(--gcp-ink); background: transparent; text-align: left; cursor: pointer; }
.gcp-v8-result-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.gcp-v8-result-card__meta b { padding: 0.3rem 0.5rem; border-radius: 999px; color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); font-size: 0.62rem; }
.gcp-v8-result-card__meta time { color: var(--gcp-ink-soft); font-size: 0.65rem; }
.gcp-v8-result-card h3 { margin: 0.85rem 0 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.25rem; font-weight: 560; line-height: 1.16; }
.gcp-v8-result-card > button > p { display: -webkit-box; margin: 0.55rem 0 0; overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.75rem; line-height: 1.5; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.gcp-v8-result-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; }
.gcp-v8-result-card__tags i { padding: 0.25rem 0.4rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-ink-soft); font-size: 0.6rem; font-style: normal; }
.gcp-v8-result-card__open { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-gold-deep); font-size: 0.7rem; font-weight: 800; }
.gcp-v8-result-card__open svg { width: 0.85rem; height: 0.85rem; }
.gcp-v8-result-empty { margin-top: 0.8rem; padding: 2rem; border: 1px solid var(--gcp-line); border-radius: 1rem; background: var(--gcp-paper-bright); }
.gcp-v8-load-more { display: flex; justify-content: center; margin-top: 1rem; }

/* Private v14: a complete route from an attention card to one safe Genie chat. */
.gcp-v14-attention-main { max-width: 76rem; }
.gcp-v14-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; color: var(--gcp-gold-deep); font-size: 0.75rem; font-weight: 800; text-decoration: none; }
.gcp-v14-back svg { width: 0.95rem; height: 0.95rem; }
.gcp-v14-attention-hero { display: flex; align-items: start; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--gcp-line); border-radius: 1.5rem; background: var(--gcp-paper-bright); box-shadow: var(--gcp-shadow); }
.gcp-v14-attention-hero h1 { max-width: 52rem; margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(2.15rem, 4.5vw, 4rem); font-weight: 560; line-height: 1.02; letter-spacing: -0.045em; }
.gcp-v14-attention-hero > div > p:last-child { max-width: 50rem; margin: 0.9rem 0 0; color: var(--gcp-ink-soft); font-size: 0.9rem; line-height: 1.55; }
.gcp-v14-attention-hero > span { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.2rem; padding: 0.45rem 0.7rem; border: 1px solid var(--gcp-line); border-radius: 999px; font-size: 0.68rem; font-weight: 850; white-space: nowrap; }
.gcp-v14-attention-hero > span svg { width: 0.95rem; height: 0.95rem; }
.gcp-v14-attention-hero > span.is-critical { color: var(--gcp-rose); border-color: color-mix(in srgb, var(--gcp-rose) 45%, var(--gcp-line)); background: var(--gcp-rose-pale); }
.gcp-v14-attention-hero > span.is-warning { color: var(--gcp-gold-deep); border-color: color-mix(in srgb, var(--gcp-gold) 55%, var(--gcp-line)); background: var(--gcp-gold-pale); }
.gcp-v14-attention-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr); gap: 0.85rem; margin-top: 0.85rem; }
.gcp-v14-attention-card,
.gcp-v14-resolution-card { padding: 1.35rem; border: 1px solid var(--gcp-line); border-radius: 1.25rem; background: var(--gcp-paper-bright); box-shadow: 0 11px 34px rgba(35, 32, 27, 0.06); }
.gcp-v14-attention-card__head { display: flex; align-items: center; gap: 0.65rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v14-attention-card__head > svg { width: 1.25rem; height: 1.25rem; color: var(--gcp-gold-deep); }
.gcp-v14-attention-card__head span { display: grid; }
.gcp-v14-attention-card__head strong { font-family: "Fraunces Variable", Georgia, serif; font-size: 1.35rem; font-weight: 560; }
.gcp-v14-attention-card__head small { margin-top: 0.15rem; color: var(--gcp-ink-soft); font-size: 0.68rem; }
.gcp-v14-attention-card > p { margin: 1rem 0; color: var(--gcp-ink-soft); font-size: 0.82rem; line-height: 1.6; }
.gcp-v14-attention-card dl { margin: 0; }
.gcp-v14-attention-card dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 0.72rem 0; border-top: 1px solid var(--gcp-line); }
.gcp-v14-attention-card dt { color: var(--gcp-ink-soft); font-size: 0.68rem; }
.gcp-v14-attention-card dd { margin: 0; font-size: 0.73rem; font-weight: 750; text-align: right; overflow-wrap: anywhere; }
.gcp-v14-attention-card.is-loading,
.gcp-v14-attention-card.is-missing { min-height: 18rem; display: flex; flex-direction: column; align-items: start; justify-content: center; }
.gcp-v14-attention-card.is-missing > svg { width: 1.5rem; height: 1.5rem; color: var(--gcp-gold-deep); }
.gcp-v14-attention-card.is-missing h1 { margin: 0.8rem 0 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 2rem; font-weight: 560; }
.gcp-v14-resolution-card { position: relative; overflow: hidden; color: white; background: var(--gcp-charcoal); }
.gcp-v14-resolution-card::after { position: absolute; top: -5rem; right: -5rem; width: 11rem; height: 11rem; border: 1px solid rgba(213, 175, 105, 0.3); border-radius: 50%; content: ""; }
.gcp-v14-resolution-card > * { position: relative; z-index: 1; }
.gcp-v14-resolution-card .gcp-v8-eyebrow { color: var(--gcp-gold); }
.gcp-v14-resolution-card h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 2rem; font-weight: 560; line-height: 1.05; }
.gcp-v14-resolution-card > p:not(.gcp-v8-eyebrow) { margin: 0.8rem 0 1rem; color: #c8c3b9; font-size: 0.78rem; line-height: 1.5; }
.gcp-v14-next-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.6rem; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.06); }
.gcp-v14-next-step > svg { width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--gcp-gold); }
.gcp-v14-next-step span { display: grid; }
.gcp-v14-next-step strong { font-size: 0.72rem; }
.gcp-v14-next-step small { margin-top: 0.25rem; color: #bcb7ad; font-size: 0.68rem; line-height: 1.4; }
.gcp-v14-chat-button { width: 100%; justify-content: center; margin-top: 1rem; color: var(--gcp-charcoal); border-color: var(--gcp-gold); background: var(--gcp-gold); cursor: pointer; }
.gcp-v14-chat-button:hover { background: #e3c283; }
.gcp-v14-chat-button:disabled { cursor: wait; opacity: 0.66; }
.gcp-v14-private-line { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.65rem; color: #9e9a92; font-size: 0.62rem; }
.gcp-v14-private-line svg { width: 0.8rem; height: 0.8rem; }
.gcp-v14-action-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; margin-top: 0.85rem; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.8rem; font-size: 0.68rem; line-height: 1.4; }
.gcp-v14-action-result svg { width: 1rem; height: 1rem; }
.gcp-v14-action-result span { display: grid; }
.gcp-v14-action-result strong { margin-bottom: 0.12rem; }
.gcp-v14-action-result.is-success { color: #cde8db; background: rgba(50, 113, 92, 0.2); }
.gcp-v14-action-result.is-warning { color: #f1dfbc; background: rgba(142, 100, 41, 0.2); }
.gcp-v14-queue { display: grid; gap: 0.7rem; margin-top: 0.85rem; }
.gcp-v14-queue article { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--gcp-line); border-radius: 1.15rem; background: var(--gcp-paper-bright); box-shadow: 0 9px 28px rgba(35, 32, 27, 0.045); }
.gcp-v14-queue article > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); }
.gcp-v14-queue article.is-critical > span { color: var(--gcp-rose); background: var(--gcp-rose-pale); }
.gcp-v14-queue article.is-clear > span { color: var(--gcp-green); background: var(--gcp-green-pale); }
.gcp-v14-queue article > span svg { width: 1.2rem; height: 1.2rem; }
.gcp-v14-queue article small { color: var(--gcp-ink-soft); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gcp-v14-queue article h2 { margin: 0.22rem 0 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.28rem; font-weight: 560; line-height: 1.12; }
.gcp-v14-queue article p { margin: 0.35rem 0 0; color: var(--gcp-ink-soft); font-size: 0.72rem; line-height: 1.4; }
.gcp-v14-queue article > a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0.5rem 0.8rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-charcoal); background: var(--gcp-gold); font-size: 0.68rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.gcp-v14-queue article > a svg { width: 0.85rem; height: 0.85rem; }

/* ========================================================================== */
/* Genie Control Panel v15 — navy-and-gold e-sumi operations overview.        */
/* Live records and existing destinations stay unchanged; only presentation.  */
/* ========================================================================== */

.gcp-v8-shell {
  --gcp-paper: var(--gcp-color-page-cream);
  --gcp-paper-bright: var(--gcp-color-card-white);
  --gcp-charcoal: var(--gcp-color-sidebar-navy);
  --gcp-charcoal-2: var(--gcp-color-sidebar-navy-deep);
  --gcp-ink: var(--gcp-color-text-primary);
  --gcp-text: var(--gcp-color-text-primary);
  --gcp-ink-soft: var(--gcp-color-text-muted);
  --gcp-gold: var(--gcp-color-gold);
  --gcp-gold-deep: var(--gcp-color-gold-dark);
  --gcp-gold-pale: var(--gcp-color-warning-surface);
  --gcp-mist: var(--gcp-color-border-cool);
  --gcp-line: var(--gcp-color-border-warm);
  --gcp-green: var(--gcp-color-success);
  --gcp-green-pale: var(--gcp-color-success-surface);
  --gcp-rose: var(--gcp-color-error);
  --gcp-rose-pale: var(--gcp-color-error-surface);
  --gcp-shadow: var(--gcp-shadow-card);
  grid-template-columns: 15.75rem minmax(0, 1fr);
  color: var(--gcp-text);
}

.dark .gcp-v8-shell {
  --gcp-paper: #101820;
  --gcp-paper-bright: #17232f;
  --gcp-charcoal: #07111b;
  --gcp-charcoal-2: #0d1b28;
  --gcp-ink: #f2f4f4;
  --gcp-text: #f2f4f4;
  --gcp-ink-soft: #b4c0c8;
  --gcp-gold: #e0b35f;
  --gcp-gold-deep: #edc778;
  --gcp-gold-pale: #493b24;
  --gcp-mist: #253340;
  --gcp-line: #364451;
}

.gcp-v8-sidebar {
  background: #07121d;
  box-shadow: 0 0 34px rgba(4, 15, 25, 0.16);
}

.gcp-v8-sidebar::before {
  top: auto;
  right: -7rem;
  bottom: 0;
  left: -4rem;
  width: auto;
  height: 29rem;
  border: 0;
  border-radius: 0;
  background: url('/img/knowledge-hubs/hero-fairy-wolf-narrow-valley.png') 70% center / cover no-repeat;
  opacity: 0.15;
}

.gcp-v8-sidebar::after {
  right: -4rem;
  bottom: 12rem;
  left: auto;
  width: 9rem;
  height: 9rem;
  border-color: rgba(212, 163, 63, 0.3);
}

.gcp-v8-brand { padding-bottom: 1.5rem; border-bottom-color: rgba(255, 255, 255, 0.12); }
.gcp-v8-brand__mark { width: 3.15rem; height: 3.15rem; border-color: #f2f0e9; background: #f2f0e9; }
.gcp-v8-brand__mark img { object-position: 84% 50%; }
.gcp-v8-brand strong { font-size: 1.45rem; }
.gcp-v8-brand small { color: var(--gcp-gold); }
.gcp-v8-nav-group { margin-top: 1.35rem; }
.gcp-v8-nav-group > a { min-height: 2.6rem; font-size: 0.82rem; }
.gcp-v8-nav-group > a.is-active {
  color: #0b1b29;
  background: #d4a33f;
}

.gcp-v8-private-note { border-color: rgba(212, 163, 63, 0.52); background: rgba(7, 18, 29, 0.88); }
.gcp-v15-private-owner {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.gcp-v15-private-owner b { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--gcp-gold); border-radius: 50%; font-size: 0.7rem; }
.gcp-v15-private-owner em { color: #f3f2ee; font-size: 0.68rem; font-style: normal; line-height: 1.25; }
.gcp-v15-private-owner em small { margin: 0.14rem 0 0; color: #8ec3a5; font-size: 0.58rem; }

.gcp-v8-surface { background: var(--gcp-paper); }
.gcp-v8-topbar { min-height: 5.25rem; padding-inline: 2.5rem; }
.gcp-v15-global-find {
  justify-self: center;
  width: min(100%, 31rem);
  min-height: 2.65rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 0.9rem;
  border: 1px solid var(--gcp-line);
  border-radius: 999px;
  color: var(--gcp-ink-soft);
  background: var(--gcp-paper-bright);
  font-size: 0.74rem;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(11, 31, 50, 0.04);
}
.gcp-v15-global-find svg { width: 1rem; height: 1rem; color: var(--gcp-ink); }
.gcp-v15-top-action,
.gcp-v8-account > button,
.gcp-v8-theme-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: var(--gcp-ink); background: transparent; }
.gcp-v15-top-action:hover,
.gcp-v8-account > button:hover,
.gcp-v8-theme-toggle:hover { background: var(--gcp-mist); }
.gcp-v15-top-action svg { width: 1.05rem; height: 1.05rem; }

.gcp-v8-overview-page { min-height: 100%; background: var(--gcp-paper); }
.dark .gcp-v8-overview-page { background: linear-gradient(180deg, #121c25 0%, #101820 100%); }
.gcp-v8-main { width: min(100% - 3.5rem, 92rem); padding-top: 1.2rem; }

.gcp-v15-access-row {
  display: grid;
  grid-template-columns: auto minmax(13rem, 1fr) auto auto auto;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.gcp-v15-access-row > span,
.gcp-v15-access-row > a {
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--gcp-line);
  border-radius: 999px;
  color: var(--gcp-ink);
  background: color-mix(in srgb, var(--gcp-paper-bright) 93%, transparent);
  font-size: 0.65rem;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
}
.gcp-v15-access-row > a:nth-child(2) { justify-self: stretch; }
.gcp-v15-access-row svg { width: 0.92rem; height: 0.92rem; color: var(--gcp-gold-deep); }

.gcp-v15-hero {
  position: relative;
  min-height: 31rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0 0 1.65rem 1.65rem;
  background: var(--gcp-paper-bright);
  box-shadow: var(--gcp-shadow);
}
.gcp-v15-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.gcp-v15-hero__copy {
  position: relative;
  z-index: 1;
  width: 59%;
  min-height: 31rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem 2.4rem;
  background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, color-mix(in srgb, var(--gcp-paper-bright) 98%, transparent) 54%, color-mix(in srgb, var(--gcp-paper-bright) 72%, transparent) 78%, transparent 100%);
}
.gcp-v15-hero h1 { max-width: 36rem; margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(3rem, 5vw, 5.25rem); font-weight: 560; line-height: 0.93; letter-spacing: -0.052em; }
.gcp-v15-hero__copy > p:not(.gcp-v8-eyebrow) { max-width: 31rem; margin: 1.25rem 0 0; color: var(--gcp-ink-soft); font-size: 0.92rem; line-height: 1.55; }
.gcp-v15-hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(40rem, 112%); margin-top: 2.25rem; }
.gcp-v15-hero__facts > span { min-width: 0; padding: 0 1rem; border-left: 1px solid color-mix(in srgb, var(--gcp-ink) 17%, transparent); }
.gcp-v15-hero__facts > span:first-child { padding-left: 0; border-left: 0; }
.gcp-v15-hero__facts small { display: block; min-height: 1.8rem; color: #21405e; font-size: 0.58rem; font-weight: 850; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; }
.dark .gcp-v15-hero__facts small { color: var(--gcp-gold); }
.gcp-v15-hero__facts strong { display: inline-block; margin-top: 0.3rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 2.25rem; font-weight: 560; line-height: 1; }
.gcp-v15-hero__facts em { margin-left: 0.25rem; color: var(--gcp-ink-soft); font-size: 0.58rem; font-style: normal; }

.gcp-v8-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 0.85rem; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 1rem; background: var(--gcp-paper-bright); box-shadow: 0 13px 36px rgba(11, 31, 50, 0.07); }
.gcp-v8-metric { min-height: 8.9rem; padding: 1.05rem 1.1rem; border: 0; border-left: 1px solid var(--gcp-line); border-radius: 0; color: var(--gcp-ink); text-decoration: none; }
.gcp-v8-metric:first-child { border-left: 0; }
.gcp-v8-metric::after { display: none; }
.gcp-v8-metric > div { justify-content: flex-start; gap: 0.45rem; color: var(--gcp-ink); font-size: 0.63rem; }
.gcp-v8-metric > div svg { order: -1; color: #163f67; }
.dark .gcp-v8-metric > div svg { color: var(--gcp-gold); }
.gcp-v8-metric > strong { margin-top: 0.7rem; font-size: 1.65rem; }
.gcp-v8-metric > small { min-height: 1.8rem; font-size: 0.62rem; }
.gcp-v8-metric > em { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.55rem; color: #123a63; font-size: 0.6rem; font-style: normal; font-weight: 820; }
.dark .gcp-v8-metric > em { color: var(--gcp-gold); }
.gcp-v8-metric > em svg { width: 0.7rem; height: 0.7rem; }

.gcp-v15-calendar { margin-top: 0.85rem; overflow: hidden; }
.gcp-v15-week-range { color: var(--gcp-ink); font-size: 0.68rem; font-weight: 800; }
.gcp-v15-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--gcp-line); }
.gcp-v15-week-strip time { position: relative; display: grid; justify-items: center; gap: 0.15rem; padding: 0.75rem 0.25rem; color: var(--gcp-ink-soft); }
.gcp-v15-week-strip time + time { border-left: 1px solid color-mix(in srgb, var(--gcp-line) 65%, transparent); }
.gcp-v15-week-strip small { font-size: 0.58rem; font-weight: 820; text-transform: uppercase; }
.gcp-v15-week-strip strong { font-family: "Fraunces Variable", Georgia, serif; font-size: 1rem; }
.gcp-v15-week-strip .is-today { color: var(--gcp-ink); background: linear-gradient(180deg, var(--gcp-gold-pale), transparent); }
.gcp-v15-week-strip .is-today::after { position: absolute; bottom: 0.3rem; width: 0.26rem; height: 0.26rem; border-radius: 50%; background: var(--gcp-gold); content: ""; }
.gcp-v15-calendar-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.8fr); }
.gcp-v15-calendar-body > div { min-width: 0; padding: 1rem 1.2rem; }
.gcp-v15-calendar-body > aside { padding: 1rem 1.2rem; border-left: 1px solid var(--gcp-line); }
.gcp-v15-calendar-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.4rem; }
.gcp-v15-calendar-label strong { font-family: "Fraunces Variable", Georgia, serif; font-size: 0.98rem; }
.gcp-v15-calendar-label small { color: var(--gcp-ink-soft); font-size: 0.6rem; }
.gcp-v15-calendar .gcp-v8-agenda { padding: 0; }
.gcp-v15-calendar-body > aside > a { display: grid; gap: 0.2rem; padding: 0.72rem 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); text-decoration: none; }
.gcp-v15-calendar-body > aside > a > span { justify-self: start; padding: 0.18rem 0.38rem; border: 1px solid var(--gcp-gold); border-radius: 999px; color: var(--gcp-gold-deep); font-size: 0.5rem; font-weight: 850; text-transform: uppercase; }
.gcp-v15-calendar-body > aside > a.is-critical > span { color: var(--gcp-rose); border-color: var(--gcp-rose); }
.gcp-v15-calendar-body > aside > a > strong { font-size: 0.7rem; line-height: 1.3; }
.gcp-v15-calendar-body > aside > a > small { color: var(--gcp-ink-soft); font-size: 0.61rem; line-height: 1.35; }

.gcp-v8-section { margin-top: 1.25rem; }
.gcp-v8-section__head { margin-bottom: 0.65rem; }
.gcp-v8-section__head h2,
.gcp-v8-hub-overview__head h2 { color: var(--gcp-ink); font-size: 1.42rem; }
.gcp-v8-client-card { min-height: 9.2rem; padding: 0.95rem; border-radius: 0.8rem; box-shadow: 0 7px 21px rgba(11, 31, 50, 0.035); }
.gcp-v8-client-card__top > img { width: 2.15rem; height: 2.15rem; }

.gcp-v15-attention-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.gcp-v15-attention-grid > article { min-height: 14rem; display: flex; flex-direction: column; padding: 0.9rem; border: 1px solid var(--gcp-gold); border-radius: 0.72rem; background: var(--gcp-paper-bright); }
.gcp-v15-attention-grid > article.is-critical { border-color: #df8c86; }
.gcp-v15-attention-grid > article > span { align-self: flex-start; padding: 0.18rem 0.4rem; border: 1px solid currentColor; border-radius: 999px; color: var(--gcp-gold-deep); font-size: 0.52rem; font-weight: 850; }
.gcp-v15-attention-grid > article.is-critical > span { color: var(--gcp-rose); }
.gcp-v15-attention-grid > article > strong { margin-top: 0.55rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 0.88rem; line-height: 1.15; }
.gcp-v15-attention-grid > article > small { margin-top: 0.28rem; color: var(--gcp-ink-soft); font-size: 0.58rem; }
.gcp-v15-attention-grid > article > p { margin: 0.55rem 0; color: var(--gcp-ink-soft); font-size: 0.63rem; line-height: 1.4; }
.gcp-v15-attention-grid > article > a { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; margin-top: auto; padding: 0.35rem 0.55rem; border: 1px solid #244767; border-radius: 999px; color: #143b60; font-size: 0.58rem; font-weight: 850; text-decoration: none; }
.dark .gcp-v15-attention-grid > article > a { color: var(--gcp-gold); border-color: var(--gcp-gold); }
.gcp-v15-attention-grid > article > a svg { width: 0.68rem; height: 0.68rem; }
.gcp-v15-attention-grid > article > em { margin-top: 0.35rem; color: var(--gcp-ink-soft); font-size: 0.52rem; font-style: normal; }
.gcp-v15-all-clear { grid-column: 1 / -1; display: grid; justify-items: center; padding: 2rem; border: 1px solid var(--gcp-line); border-radius: 0.85rem; background: var(--gcp-paper-bright); text-align: center; }
.gcp-v15-all-clear svg { color: var(--gcp-green); }
.gcp-v15-all-clear p { margin: 0.35rem 0 0; color: var(--gcp-ink-soft); font-size: 0.7rem; }

.gcp-v8-hub-overview { margin-top: 1.25rem; border-radius: 0; box-shadow: none; }
.gcp-v8-hub-overview__head { padding: 0.85rem 0.75rem 0.55rem; }
.gcp-v8-hub-grid { padding: 0.7rem 0.15rem 0.15rem; }
.gcp-v8-hub-card { border-radius: 0.72rem; }
.gcp-v8-hub-card__art { height: 11rem; }
.gcp-v8-hub-card__body { padding: 0.85rem; }
.gcp-v8-hub-card__body > small { min-height: 2.1rem; }
.gcp-v8-hub-open { font-size: 0.59rem !important; }

.gcp-v15-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.85rem; }
.gcp-v15-quick-card { min-height: 12.1rem; display: flex; flex-direction: column; padding: 0.95rem; border: 1px solid var(--gcp-line); border-radius: 0.72rem; color: var(--gcp-ink); background: var(--gcp-paper-bright); text-decoration: none; }
.gcp-v15-quick-card > span { display: grid; place-items: center; align-self: flex-start; width: 2rem; height: 2rem; border-radius: 0.55rem; color: #153f65; background: #edf3f7; }
.dark .gcp-v15-quick-card > span { color: var(--gcp-gold); background: var(--gcp-mist); }
.gcp-v15-quick-card > span svg { width: 1rem; height: 1rem; }
.gcp-v15-quick-card > strong { margin-top: 0.55rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 0.92rem; }
.gcp-v15-quick-card > p { margin: 0.25rem 0 0; color: var(--gcp-ink-soft); font-size: 0.62rem; line-height: 1.35; }
.gcp-v15-quick-card > small { margin-top: 0.7rem; color: var(--gcp-ink-soft); font-size: 0.57rem; line-height: 1.4; }
.gcp-v15-quick-card > b { display: flex; align-items: center; gap: 0.3rem; margin-top: auto; padding-top: 0.65rem; color: #102a45; font-size: 0.58rem; }
.dark .gcp-v15-quick-card > b { color: var(--gcp-gold); }
.gcp-v15-quick-card > b svg { width: 0.68rem; height: 0.68rem; }
.gcp-v15-private-footer { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin-top: 0.85rem; border-style: solid; background: var(--gcp-paper-bright); }
.gcp-v15-private-footer > a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--gcp-ink); font-size: 0.62rem; font-weight: 800; white-space: nowrap; }
.gcp-v15-private-footer > a svg { width: 0.72rem; height: 0.72rem; }

@media (max-width: 1180px) {
  .gcp-v8-shell { grid-template-columns: 14rem minmax(0, 1fr); }
  .gcp-v8-sidebar { padding-inline: 0.95rem; }
  .gcp-v8-private-note { right: 0.95rem; left: 0.95rem; }
  .gcp-v8-main { width: min(100% - 2.6rem, 91rem); }
  .gcp-v8-topbar { padding-inline: 1.5rem; }
  .gcp-v8-hero, .gcp-v8-hubs-hero { grid-template-columns: 0.95fr 1.05fr; }
  .gcp-v8-overview-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.68fr); }
  .gcp-v15-access-row { grid-template-columns: repeat(3, auto); justify-content: start; }
  .gcp-v15-access-row > a:nth-child(2) { grid-column: 2 / -1; grid-row: 1; }
  .gcp-v8-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v8-metric:nth-child(4) { border-left: 0; border-top: 1px solid var(--gcp-line); }
  .gcp-v8-metric:nth-child(5) { border-top: 1px solid var(--gcp-line); }
  .gcp-v15-attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v15-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .gcp-v8-shell { display: block; }
  .gcp-v8-sidebar { display: none; }
  .gcp-v8-topbar { min-height: 4.25rem; padding-inline: 1rem; }
  .gcp-v8-context small, .gcp-v8-owner small { display: none; }
  .gcp-v8-topbar .performance-ink-header__clients { display: none; }
  .gcp-v8-mobile-rail { position: sticky; top: 4.25rem; z-index: 35; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.65rem 1rem; border-bottom: 1px solid var(--gcp-line); background: var(--gcp-paper-bright); scrollbar-width: none; }
  .gcp-v8-mobile-rail::-webkit-scrollbar { display: none; }
  .gcp-v8-mobile-rail > a { flex: 0 0 auto; min-height: 2.4rem; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-ink-soft); background: var(--gcp-paper-bright); font-size: 0.72rem; font-weight: 750; }
  .gcp-v8-mobile-rail > a svg { width: 0.95rem; height: 0.95rem; }
  .gcp-v8-mobile-rail > a.is-active { color: white; border-color: var(--gcp-charcoal); background: var(--gcp-charcoal); }
  .gcp-v8-page-frame > .goh-sidenav:not(:empty) { top: 7.3rem; }
  .gcp-v8-main { width: calc(100% - 1.75rem); padding: 1.35rem 0 5rem; }
  .gcp-v8-title-row { align-items: start; }
  .gcp-v8-read-state { display: none; }
  .gcp-v8-hero, .gcp-v8-hubs-hero { display: flex; flex-direction: column; }
  .gcp-v8-hero__art { order: -1; min-height: 16rem; }
  .gcp-v8-hero__art img, .gcp-v8-hubs-hero > img { height: 16rem; min-height: 16rem; object-position: 64% 52%; }
  .gcp-v8-hubs-hero > img { order: -1; }
  .gcp-v8-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v8-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-focus-panel { order: -1; }
  .gcp-v8-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v8-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v8-workflow-banner { grid-template-columns: auto minmax(0, 1fr); }
  .gcp-v8-workflow-state { grid-column: 1 / -1; justify-items: start; padding-left: 4rem; }
  .gcp-v14-attention-layout { grid-template-columns: minmax(0, 1fr); }
  .gcp-v15-global-find { width: min(100%, 20rem); }
  .gcp-v15-access-row { display: flex; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
  .gcp-v15-access-row::-webkit-scrollbar { display: none; }
  .gcp-v15-access-row > span, .gcp-v15-access-row > a { flex: 0 0 auto; }
  .gcp-v15-hero, .gcp-v15-hero__copy { min-height: 28rem; }
  .gcp-v15-hero__copy { width: 72%; }
  .gcp-v15-calendar-body { grid-template-columns: minmax(0, 1fr); }
  .gcp-v15-calendar-body > aside { border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v15-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .gcp-v8-topbar { gap: 0.5rem; }
  .gcp-v8-account { gap: 0.3rem; }
  .gcp-v8-owner { margin-left: 0; padding-left: 0.45rem; }
  .gcp-v8-title-row h1 { font-size: 2.75rem; }
  .gcp-v8-hero, .gcp-v8-hubs-hero { border-radius: 1.35rem; }
  .gcp-v8-hero__copy, .gcp-v8-hubs-hero > div { padding: 1.55rem 1.35rem; }
  .gcp-v8-hero h2, .gcp-v8-hubs-hero h2 { font-size: 2rem; }
  .gcp-v8-button.is-secondary { display: none; }
  .gcp-v14-attention-link { display: inline-flex; }
  .gcp-v8-metrics { gap: 0.5rem; }
  .gcp-v8-metric { min-height: 6.7rem; padding: 0.85rem; }
  .gcp-v8-metric > strong { font-size: 1.7rem; }
  .gcp-v8-agenda { padding-inline: 0.9rem; }
  .gcp-v8-agenda article { grid-template-columns: 3.2rem 0.25rem minmax(0, 1fr); gap: 0.55rem; }
  .gcp-v8-agenda article > span { display: none; }
  .gcp-v8-section__head > a { display: none; }
  .gcp-v8-clients { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-hub-overview__head { align-items: start; }
  .gcp-v8-hub-overview__head > span strong { font-size: 1.35rem; }
  .gcp-v8-hub-grid { padding-inline: 0.9rem; }
  .gcp-v8-hub-card__art { height: 6.5rem; }
  .gcp-v8-hub-grid.is-chooser .gcp-v8-hub-card__art { height: 7.25rem; }
  .gcp-v8-workflow-list { grid-template-columns: minmax(0, 1fr); padding-inline: 0.9rem; }
  .gcp-v8-workflow-list article:nth-child(2) { border-top: 1px solid var(--gcp-line); }
  .gcp-v8-workflow-banner { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-workflow-banner > span { display: none; }
  .gcp-v8-workflow-state { grid-column: auto; padding-left: 0; }
  .gcp-v8-search-panel { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-result-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-focus-list > article { grid-template-columns: 2rem minmax(0, 1fr); }
  .gcp-v8-focus-list > article > a { grid-column: 1 / -1; width: 100%; }
  .gcp-v14-attention-hero { display: grid; gap: 1rem; padding: 1.35rem; }
  .gcp-v14-attention-hero > span { justify-self: start; }
  .gcp-v14-attention-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .gcp-v14-attention-card dd { text-align: left; }
  .gcp-v14-queue article { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; }
  .gcp-v14-queue article > span { width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; }
  .gcp-v14-queue article > a { grid-column: 1 / -1; justify-content: center; width: 100%; }
  .gcp-v8-context { min-width: 4.5rem; }
  .gcp-v15-global-find { width: 2.5rem; min-height: 2.5rem; padding: 0; justify-content: center; }
  .gcp-v15-global-find > span { display: none; }
  .gcp-v15-top-action:nth-child(2), .gcp-v8-theme-toggle { display: none; }
  .gcp-v8-owner i { width: 1.9rem; height: 1.9rem; }
  .gcp-v8-account > button { display: none; }
  .gcp-v15-hero, .gcp-v15-hero__copy { min-height: 31rem; }
  .gcp-v15-hero__copy { width: 100%; padding: 2rem 1.2rem 1.5rem; justify-content: flex-end; background: linear-gradient(90deg, color-mix(in srgb, var(--gcp-paper-bright) 98%, transparent), color-mix(in srgb, var(--gcp-paper-bright) 75%, transparent)); }
  .gcp-v15-hero > img { object-position: 63% center; opacity: 0.52; }
  .gcp-v15-hero h1 { font-size: 2.9rem; }
  .gcp-v15-hero__copy > p:not(.gcp-v8-eyebrow) { font-size: 0.78rem; }
  .gcp-v15-hero__facts { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 0; margin-top: 1.4rem; }
  .gcp-v15-hero__facts > span:nth-child(3) { padding-left: 0; border-left: 0; }
  .gcp-v15-hero__facts small { min-height: auto; }
  .gcp-v8-metrics { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-metric, .gcp-v8-metric:nth-child(4) { min-height: 7.5rem; border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v8-metric:first-child { border-top: 0; }
  .gcp-v15-week-range { display: none; }
  .gcp-v15-week-strip time { padding-inline: 0.1rem; }
  .gcp-v15-calendar-body > div, .gcp-v15-calendar-body > aside { padding-inline: 0.85rem; }
  .gcp-v15-attention-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v8-hub-card__art { height: 10rem; }
  .gcp-v15-quick-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v15-quick-card { min-height: 9.5rem; }
  .gcp-v15-private-footer { grid-template-columns: auto minmax(0, 1fr); }
  .gcp-v15-private-footer > a { grid-column: 1 / -1; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gcp-v8-shell *, .gcp-v8-shell *::before, .gcp-v8-shell *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Genie private control panel — Clients and Tasks & reviews */
.gcp-v16-page { width: 100%; min-width: 0; color: var(--gcp-ink); }
.gcp-v16-canvas { width: min(100% - 2rem, 96rem); min-width: 0; margin: 0 auto; padding: 1.05rem 0 4.5rem; }
.gcp-v16-tabs { display: flex; align-items: center; gap: 0.35rem; overflow-x: auto; margin-bottom: 0.8rem; padding: 0.1rem 0 0.35rem; scrollbar-width: none; }
.gcp-v16-tabs::-webkit-scrollbar { display: none; }
.gcp-v16-tabs button { flex: 0 0 auto; min-height: 2.45rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.78rem; border: 1px solid transparent; border-radius: 999px; color: var(--gcp-ink-soft); background: transparent; font-size: 0.68rem; font-weight: 760; }
.gcp-v16-tabs button span { min-width: 1.25rem; padding: 0.12rem 0.35rem; border-radius: 999px; color: var(--gcp-ink-soft); background: var(--gcp-mist); font-size: 0.55rem; text-align: center; }
.gcp-v16-tabs button.is-active { color: var(--gcp-ink); border-color: var(--gcp-line); background: var(--gcp-paper-bright); box-shadow: 0 5px 18px rgba(11, 31, 50, 0.05); }

.gcp-v16-jobs-hero,
.gcp-v16-client-hero { position: relative; min-height: 19.5rem; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 1rem; background: var(--gcp-paper-bright); box-shadow: 0 12px 34px rgba(11, 31, 50, 0.055); }
.gcp-v16-jobs-hero > img,
.gcp-v16-client-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 52%; }
.gcp-v16-jobs-hero > div,
.gcp-v16-client-hero > div { position: relative; z-index: 1; width: 53%; min-height: 19.5rem; display: flex; flex-direction: column; justify-content: center; padding: 2.3rem 2rem; background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, color-mix(in srgb, var(--gcp-paper-bright) 96%, transparent) 62%, transparent 100%); }
.gcp-v16-jobs-hero p,
.gcp-v16-client-hero p { margin: 0 0 0.7rem; color: var(--gcp-gold-deep); font-size: 0.62rem; font-weight: 880; letter-spacing: 0.15em; text-transform: uppercase; }
.gcp-v16-jobs-hero h1,
.gcp-v16-client-hero h1 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(2.5rem, 4.4vw, 4.45rem); font-weight: 560; letter-spacing: -0.05em; line-height: 0.96; }
.gcp-v16-jobs-hero > div > span,
.gcp-v16-client-hero > div > span { max-width: 31rem; margin-top: 0.85rem; color: var(--gcp-ink-soft); font-size: 0.76rem; line-height: 1.5; }
.gcp-v16-jobs-hero > div > a,
.gcp-v16-client-hero nav a { display: inline-flex; align-items: center; gap: 0.35rem; color: #102a45; font-size: 0.64rem; font-weight: 850; text-decoration: none; }
.dark .gcp-v16-jobs-hero > div > a,
.dark .gcp-v16-client-hero nav a { color: var(--gcp-gold); }
.gcp-v16-jobs-hero > div > a { align-self: flex-start; margin-top: 1rem; }
.gcp-v16-jobs-hero a svg,
.gcp-v16-client-hero a svg { width: 0.78rem; height: 0.78rem; }
.gcp-v16-client-hero { min-height: 17.5rem; }
.gcp-v16-client-hero > div { min-height: 17.5rem; }
.gcp-v16-client-hero nav { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: flex; gap: 0.45rem; }
.gcp-v16-client-hero nav a { min-height: 2.45rem; padding: 0.55rem 0.8rem; border: 1px solid var(--gcp-line); border-radius: 999px; background: color-mix(in srgb, var(--gcp-paper-bright) 94%, transparent); }

.gcp-v16-stat-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; margin-top: 0.75rem; border: 1px solid var(--gcp-line); border-radius: 0.85rem; background: var(--gcp-paper-bright); box-shadow: 0 10px 30px rgba(11, 31, 50, 0.045); }
.gcp-v16-stat-strip > button { position: relative; min-width: 0; min-height: 7.45rem; display: flex; flex-direction: column; align-items: stretch; padding: 0.85rem 1rem; border: 0; border-left: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v16-stat-strip > button:first-child { border-left: 0; }
.gcp-v16-stat-strip > button.is-active { background: linear-gradient(180deg, var(--gcp-gold-pale), color-mix(in srgb, var(--gcp-gold-pale) 12%, transparent)); }
.gcp-v16-stat-strip > button > span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gcp-v16-stat-strip small { font-size: 0.58rem; font-weight: 790; letter-spacing: 0.04em; }
.gcp-v16-stat-strip svg { width: 0.95rem; height: 0.95rem; color: #16436c; }
.dark .gcp-v16-stat-strip svg { color: var(--gcp-gold); }
.gcp-v16-stat-strip strong { margin-top: 0.55rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.9rem; font-weight: 560; line-height: 1; }
.gcp-v16-stat-strip em { margin-top: auto; padding-top: 0.45rem; color: var(--gcp-ink-soft); font-size: 0.56rem; font-style: normal; }
.gcp-v16-client-stats button i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--gcp-ink-soft); }
.gcp-v16-client-stats button.is-healthy i { background: var(--gcp-green); }
.gcp-v16-client-stats button.is-warning i { background: var(--gcp-gold-deep); }
.gcp-v16-client-stats button.is-critical i { background: var(--gcp-rose); }
.gcp-v16-client-stats button.is-healthy strong { color: var(--gcp-green); }
.gcp-v16-client-stats button.is-warning strong { color: var(--gcp-gold-deep); }
.gcp-v16-client-stats button.is-critical strong { color: var(--gcp-rose); }

.gcp-v16-error { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; margin-top: 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid var(--gcp-rose); border-radius: 0.75rem; color: var(--gcp-rose); background: var(--gcp-rose-pale); }
.gcp-v16-error svg { width: 1.05rem; height: 1.05rem; }
.gcp-v16-error span { display: grid; gap: 0.12rem; }
.gcp-v16-error strong { font-size: 0.7rem; }
.gcp-v16-error small { font-size: 0.62rem; }
.gcp-v16-table-card,
.gcp-v16-client-directory { min-width: 0; margin-top: 0.75rem; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 0.85rem; background: var(--gcp-paper-bright); box-shadow: 0 10px 30px rgba(11, 31, 50, 0.035); }
.gcp-v16-filter-row { min-width: 0; display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 0.46fr) minmax(12rem, 0.5fr) auto; align-items: center; gap: 0.55rem; padding: 0.72rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v16-client-directory .gcp-v16-filter-row { grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 0.42fr) auto; }
.gcp-v16-filter-row label { position: relative; min-width: 0; }
.gcp-v16-filter-row label > svg { position: absolute; z-index: 1; top: 50%; left: 0.72rem; width: 0.9rem; height: 0.9rem; color: var(--gcp-ink-soft); transform: translateY(-50%); }
.gcp-v16-filter-row label input { width: 100%; padding-left: 2.1rem; border-color: var(--gcp-line); background: var(--gcp-paper-bright); }
.gcp-v16-filter-row > button { width: 100%; border-color: var(--gcp-line); background: var(--gcp-paper-bright); }
.gcp-v16-filter-row > span { color: var(--gcp-ink-soft); font-size: 0.58rem; font-weight: 720; white-space: nowrap; }
.gcp-v16-data-table { min-width: 0; padding: 0 0.75rem 0.75rem; }
.gcp-v16-data-table .data-table > div:first-child { border-color: var(--gcp-line); background: transparent; }
.gcp-v16-data-table table { color: var(--gcp-ink); }
.gcp-v16-data-table thead { background: color-mix(in srgb, var(--gcp-mist) 58%, transparent); }
.gcp-v16-data-table th { color: var(--gcp-ink-soft); font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gcp-v16-data-table td { border-color: var(--gcp-line); font-size: 0.62rem; }
.gcp-v16-data-table .data-table-mobile-card { border-color: var(--gcp-line); color: var(--gcp-ink); background: var(--gcp-paper-bright); box-shadow: none; }
.gcp-v16-job-name { display: grid; gap: 0.1rem; min-width: 8rem; }
.gcp-v16-job-name strong { color: var(--gcp-ink); font-size: 0.67rem; line-height: 1.3; }
.gcp-v16-job-name small { color: var(--gcp-ink-soft); font-size: 0.53rem; }
.gcp-v16-table-link,
.gcp-v16-row-action { color: #102a45; font-weight: 780; text-decoration: none; }
.dark .gcp-v16-table-link,
.dark .gcp-v16-row-action { color: var(--gcp-gold); }
.gcp-v16-row-action { display: inline-flex; align-items: center; gap: 0.28rem; white-space: nowrap; }
.gcp-v16-row-action svg { width: 0.66rem; height: 0.66rem; }
.gcp-v16-status { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.22rem 0.42rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-ink-soft); background: var(--gcp-mist); font-size: 0.53rem; font-weight: 780; white-space: nowrap; }
.gcp-v16-status i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: currentColor; }
.gcp-v16-status.is-healthy { color: var(--gcp-green); border-color: color-mix(in srgb, var(--gcp-green) 38%, var(--gcp-line)); background: var(--gcp-green-pale); }
.gcp-v16-status.is-warning { color: var(--gcp-gold-deep); border-color: color-mix(in srgb, var(--gcp-gold) 55%, var(--gcp-line)); background: var(--gcp-gold-pale); }
.gcp-v16-status.is-critical { color: var(--gcp-rose); border-color: color-mix(in srgb, var(--gcp-rose) 45%, var(--gcp-line)); background: var(--gcp-rose-pale); }

.gcp-v16-summary-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(15rem, 0.75fr)); gap: 0.75rem; margin-top: 0.75rem; }
.gcp-v16-summary-card { min-width: 0; min-height: 13rem; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 0.85rem; background: var(--gcp-paper-bright); box-shadow: 0 9px 27px rgba(11, 31, 50, 0.03); }
.gcp-v16-summary-card > header { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v16-summary-card > header > span { display: flex; align-items: center; gap: 0.45rem; }
.gcp-v16-summary-card > header svg { width: 0.9rem; height: 0.9rem; color: var(--gcp-gold-deep); }
.gcp-v16-summary-card > header strong { font-family: "Fraunces Variable", Georgia, serif; font-size: 0.78rem; }
.gcp-v16-summary-card > header > a { display: inline-flex; align-items: center; gap: 0.25rem; color: #102a45; font-size: 0.56rem; font-weight: 820; text-decoration: none; }
.dark .gcp-v16-summary-card > header > a { color: var(--gcp-gold); }
.gcp-v16-workspace-list,
.gcp-v16-attention-list,
.gcp-v16-coverage-list,
.gcp-v16-health-bars,
.gcp-v16-meaning-list { padding: 0.35rem 0.85rem 0.65rem; }
.gcp-v16-workspace-list > a,
.gcp-v16-attention-list > a { min-height: 2.55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.5rem 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); text-decoration: none; }
.gcp-v16-workspace-list > a:first-child,
.gcp-v16-attention-list > a:first-child { border-top: 0; }
.gcp-v16-workspace-list > a > span,
.gcp-v16-attention-list > a > span { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v16-workspace-list strong,
.gcp-v16-attention-list strong { overflow: hidden; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v16-workspace-list small,
.gcp-v16-attention-list small { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v16-workspace-list b { display: grid; place-items: center; min-width: 1.65rem; height: 1.65rem; border-radius: 50%; color: white; background: #102a45; font-size: 0.56rem; }
.dark .gcp-v16-workspace-list b { color: var(--gcp-charcoal); background: var(--gcp-gold); }
.gcp-v16-attention-list > a { grid-template-columns: auto minmax(0, 1fr) auto; }
.gcp-v16-attention-list > a > i,
.gcp-v16-meaning-list > p > i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--gcp-ink-soft); }
.gcp-v16-attention-list > a > i.is-critical,
.gcp-v16-meaning-list > p > i.is-critical { background: var(--gcp-rose); }
.gcp-v16-attention-list > a > i.is-warning,
.gcp-v16-meaning-list > p > i.is-warning { background: var(--gcp-gold-deep); }
.gcp-v16-attention-list > a > i.is-healthy,
.gcp-v16-meaning-list > p > i.is-healthy { background: var(--gcp-green); }
.gcp-v16-attention-list > a > svg { width: 0.7rem; height: 0.7rem; color: var(--gcp-ink-soft); }
.gcp-v16-attention-list > p,
.gcp-v16-workspace-list > p { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 7rem; margin: 0; color: var(--gcp-ink-soft); font-size: 0.62rem; }
.gcp-v16-attention-list > p svg { width: 0.9rem; height: 0.9rem; color: var(--gcp-green); }
.gcp-v16-health-bars > div { display: grid; gap: 0.26rem; padding: 0.45rem 0; }
.gcp-v16-health-bars > div > span { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.gcp-v16-health-bars small { color: var(--gcp-ink-soft); font-size: 0.54rem; }
.gcp-v16-health-bars b { font-size: 0.56rem; }
.gcp-v16-health-bars progress { width: 100%; height: 0.3rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--gcp-mist); accent-color: #102a45; }
.gcp-v16-health-bars progress::-webkit-progress-bar { border-radius: 999px; background: var(--gcp-mist); }
.gcp-v16-health-bars progress::-webkit-progress-value { border-radius: 999px; background: #102a45; }
.dark .gcp-v16-health-bars progress { accent-color: var(--gcp-gold); }
.dark .gcp-v16-health-bars progress::-webkit-progress-value { background: var(--gcp-gold); }
.gcp-v16-meaning-list > p,
.gcp-v16-coverage-list > p { min-height: 2.55rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; margin: 0; padding: 0.42rem 0; border-top: 1px solid var(--gcp-line); }
.gcp-v16-meaning-list > p:first-child,
.gcp-v16-coverage-list > p:first-child { border-top: 0; }
.gcp-v16-meaning-list > p > span,
.gcp-v16-coverage-list > p > span { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v16-meaning-list > .gcp-v16-truth-note { grid-template-columns: auto minmax(0, 1fr); color: var(--gcp-gold-deep); }
.gcp-v16-meaning-list > .gcp-v16-truth-note > svg { width: 0.86rem; height: 0.86rem; }
.gcp-v16-meaning-list > .gcp-v16-truth-note strong { color: var(--gcp-ink); }
.gcp-v16-meaning-list strong,
.gcp-v16-coverage-list strong { font-size: 0.59rem; }
.gcp-v16-meaning-list small,
.gcp-v16-coverage-list small { color: var(--gcp-ink-soft); font-size: 0.5rem; line-height: 1.25; }
.gcp-v16-coverage-list svg { width: 0.86rem; height: 0.86rem; color: var(--gcp-gold-deep); }
.gcp-v16-coverage-list b { font-size: 0.6rem; }

.gcp-v16-client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.62rem; padding: 0.72rem; }
.gcp-v16-client-card { min-width: 0; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 0.75rem; background: var(--gcp-paper-bright); }
.gcp-v16-client-card.is-healthy { border-top-color: var(--gcp-green); }
.gcp-v16-client-card.is-warning { border-top-color: var(--gcp-gold-deep); }
.gcp-v16-client-card.is-critical { border-top-color: var(--gcp-rose); }
.gcp-v16-client-card > header { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.75rem 0; color: var(--gcp-ink-soft); font-size: 0.65rem; letter-spacing: 0.09em; }
.gcp-v16-client-card__identity { min-width: 0; display: grid; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: 0.65rem; padding: 0.65rem 0.75rem; }
.gcp-v16-client-card__identity > img { width: 2.65rem; height: 2.65rem; object-fit: cover; border: 1px solid var(--gcp-line); border-radius: 0.65rem; background: var(--gcp-mist); }
.gcp-v16-client-card__identity > span { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v16-client-card__identity strong { overflow: hidden; font-family: "Fraunces Variable", Georgia, serif; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v16-client-card__identity small { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v16-client-card__identity em { margin-top: 0.2rem; color: var(--gcp-ink-soft); font-size: 0.5rem; font-style: normal; }
.gcp-v16-client-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 0.75rem 0.65rem; }
.gcp-v16-client-card dl > div { min-width: 0; padding: 0 0.42rem; border-left: 1px solid var(--gcp-line); }
.gcp-v16-client-card dl > div:first-child { padding-left: 0; border-left: 0; }
.gcp-v16-client-card dt { color: var(--gcp-ink-soft); font-size: 0.47rem; }
.gcp-v16-client-card dd { margin: 0.12rem 0 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 0.84rem; }
.gcp-v16-client-card > footer { min-height: 3.3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-top: 1px solid var(--gcp-line); }
.gcp-v16-client-card > footer > span { min-width: 0; display: grid; gap: 0.12rem; }
.gcp-v16-client-card > footer small { color: var(--gcp-ink-soft); font-size: 0.47rem; }
.gcp-v16-client-card > footer strong { overflow: hidden; font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v16-client-card > footer a { display: inline-flex; align-items: center; gap: 0.28rem; color: #102a45; font-size: 0.54rem; font-weight: 840; text-decoration: none; white-space: nowrap; }
.dark .gcp-v16-client-card > footer a { color: var(--gcp-gold); }
.gcp-v16-client-card > footer a svg { width: 0.64rem; height: 0.64rem; }
.gcp-v16-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.72rem 0.72rem; }
.gcp-v16-pagination-row > span { color: var(--gcp-ink-soft); font-size: 0.55rem; }
.gcp-v16-pagination-row .pagination button { width: 1.8rem; height: 1.8rem; color: var(--gcp-ink); border-color: var(--gcp-line); background: var(--gcp-paper-bright); font-size: 0.55rem; }
.gcp-v16-pagination-row .pagination button[data-state],
.gcp-v16-pagination-row .pagination button.bg-primary { color: white; background: #102a45; }
.gcp-v16-loading,
.gcp-v16-empty { min-height: 15rem; display: grid; place-content: center; justify-items: center; gap: 0.4rem; padding: 2rem; color: var(--gcp-ink-soft); font-size: 0.68rem; text-align: center; }
.gcp-v16-empty svg { width: 1.3rem; height: 1.3rem; color: var(--gcp-gold-deep); }
.gcp-v16-empty strong { color: var(--gcp-ink); }

@media (max-width: 1120px) {
  .gcp-v16-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v16-stat-strip > button:nth-child(4) { border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v16-stat-strip > button:nth-child(5) { border-top: 1px solid var(--gcp-line); }
  .gcp-v16-client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v16-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v16-summary-card.is-wide { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .gcp-v16-canvas { width: calc(100% - 1.25rem); padding-top: 0.75rem; }
  .gcp-v16-jobs-hero > div,
  .gcp-v16-client-hero > div { width: 69%; }
  .gcp-v16-filter-row,
  .gcp-v16-client-directory .gcp-v16-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v16-filter-row label { grid-column: 1 / -1; }
  .gcp-v16-filter-row > span { grid-column: 1 / -1; }
  .gcp-v16-client-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .gcp-v16-canvas { width: calc(100% - 1rem); padding-bottom: 3.5rem; }
  .gcp-v16-tabs { margin-right: -0.5rem; }
  .gcp-v16-jobs-hero,
  .gcp-v16-client-hero { min-height: 22rem; }
  .gcp-v16-jobs-hero > img,
  .gcp-v16-client-hero > img { object-position: 66% 40%; opacity: 0.6; }
  .gcp-v16-jobs-hero > div,
  .gcp-v16-client-hero > div { width: 100%; min-height: 22rem; justify-content: flex-end; padding: 1.3rem; background: linear-gradient(0deg, var(--gcp-paper-bright) 0%, color-mix(in srgb, var(--gcp-paper-bright) 91%, transparent) 48%, color-mix(in srgb, var(--gcp-paper-bright) 22%, transparent) 100%); }
  .gcp-v16-jobs-hero h1,
  .gcp-v16-client-hero h1 { font-size: 2.45rem; }
  .gcp-v16-client-hero nav { top: 0.65rem; right: 0.65rem; left: 0.65rem; justify-content: flex-end; }
  .gcp-v16-client-hero nav a { min-height: 2.2rem; padding: 0.45rem 0.65rem; font-size: 0.56rem; }
  .gcp-v16-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v16-stat-strip > button { min-height: 6.65rem; border-top: 1px solid var(--gcp-line); }
  .gcp-v16-stat-strip > button:nth-child(odd) { border-left: 0; }
  .gcp-v16-stat-strip > button:first-child,
  .gcp-v16-stat-strip > button:nth-child(2) { border-top: 0; }
  .gcp-v16-stat-strip > button:nth-child(4) { border-left: 1px solid var(--gcp-line); }
  .gcp-v16-stat-strip > button:nth-child(5) { border-left: 0; }
  .gcp-v16-filter-row,
  .gcp-v16-client-directory .gcp-v16-filter-row { grid-template-columns: minmax(0, 1fr); }
  .gcp-v16-filter-row label,
  .gcp-v16-filter-row > span { grid-column: auto; }
  .gcp-v16-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v16-summary-card.is-wide { grid-column: auto; }
  .gcp-v16-pagination-row { align-items: flex-start; flex-direction: column; }
  .gcp-v16-pagination-row .pagination { align-self: center; }
  .gcp-v16-client-card > footer { grid-template-columns: minmax(0, 1fr); }
  .gcp-v16-client-card > footer a { justify-self: start; }
  .gcp-v16-data-table { padding-inline: 0.5rem; }
}

/* ========================================================================== 
   Genie Control Panel — individual client workspace (v17)
   ========================================================================== */

.gcp-v17-client-detail {
  min-height: 100vh;
  color: var(--gcp-ink);
  background: var(--gcp-paper);
}

.gcp-v17-client-detail .performance-client-canvas__content {
  width: min(calc(100% - 2.5rem), 96rem);
  margin: 0 auto;
  padding: 0.8rem 0 3rem;
}

.gcp-v17-client-detail .performance-client-landscape {
  top: 41rem;
  width: min(118%, 104rem);
  opacity: 0.13;
  filter: none;
  mix-blend-mode: normal;
}

.gcp-v17-client-detail::after {
  inset: 45rem 0 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(223, 232, 238, 0.38) 42rem, rgba(235, 239, 241, 0.2) 100%);
}

.gcp-v17-client-detail .performance-client-tabs {
  position: sticky;
  top: 4.75rem;
  z-index: 32;
  margin: -0.8rem 0 0;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--gcp-line);
  border-radius: 0;
  background: var(--gcp-paper-bright);
  backdrop-filter: none;
}

.gcp-v17-client-detail .performance-client-tabs nav {
  gap: 0.4rem;
}

.gcp-v17-client-detail .performance-client-tabs nav a {
  min-height: 2.2rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  color: var(--gcp-ink-soft);
  background: transparent;
  font-size: 0.62rem;
  text-decoration: none;
}

.gcp-v17-client-detail .performance-client-tabs nav a[aria-current="page"] {
  color: #fff;
  border-color: #102a45;
  background: #102a45;
}

.gcp-v17-client-hero,
html:not(.dark) .gcp-v17-client-hero {
  min-height: 22.5rem;
  display: grid;
  grid-template-columns: minmax(24rem, 0.86fr) minmax(28rem, 1.14fr);
  border: 1px solid var(--gcp-line);
  border-radius: 0.95rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 11px 32px rgba(11, 31, 50, 0.05);
}

.gcp-v17-client-hero::before,
html:not(.dark) .gcp-v17-client-hero::before {
  background:
    linear-gradient(90deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.93) 34%, rgba(255, 255, 255, 0.2) 69%, transparent 100%),
    radial-gradient(ellipse at 79% 44%, rgba(51, 91, 126, 0.12), transparent 64%);
}

.gcp-v17-client-hero .performance-reporting-hero__copy,
html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__copy {
  width: 100%;
  min-height: 22.5rem;
  padding: 2.15rem 0 2rem 2.35rem;
}

.gcp-v17-client-hero .performance-eyebrow {
  margin-bottom: 0.65rem;
  color: #102a45;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
}

.gcp-v17-client-hero h1 {
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  line-height: 0.92;
}

.gcp-v17-client-hero h1 em {
  color: #102a45;
}

.gcp-v17-client-hero .performance-reporting-hero__copy > p:not(.performance-eyebrow) {
  max-width: 35rem;
  margin-top: 0.9rem;
  font-size: 0.77rem;
  line-height: 1.52;
}

.gcp-v17-client-hero .performance-reporting-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.gcp-v17-client-hero .performance-reporting-hero__facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.58rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.35rem;
  color: var(--gcp-ink-soft);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.54rem;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}

.gcp-v17-client-hero .performance-reporting-hero__facts svg {
  width: 0.68rem;
  height: 0.68rem;
  color: var(--gcp-gold-deep);
}

.gcp-v17-client-hero [data-client-operations-link] {
  width: max-content;
  margin-top: 0.8rem;
  color: #fff;
  border-color: #102a45;
  background: #102a45;
  box-shadow: none;
  font-size: 0.64rem;
}

.gcp-v17-client-hero .performance-reporting-hero__art,
html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__art {
  inset: 0 0 0 45%;
  overflow: hidden;
}

.gcp-v17-client-hero .performance-reporting-hero__wash,
html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__wash {
  inset: 0;
  background:
    radial-gradient(ellipse at 63% 49%, rgba(41, 78, 114, 0.18), transparent 57%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.86), transparent 34%);
  filter: none;
}

.gcp-v17-client-hero .performance-reporting-hero__art img,
html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__art img {
  width: 96%;
  height: 96%;
  max-height: none;
  margin-left: auto;
  object-position: center right;
  opacity: 1;
  filter: none;
  mix-blend-mode: multiply;
}

.gcp-v17-client-hero .performance-reporting-hero__gold-brush {
  right: 4%;
  bottom: 19%;
  width: 52%;
}

.gcp-v17-client-detail .performance-period-card,
.gcp-v17-client-detail .performance-table-card,
.gcp-v17-client-detail .stat-card,
.gcp-v17-client-detail [data-slot="card"] {
  border-color: var(--gcp-line);
  background: var(--gcp-paper-bright);
  box-shadow: 0 8px 25px rgba(11, 31, 50, 0.04) !important;
  backdrop-filter: none;
}

.gcp-v17-client-detail .performance-period-card {
  border-left: 3px solid var(--gcp-gold-deep);
}

.gcp-v17-client-detail .performance-report-tabs > div:first-child {
  margin-bottom: 0.65rem;
}

.gcp-v17-client-detail .performance-report-tabs [role="tablist"] {
  width: 100%;
  min-height: 2.65rem;
  display: flex;
  justify-content: flex-start;
  padding: 0.25rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.55rem;
  background: var(--gcp-paper-bright);
}

.gcp-v17-client-detail .performance-report-tabs [role="tab"] {
  min-height: 2.1rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.35rem;
  font-size: 0.61rem;
}

.gcp-v17-client-detail .performance-report-tabs [role="tab"][data-state="active"] {
  color: #fff;
  background: #102a45;
}

.gcp-v17-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.8rem;
  background: var(--gcp-paper-bright);
}

.gcp-v17-summary-strip article {
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9rem 1rem;
  border-left: 1px solid var(--gcp-line);
}

.gcp-v17-summary-strip article:first-child { border-left: 0; }
.gcp-v17-summary-strip span { color: var(--gcp-ink-soft); font-size: 0.58rem; }
.gcp-v17-summary-strip strong { margin-top: 0.16rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.65rem; font-weight: 610; }
.gcp-v17-summary-strip small { margin-top: 0.28rem; color: var(--gcp-ink-soft); font-size: 0.51rem; line-height: 1.35; }
.gcp-v17-summary-strip .is-healthy strong { color: var(--gcp-green); }
.gcp-v17-summary-strip .is-warning strong { color: var(--gcp-gold-deep); }
.gcp-v17-summary-strip .is-critical strong { color: var(--gcp-rose); }

.gcp-v17-focus > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.gcp-v17-focus > header p { margin: 0; font-size: 0.72rem; font-weight: 860; }
.gcp-v17-focus > header span { color: var(--gcp-ink-soft); font-size: 0.54rem; }
.gcp-v17-focus > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.gcp-v17-focus button,
.gcp-v17-focus a {
  min-width: 0;
  min-height: 5.2rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 0.8rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.7rem;
  color: var(--gcp-ink);
  background: var(--gcp-paper-bright);
  text-align: left;
  text-decoration: none;
}
.gcp-v17-focus button > svg:first-child,
.gcp-v17-focus a > svg:first-child { width: 2rem; height: 2rem; padding: 0.48rem; border-radius: 50%; color: #102a45; background: rgba(31, 87, 139, 0.09); }
.gcp-v17-focus button > svg:last-child,
.gcp-v17-focus a > svg:last-child { width: 0.75rem; height: 0.75rem; color: var(--gcp-ink-soft); }
.gcp-v17-focus span { min-width: 0; display: grid; gap: 0.18rem; }
.gcp-v17-focus strong { font-size: 0.59rem; }
.gcp-v17-focus small { color: var(--gcp-ink-soft); font-size: 0.5rem; line-height: 1.35; }
.gcp-v17-focus .is-warning > svg:first-child { color: var(--gcp-gold-deep); background: rgba(184, 138, 52, 0.12); }
.gcp-v17-focus .is-critical > svg:first-child { color: var(--gcp-rose); background: rgba(191, 63, 56, 0.1); }
.gcp-v17-focus .is-healthy > svg:first-child { color: var(--gcp-green); background: rgba(49, 116, 95, 0.1); }

.gcp-v17-private-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #102a45;
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.78);
}
.gcp-v17-private-context article { min-width: 0; display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: 0.52rem; align-items: start; padding: 0.75rem; border-left: 1px solid var(--gcp-line); }
.gcp-v17-private-context article:first-child { border-left: 0; }
.gcp-v17-private-context svg { width: 1rem; height: 1rem; color: #102a45; }
.gcp-v17-private-context span { min-width: 0; display: grid; gap: 0.18rem; }
.gcp-v17-private-context strong { font-size: 0.56rem; }
.gcp-v17-private-context small { color: var(--gcp-ink-soft); font-size: 0.49rem; line-height: 1.35; }

html.dark .gcp-v17-client-detail,
html.dark .gcp-v17-client-hero,
html.dark .gcp-v17-client-detail .performance-client-tabs,
html.dark .gcp-v17-summary-strip,
html.dark .gcp-v17-focus button,
html.dark .gcp-v17-focus a,
html.dark .gcp-v17-private-context {
  color: #f0eadf;
  background: #0b213b;
}

html.dark .gcp-v17-client-hero::before {
  background: linear-gradient(90deg, #0b213b 0%, rgba(11, 33, 59, 0.92) 36%, rgba(11, 33, 59, 0.18) 72%, transparent 100%);
}

html.dark .gcp-v17-client-hero .performance-reporting-hero__art img {
  opacity: 0.88;
  filter: none;
  mix-blend-mode: screen;
}

@media (max-width: 1050px) {
  .gcp-v17-client-hero,
  html:not(.dark) .gcp-v17-client-hero { grid-template-columns: minmax(21rem, 0.95fr) minmax(23rem, 1.05fr); }
  .gcp-v17-focus > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .gcp-v17-client-detail .performance-client-canvas__content { width: calc(100% - 1rem); padding-top: 0.5rem; }
  .gcp-v17-client-detail .performance-client-tabs { top: 0; margin-top: -0.5rem; }
  .gcp-v17-client-hero,
  html:not(.dark) .gcp-v17-client-hero { min-height: 31rem; display: block; }
  .gcp-v17-client-hero .performance-reporting-hero__copy,
  html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__copy { min-height: 31rem; justify-content: flex-start; padding: 1.35rem 1rem 11.8rem; }
  .gcp-v17-client-hero h1 { font-size: clamp(2.45rem, 13vw, 3.7rem); }
  .gcp-v17-client-hero .performance-reporting-hero__copy > p:not(.performance-eyebrow) { font-size: 0.72rem; }
  .gcp-v17-client-hero .performance-reporting-hero__art,
  html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__art { inset: 17rem 0 0 8%; }
  .gcp-v17-client-hero .performance-reporting-hero__art img,
  html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__art img { width: 100%; height: 100%; object-position: center bottom; }
  .gcp-v17-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v17-summary-strip article { min-height: 5.8rem; border-top: 1px solid var(--gcp-line); }
  .gcp-v17-summary-strip article:nth-child(odd) { border-left: 0; }
  .gcp-v17-summary-strip article:first-child,
  .gcp-v17-summary-strip article:nth-child(2) { border-top: 0; }
  .gcp-v17-private-context { grid-template-columns: minmax(0, 1fr); }
  .gcp-v17-private-context article { border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v17-private-context article:first-child { border-top: 0; }
  .gcp-v17-client-detail .performance-client-landscape { top: 48rem; width: 160%; }
}

@media (max-width: 500px) {
  .gcp-v17-client-hero,
  html:not(.dark) .gcp-v17-client-hero { min-height: 32rem; }
  .gcp-v17-client-hero .performance-reporting-hero__copy,
  html:not(.dark) .gcp-v17-client-hero .performance-reporting-hero__copy { min-height: 32rem; padding-bottom: 12.2rem; }
  .gcp-v17-client-hero .performance-reporting-hero__facts span:nth-child(3) { display: none; }
  .gcp-v17-client-hero [data-client-operations-link] { width: 100%; justify-content: center; }
  .gcp-v17-focus > header { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .gcp-v17-focus > div { grid-template-columns: minmax(0, 1fr); }
  .gcp-v17-focus button,
  .gcp-v17-focus a { min-height: 4.7rem; }
}

/* ========================================================================== 
   Genie Control Panel — private schedule calendar (v18)
   ========================================================================== */

.gcp-v18-calendar-page {
  min-height: 100vh;
  color: var(--gcp-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 247, 247, 0.96)),
    var(--gcp-paper);
}

.gcp-v18-canvas {
  width: min(calc(100% - 2.5rem), 105rem);
  margin: 0 auto;
  padding: 0.8rem 0 3.5rem;
}

.gcp-v18-hero {
  position: relative;
  min-height: 18.5rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.95rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 11px 32px rgba(11, 31, 50, 0.05);
}

.gcp-v18-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.94) 34%, rgba(255, 255, 255, 0.36) 60%, transparent 83%);
}

.gcp-v18-hero > img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 78%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  opacity: 0.92;
}

.gcp-v18-hero > div {
  position: relative;
  z-index: 1;
  width: 57%;
  min-height: 18.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.15rem 0 2rem 2.35rem;
}

.gcp-v18-hero > div > p {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  color: var(--gcp-gold-deep);
  font-size: 0.6rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gcp-v18-hero > div > p svg { width: 0.78rem; height: 0.78rem; }
.gcp-v18-hero h1 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(2.8rem, 4vw, 4.45rem); font-weight: 580; line-height: 0.96; letter-spacing: -0.04em; }
.gcp-v18-hero > div > span { max-width: 36rem; margin-top: 0.85rem; color: var(--gcp-ink-soft); font-size: 0.78rem; line-height: 1.55; }
.gcp-v18-hero ul { max-width: 39rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.gcp-v18-hero li { min-width: 0; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: 0.42rem; align-items: center; }
.gcp-v18-hero li svg { grid-row: 1 / span 2; width: 0.85rem; height: 0.85rem; color: var(--gcp-gold-deep); }
.gcp-v18-hero li strong { font-size: 0.56rem; }
.gcp-v18-hero li small { color: var(--gcp-ink-soft); font-size: 0.49rem; line-height: 1.35; }

.gcp-v18-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 0.75rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.8rem;
  background: var(--gcp-paper-bright);
}

.gcp-v18-metric {
  min-width: 0;
  min-height: 6.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.85rem 1rem;
  border-left: 1px solid var(--gcp-line);
}

.gcp-v18-metric:first-child { border-left: 0; }
.gcp-v18-metric span { color: var(--gcp-ink-soft); font-size: 0.56rem; font-weight: 760; }
.gcp-v18-metric strong { margin-top: 0.15rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.65rem; font-weight: 610; }
.gcp-v18-metric small { margin-top: 0.2rem; color: var(--gcp-ink-soft); font-size: 0.48rem; line-height: 1.35; }
.gcp-v18-metric.is-warning strong { color: var(--gcp-gold-deep); }
.gcp-v18-metric.is-critical strong { color: var(--gcp-rose); }

.gcp-v18-truth,
.gcp-v18-recorded-note,
.gcp-v18-private-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(184, 138, 52, 0.52);
  border-radius: 0.65rem;
  background: rgba(245, 236, 212, 0.58);
}

.gcp-v18-truth svg,
.gcp-v18-recorded-note svg,
.gcp-v18-private-note svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--gcp-gold-deep); }
.gcp-v18-truth p,
.gcp-v18-recorded-note p,
.gcp-v18-private-note p { margin: 0; color: var(--gcp-ink-soft); font-size: 0.58rem; line-height: 1.45; }
.gcp-v18-recorded-note { margin-bottom: 0.75rem; border-color: rgba(31, 87, 139, 0.36); background: rgba(238, 244, 248, 0.78); }
.gcp-v18-recorded-note svg { color: #102a45; }
.gcp-v18-private-note { border-color: #102a45; background: rgba(238, 244, 248, 0.76); }
.gcp-v18-private-note svg { color: #102a45; }

.gcp-v18-calendar-controls {
  min-height: 3.6rem;
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) auto minmax(15rem, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.75rem;
}

.gcp-v18-period-controls,
.gcp-v18-view-controls { display: flex; align-items: center; gap: 0.35rem; }
.gcp-v18-period-controls button,
.gcp-v18-view-controls button,
.gcp-v18-calendar-controls > a {
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.45rem;
  color: var(--gcp-ink);
  background: var(--gcp-paper-bright);
  font-size: 0.56rem;
  font-weight: 760;
  text-decoration: none;
}

.gcp-v18-period-controls button svg,
.gcp-v18-view-controls button svg,
.gcp-v18-calendar-controls > a svg { width: 0.78rem; height: 0.78rem; }
.gcp-v18-period-controls button:nth-child(2),
.gcp-v18-period-controls button:nth-child(3) { width: 2.4rem; padding: 0; }
.gcp-v18-period-controls strong { margin-left: 0.4rem; font-size: 0.62rem; }
.gcp-v18-view-controls { padding: 0.2rem; border: 1px solid var(--gcp-line); border-radius: 0.5rem; background: rgba(242, 245, 246, 0.8); }
.gcp-v18-view-controls button { min-height: 2rem; border-color: transparent; background: transparent; }
.gcp-v18-view-controls button.is-active { color: #fff; border-color: #102a45; background: #102a45; }
.gcp-v18-calendar-controls > a { justify-self: end; color: #fff; border-color: #102a45; background: #102a45; }

.gcp-v18-filter-row {
  display: grid;
  grid-template-columns: minmax(15rem, 1.25fr) repeat(3, minmax(10rem, 0.9fr)) auto;
  align-items: end;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.7rem;
  background: var(--gcp-paper-bright);
}

.gcp-v18-search,
.gcp-v18-filter { min-width: 0; display: grid; gap: 0.3rem; }
.gcp-v18-search { position: relative; }
.gcp-v18-search > span,
.gcp-v18-filter > span { color: var(--gcp-ink-soft); font-size: 0.49rem; font-weight: 760; }
.gcp-v18-search > svg { position: absolute; left: 0.7rem; bottom: 0.72rem; z-index: 1; width: 0.75rem; height: 0.75rem; color: var(--gcp-ink-soft); }
.gcp-v18-search input { height: 2.35rem; padding-left: 2rem; font-size: 0.57rem; }
.gcp-v18-filter button { height: 2.35rem; font-size: 0.57rem; }
.gcp-v18-filter-row > span { min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.45rem 0.7rem; color: var(--gcp-ink-soft); border: 1px solid var(--gcp-line); border-radius: 0.45rem; font-size: 0.53rem; }
.gcp-v18-filter-row > span svg { width: 0.72rem; height: 0.72rem; }

.gcp-v18-working-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 0.72fr) minmax(34rem, 2.25fr) minmax(14rem, 0.82fr);
  gap: 0.65rem;
  align-items: start;
}

.gcp-v18-left-rail,
.gcp-v18-right-rail { min-width: 0; display: grid; gap: 0.65rem; }
.gcp-v18-mini-calendar,
.gcp-v18-side-card,
.gcp-v18-calendar-surface,
.gcp-v18-summary-grid > article,
.gcp-v18-catalog {
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.72rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 8px 25px rgba(11, 31, 50, 0.035);
}

.gcp-v18-mini-calendar > header,
.gcp-v18-side-card > header,
.gcp-v18-summary-grid > article > header,
.gcp-v18-catalog > header {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--gcp-line);
}

.gcp-v18-mini-calendar > header strong { font-size: 0.6rem; }
.gcp-v18-mini-calendar > header small { color: var(--gcp-ink-soft); font-size: 0.48rem; }

.gcp-v18-month { min-width: 0; }
.gcp-v18-month__weekdays,
.gcp-v18-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gcp-v18-month__weekdays { padding: 0.35rem 0.45rem 0.2rem; }
.gcp-v18-month__weekdays span { color: var(--gcp-ink-soft); font-size: 0.42rem; font-weight: 760; text-align: center; }
.gcp-v18-month__grid { padding: 0 0.45rem 0.45rem; }
.gcp-v18-month__grid button {
  min-width: 0;
  min-height: 5.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  padding: 0.48rem 0.25rem;
  border: 1px solid var(--gcp-line);
  border-width: 1px 0 0 1px;
  color: var(--gcp-ink);
  background: transparent;
}

.gcp-v18-month__grid button:nth-child(7n) { border-right-width: 1px; }
.gcp-v18-month__grid button:nth-last-child(-n + 7) { border-bottom-width: 1px; }
.gcp-v18-month__grid button strong { font-size: 0.62rem; }
.gcp-v18-month__grid button span { min-width: 1.35rem; min-height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #102a45; font-size: 0.48rem; font-weight: 800; }
.gcp-v18-month__grid button span:empty { background: transparent; }
.gcp-v18-month__grid button small { color: var(--gcp-ink-soft); font-size: 0.42rem; }
.gcp-v18-month__grid button.is-outside { color: rgba(83, 101, 116, 0.46); background: rgba(237, 241, 243, 0.52); }
.gcp-v18-month__grid button.is-today strong { color: var(--gcp-gold-deep); }
.gcp-v18-month__grid button.is-selected { box-shadow: inset 0 0 0 2px #102a45; }

.gcp-v18-mini-calendar .gcp-v18-month__grid button { min-height: 2.15rem; justify-content: center; padding: 0.18rem; border: 0; border-radius: 0.28rem; }
.gcp-v18-mini-calendar .gcp-v18-month__grid button strong { font-size: 0.48rem; }
.gcp-v18-mini-calendar .gcp-v18-month__grid button span { min-width: 0.35rem; min-height: 0.35rem; width: 0.35rem; height: 0.35rem; color: transparent; }
.gcp-v18-mini-calendar .gcp-v18-month__grid button small { display: none; }
.gcp-v18-mini-calendar .gcp-v18-month__grid button.is-selected { color: #fff; background: #102a45; box-shadow: none; }
.gcp-v18-mini-calendar .gcp-v18-month__grid button.is-selected span { background: var(--gcp-gold); }

.gcp-v18-side-card > header > div,
.gcp-v18-summary-grid > article > header,
.gcp-v18-catalog > header > div { min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
.gcp-v18-side-card > header svg,
.gcp-v18-summary-grid > article > header svg,
.gcp-v18-catalog > header svg { width: 0.88rem; height: 0.88rem; color: var(--gcp-gold-deep); }
.gcp-v18-side-card > header span,
.gcp-v18-summary-grid > article > header span,
.gcp-v18-catalog > header span { min-width: 0; display: grid; gap: 0.08rem; }
.gcp-v18-side-card > header strong,
.gcp-v18-summary-grid > article > header strong,
.gcp-v18-catalog > header strong { font-size: 0.56rem; }
.gcp-v18-side-card > header small,
.gcp-v18-summary-grid > article > header small,
.gcp-v18-catalog > header small { color: var(--gcp-ink-soft); font-size: 0.45rem; line-height: 1.25; }
.gcp-v18-side-card > header > b { min-width: 1.35rem; min-height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gcp-line); border-radius: 50%; font-size: 0.48rem; }
.gcp-v18-side-card > div { display: grid; }
.gcp-v18-side-card > div > button,
.gcp-v18-side-card > div > a {
  min-width: 0;
  min-height: 3.9rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.7rem;
  border: 0;
  border-top: 1px solid var(--gcp-line);
  color: var(--gcp-ink);
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.gcp-v18-side-card > div > button:first-child,
.gcp-v18-side-card > div > a:first-child { border-top: 0; }
.gcp-v18-side-card > div > button > time { min-width: 2.7rem; display: grid; gap: 0.1rem; color: #102a45; font-size: 0.54rem; font-weight: 800; }
.gcp-v18-side-card > div > button > time small { color: var(--gcp-ink-soft); font-size: 0.4rem; font-weight: 580; }
.gcp-v18-side-card > div > button > span,
.gcp-v18-side-card > div > a > span { min-width: 0; display: grid; gap: 0.15rem; flex: 1; }
.gcp-v18-side-card > div strong { overflow: hidden; font-size: 0.5rem; line-height: 1.28; text-overflow: ellipsis; }
.gcp-v18-side-card > div small { color: var(--gcp-ink-soft); font-size: 0.42rem; line-height: 1.3; }
.gcp-v18-side-card > div > a > svg,
.gcp-v18-side-card > div > button > svg { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; color: var(--gcp-ink-soft); }
.gcp-v18-side-card > footer,
.gcp-v18-side-card > a { min-height: 2.65rem; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.55rem 0.7rem; border-top: 1px solid var(--gcp-line); color: #102a45; font-size: 0.48rem; font-weight: 780; text-decoration: none; }
.gcp-v18-side-card > a svg { width: 0.68rem; height: 0.68rem; }
.gcp-v18-side-empty { margin: 0; padding: 0.8rem; color: var(--gcp-ink-soft); font-size: 0.48rem; line-height: 1.4; }
.gcp-v18-side-card.is-attention > header svg,
.gcp-v18-side-card.is-review > header svg { color: var(--gcp-rose); }

.gcp-v18-calendar-surface { min-width: 0; }
.gcp-v18-week { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.gcp-v18-week__head,
.gcp-v18-week__body { min-width: 61rem; display: grid; grid-template-columns: 4rem repeat(7, minmax(7.75rem, 1fr)); }
.gcp-v18-week__head { min-height: 3.2rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v18-week__head > span { border-right: 1px solid var(--gcp-line); }
.gcp-v18-week__head time { display: flex; align-items: center; justify-content: center; gap: 0.28rem; border-right: 1px solid var(--gcp-line); }
.gcp-v18-week__head time:last-child { border-right: 0; }
.gcp-v18-week__head time small,
.gcp-v18-week__head time em { color: var(--gcp-ink-soft); font-size: 0.46rem; font-style: normal; }
.gcp-v18-week__head time strong { min-width: 1.55rem; min-height: 1.55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.58rem; }
.gcp-v18-week__head time.is-today strong { color: #fff; background: #102a45; }
.gcp-v18-week__body { position: relative; }
.gcp-v18-week__hours,
.gcp-v18-week__day { position: relative; height: 52rem; }
.gcp-v18-week__hours { border-right: 1px solid var(--gcp-line); }
.gcp-v18-week__hours span { position: absolute; right: 0.45rem; color: var(--gcp-ink-soft); font-size: 0.42rem; transform: translateY(-50%); }
.gcp-v18-week__day {
  border-right: 1px solid var(--gcp-line);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(16.666% - 1px), var(--gcp-line) calc(16.666% - 1px), var(--gcp-line) 16.666%);
}
.gcp-v18-week__day:last-child { border-right: 0; }
.gcp-v18-week__day.is-today { background-color: rgba(221, 233, 240, 0.31); }
.gcp-v18-calendar-event {
  position: absolute;
  z-index: 2;
  min-width: 0;
  min-height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.42rem 0.48rem;
  overflow: hidden;
  border: 1px solid rgba(40, 91, 138, 0.24);
  border-left: 3px solid #2e6797;
  border-radius: 0.42rem;
  color: var(--gcp-ink);
  background: #e6ebf0;
  text-align: left;
  box-shadow: 0 4px 12px rgba(11, 31, 50, 0.06);
}

.gcp-v18-calendar-event.is-warning { border-color: rgba(184, 138, 52, 0.4); border-left-color: var(--gcp-gold-deep); background: #fbf2dd; }
.gcp-v18-calendar-event time { color: #102a45; font-size: 0.43rem; font-weight: 820; }
.gcp-v18-calendar-event strong { width: 100%; overflow: hidden; font-size: 0.46rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-calendar-event small { width: 100%; overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.39rem; text-overflow: ellipsis; white-space: nowrap; }

.gcp-v18-calendar-surface > .gcp-v18-month { min-width: 45rem; overflow-x: auto; padding: 0.7rem; }
.gcp-v18-agenda-view { min-height: 34rem; }
.gcp-v18-agenda-view > header { min-height: 5rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v18-agenda-view > header > span { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #102a45; background: rgba(31, 87, 139, 0.09); }
.gcp-v18-agenda-view > header svg { width: 1.1rem; height: 1.1rem; }
.gcp-v18-agenda-view > header > div { display: grid; gap: 0.12rem; }
.gcp-v18-agenda-view > header small { color: var(--gcp-ink-soft); font-size: 0.48rem; }
.gcp-v18-agenda-view > header strong { font-family: "Fraunces Variable", Georgia, serif; font-size: 1.2rem; font-weight: 610; }
.gcp-v18-agenda-list { display: grid; }
.gcp-v18-agenda-list button { min-height: 4.6rem; display: grid; grid-template-columns: 4rem 0.55rem minmax(0, 1fr) 1rem; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v18-agenda-list button:first-child { border-top: 0; }
.gcp-v18-agenda-list time { color: #102a45; font-size: 0.64rem; font-weight: 820; }
.gcp-v18-agenda-list i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #2e6797; }
.gcp-v18-agenda-list span { display: grid; gap: 0.15rem; }
.gcp-v18-agenda-list strong { font-size: 0.58rem; }
.gcp-v18-agenda-list small { color: var(--gcp-ink-soft); font-size: 0.46rem; }
.gcp-v18-agenda-list svg { width: 0.75rem; height: 0.75rem; color: var(--gcp-ink-soft); }
.gcp-v18-empty { min-height: 16rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.gcp-v18-empty svg { width: 2.2rem; height: 2.2rem; margin-bottom: 0.7rem; color: var(--gcp-green); }
.gcp-v18-empty strong { font-size: 0.72rem; }
.gcp-v18-empty p { max-width: 24rem; margin: 0.35rem 0 0; color: var(--gcp-ink-soft); font-size: 0.52rem; line-height: 1.45; }

.gcp-v18-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.65rem; }
.gcp-v18-summary-grid > article { min-width: 0; }
.gcp-v18-summary-grid > article > header { justify-content: flex-start; }
.gcp-v18-summary-grid dl,
.gcp-v18-summary-grid ol { margin: 0; padding: 0.45rem 0.75rem 0.7rem; list-style: none; }
.gcp-v18-summary-grid dl > div,
.gcp-v18-summary-grid ol > li { min-height: 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; border-top: 1px solid var(--gcp-line); }
.gcp-v18-summary-grid dl > div:first-child,
.gcp-v18-summary-grid ol > li:first-child { border-top: 0; }
.gcp-v18-summary-grid dt { color: var(--gcp-ink-soft); font-size: 0.47rem; }
.gcp-v18-summary-grid dd { margin: 0; font-size: 0.5rem; font-weight: 820; text-align: right; }
.gcp-v18-summary-grid ol span { min-width: 0; display: flex; align-items: baseline; gap: 0.35rem; }
.gcp-v18-summary-grid ol strong { overflow: hidden; font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-summary-grid ol small { color: var(--gcp-ink-soft); font-size: 0.4rem; }
.gcp-v18-summary-grid ol b { min-width: 1.35rem; min-height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gcp-line); border-radius: 50%; font-size: 0.45rem; }
.gcp-v18-summary-grid ol .is-empty { color: var(--gcp-ink-soft); font-size: 0.47rem; }
.gcp-v18-summary-grid .is-actions > a,
.gcp-v18-summary-grid .is-actions > button { min-height: 3.3rem; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 0.75rem; align-items: center; gap: 0.5rem; width: 100%; padding: 0.55rem 0.75rem; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; text-decoration: none; }
.gcp-v18-summary-grid .is-actions > a > svg:first-child,
.gcp-v18-summary-grid .is-actions > button > svg:first-child { width: 0.9rem; height: 0.9rem; color: #102a45; }
.gcp-v18-summary-grid .is-actions > a > svg:last-child,
.gcp-v18-summary-grid .is-actions > button > svg:last-child { width: 0.68rem; height: 0.68rem; color: var(--gcp-ink-soft); }
.gcp-v18-summary-grid .is-actions > a > span,
.gcp-v18-summary-grid .is-actions > button > span { display: grid; gap: 0.12rem; }
.gcp-v18-summary-grid .is-actions strong { font-size: 0.48rem; }
.gcp-v18-summary-grid .is-actions small { color: var(--gcp-ink-soft); font-size: 0.41rem; }

.gcp-v18-catalog { margin-top: 0.65rem; scroll-margin-top: 5rem; }
.gcp-v18-catalog > header > b { display: inline-flex; align-items: center; gap: 0.35rem; color: #102a45; font-size: 0.47rem; }
.gcp-v18-catalog > header > b svg { width: 0.72rem; height: 0.72rem; }
.gcp-v18-catalog > div { padding: 0.55rem; }

html.dark .gcp-v18-calendar-page,
html.dark .gcp-v18-hero,
html.dark .gcp-v18-metrics,
html.dark .gcp-v18-filter-row,
html.dark .gcp-v18-mini-calendar,
html.dark .gcp-v18-side-card,
html.dark .gcp-v18-calendar-surface,
html.dark .gcp-v18-summary-grid > article,
html.dark .gcp-v18-catalog {
  color: #f0eadf;
  background: #0b213b;
}

html.dark .gcp-v18-hero::after { background: linear-gradient(90deg, #0b213b 0%, rgba(11, 33, 59, 0.93) 37%, rgba(11, 33, 59, 0.4) 65%, transparent 88%); }
html.dark .gcp-v18-metric,
html.dark .gcp-v18-filter-row,
html.dark .gcp-v18-calendar-controls button,
html.dark .gcp-v18-view-controls,
html.dark .gcp-v18-period-controls button { background: #0f2b49; }
html.dark .gcp-v18-calendar-event { color: #eef3f6; background: #173c5c; }
html.dark .gcp-v18-calendar-event.is-warning { color: #f8ecd2; background: #4a3a1e; }
html.dark .gcp-v18-week__day.is-today { background-color: rgba(39, 94, 136, 0.18); }
html.dark .gcp-v18-month__grid button.is-outside { background: rgba(7, 24, 43, 0.48); }

@media (max-width: 1320px) {
  .gcp-v18-working-grid { grid-template-columns: minmax(12rem, 0.7fr) minmax(34rem, 2fr); }
  .gcp-v18-right-rail { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v18-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .gcp-v18-hero > div { width: 68%; }
  .gcp-v18-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v18-metric:nth-child(4) { border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v18-metric:nth-child(5) { border-top: 1px solid var(--gcp-line); }
  .gcp-v18-calendar-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .gcp-v18-calendar-controls > a { grid-column: 1 / -1; justify-self: start; }
  .gcp-v18-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v18-search,
  .gcp-v18-filter-row > span { grid-column: 1 / -1; }
  .gcp-v18-working-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-left-rail { grid-template-columns: minmax(15rem, 0.75fr) minmax(18rem, 1.25fr); }
  .gcp-v18-right-rail { grid-column: auto; }
  .gcp-v18-calendar-surface { order: -1; }
}

@media (max-width: 760px) {
  .gcp-v18-canvas { width: calc(100% - 1rem); padding-top: 0.5rem; }
  .gcp-v18-hero { min-height: 27rem; }
  .gcp-v18-hero > img { width: 100%; height: 54%; top: auto; bottom: 0; object-position: 74% 54%; opacity: 0.78; }
  .gcp-v18-hero::after { background: linear-gradient(180deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.25) 83%, transparent 100%); }
  .gcp-v18-hero > div { width: 100%; min-height: 27rem; justify-content: flex-start; padding: 1.35rem 1rem 11.5rem; }
  .gcp-v18-hero h1 { font-size: clamp(2.55rem, 13vw, 3.65rem); }
  .gcp-v18-hero > div > span { font-size: 0.7rem; }
  .gcp-v18-hero ul { grid-template-columns: minmax(0, 1fr); gap: 0.42rem; margin-top: 0.8rem; }
  .gcp-v18-hero li small { display: none; }
  html.dark .gcp-v18-hero::after { background: linear-gradient(180deg, #0b213b 0%, rgba(11, 33, 59, 0.95) 52%, rgba(11, 33, 59, 0.34) 85%, transparent 100%); }
  .gcp-v18-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v18-metric { min-height: 5.7rem; border-top: 1px solid var(--gcp-line); }
  .gcp-v18-metric:nth-child(odd) { border-left: 0; }
  .gcp-v18-metric:first-child,
  .gcp-v18-metric:nth-child(2) { border-top: 0; }
  .gcp-v18-metric:nth-child(4) { border-left: 1px solid var(--gcp-line); }
  .gcp-v18-calendar-controls { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .gcp-v18-period-controls { flex-wrap: wrap; }
  .gcp-v18-period-controls strong { width: 100%; margin: 0.2rem 0 0; }
  .gcp-v18-view-controls { width: 100%; }
  .gcp-v18-view-controls button { flex: 1; }
  .gcp-v18-calendar-controls > a { grid-column: auto; width: 100%; justify-self: stretch; }
  .gcp-v18-filter-row { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-search,
  .gcp-v18-filter-row > span { grid-column: auto; }
  .gcp-v18-left-rail,
  .gcp-v18-right-rail { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-right-rail { order: 2; }
  .gcp-v18-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-calendar-surface > .gcp-v18-month { min-width: 0; padding: 0.35rem; }
  .gcp-v18-calendar-surface > .gcp-v18-month .gcp-v18-month__grid button { min-height: 4.2rem; }
  .gcp-v18-calendar-surface > .gcp-v18-month .gcp-v18-month__grid button small { display: none; }
  .gcp-v18-catalog > header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .gcp-v18-canvas { padding-bottom: 2.8rem; }
  .gcp-v18-hero { min-height: 28.5rem; }
  .gcp-v18-hero > div { min-height: 28.5rem; padding-bottom: 12.2rem; }
  .gcp-v18-metric { padding: 0.75rem; }
  .gcp-v18-filter-row { padding: 0.55rem; }
  .gcp-v18-week__head,
  .gcp-v18-week__body { min-width: 57rem; grid-template-columns: 3.5rem repeat(7, minmax(7.25rem, 1fr)); }
  .gcp-v18-month__weekdays { padding-inline: 0.15rem; }
  .gcp-v18-month__grid { padding-inline: 0.15rem; }
  .gcp-v18-calendar-surface > .gcp-v18-month .gcp-v18-month__grid button { min-height: 3.6rem; padding-inline: 0.1rem; }
  .gcp-v18-calendar-surface > .gcp-v18-month .gcp-v18-month__grid button span { min-width: 1.05rem; min-height: 1.05rem; }
}

/* Genie private control panel — refined Tasks & reviews */
.gcp-v18-page {
  min-height: 100%;
  color: var(--gcp-ink);
  background:
    linear-gradient(180deg, rgba(244, 247, 248, 0.24), rgba(255, 255, 255, 0.72)),
    var(--gcp-paper-bright);
}

.gcp-v18-page .gcp-v18-canvas {
  width: min(100% - 2rem, 112rem);
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

.gcp-v18-page .gcp-v18-hero {
  min-height: 21rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 1rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 1rem 3rem rgba(20, 48, 72, 0.07);
}

.gcp-v18-page .gcp-v18-hero::after {
  background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.97) 43%, rgba(255, 255, 255, 0.7) 61%, rgba(255, 255, 255, 0.08) 88%);
}

.gcp-v18-page .gcp-v18-hero > img {
  width: 66%;
  height: 112%;
  top: -6%;
  object-position: 70% 52%;
  opacity: 0.94;
}

.gcp-v18-page .gcp-v18-hero > div {
  width: 58%;
  min-height: 21rem;
  justify-content: center;
  padding: 2.2rem 2.55rem;
}

.gcp-v18-page .gcp-v18-hero h1 {
  max-width: 38rem;
  font-size: clamp(3rem, 4.5vw, 5rem);
}

.gcp-v18-page .gcp-v18-hero h1 em {
  color: #102a45;
  font-weight: 520;
}

.gcp-v18-truth-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  color: #102a45;
  font-size: 0.5rem;
  font-weight: 800;
}
.gcp-v18-truth-lock svg { width: 0.74rem; height: 0.74rem; }

.gcp-v18-page .gcp-v18-hero nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.gcp-v18-page .gcp-v18-hero nav a {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 0.9rem;
  color: #102a45;
  border: 1px solid rgba(18, 60, 99, 0.3);
  border-radius: 0.52rem;
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.6rem;
  font-weight: 800;
  text-decoration: none;
}

.gcp-v18-page .gcp-v18-hero nav a.is-primary {
  color: #fff;
  border-color: #102a45;
  background: #102a45;
}

.gcp-v18-page .gcp-v18-hero nav svg { width: 0.82rem; height: 0.82rem; }

.gcp-v18-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 0.75rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.65rem 2rem rgba(20, 48, 72, 0.045);
}

.gcp-v18-stat-grid > button {
  position: relative;
  min-width: 0;
  min-height: 7.2rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 1rem 1.05rem;
  border: 0;
  border-left: 1px solid var(--gcp-line);
  color: var(--gcp-ink);
  background: transparent;
  text-align: left;
}

.gcp-v18-stat-grid > button:first-child { border-left: 0; }
.gcp-v18-stat-grid > button.is-active { background: rgba(229, 238, 244, 0.78); box-shadow: inset 0 -0.18rem 0 #102a45; }
.gcp-v18-stat-grid > button > span { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; }
.gcp-v18-stat-grid > button small { font-size: 0.55rem; font-weight: 800; }
.gcp-v18-stat-grid > button svg { width: 0.95rem; height: 0.95rem; color: #315f87; }
.gcp-v18-stat-grid > button strong { margin-top: 0.28rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.9rem; font-weight: 610; line-height: 1; }
.gcp-v18-stat-grid > button em { margin-top: auto; color: var(--gcp-ink-soft); font-size: 0.48rem; font-style: normal; }
.gcp-v18-stat-grid progress,
.gcp-v18-readiness-list progress,
.gcp-v18-workload-list progress {
  width: 100%;
  height: 0.27rem;
  overflow: hidden;
  margin-top: 0.55rem;
  border: 0;
  border-radius: 999px;
  color: #285f8c;
  background: rgba(87, 106, 119, 0.13);
}
.gcp-v18-stat-grid progress::-webkit-progress-bar,
.gcp-v18-readiness-list progress::-webkit-progress-bar,
.gcp-v18-workload-list progress::-webkit-progress-bar { background: rgba(87, 106, 119, 0.13); }
.gcp-v18-stat-grid progress::-webkit-progress-value,
.gcp-v18-readiness-list progress::-webkit-progress-value,
.gcp-v18-workload-list progress::-webkit-progress-value { background: #285f8c; }
.gcp-v18-stat-grid progress::-moz-progress-bar,
.gcp-v18-readiness-list progress::-moz-progress-bar,
.gcp-v18-workload-list progress::-moz-progress-bar { background: #285f8c; }

.gcp-v18-error {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  color: #9c2626;
  border: 1px solid rgba(180, 46, 46, 0.3);
  border-radius: 0.65rem;
  background: rgba(255, 239, 239, 0.82);
}
.gcp-v18-error > svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.gcp-v18-error > span { display: grid; gap: 0.08rem; }
.gcp-v18-error strong { font-size: 0.56rem; }
.gcp-v18-error small { font-size: 0.48rem; }

.gcp-v18-work-panel {
  min-width: 0;
  overflow: hidden;
  margin-top: 0.75rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 0.65rem 2rem rgba(20, 48, 72, 0.04);
}

.gcp-v18-page .gcp-v18-filter-row {
  grid-template-columns: minmax(16rem, 1.3fr) minmax(11rem, 0.8fr) minmax(11rem, 0.8fr) auto;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--gcp-line);
  border-radius: 0;
  background: rgba(248, 250, 251, 0.9);
}
.gcp-v18-page .gcp-v18-filter-row > label { position: relative; min-width: 0; }
.gcp-v18-page .gcp-v18-filter-row > label svg { position: absolute; z-index: 1; top: 50%; left: 0.72rem; width: 0.78rem; height: 0.78rem; color: var(--gcp-ink-soft); transform: translateY(-50%); }
.gcp-v18-page .gcp-v18-filter-row input { height: 2.45rem; padding-left: 2.15rem; font-size: 0.56rem; }
.gcp-v18-page .gcp-v18-filter-row > button { height: 2.45rem; font-size: 0.56rem; }
.gcp-v18-page .gcp-v18-filter-row > span { min-height: 2.45rem; white-space: nowrap; }

.gcp-v18-data-table { min-width: 0; padding: 0 0.72rem 0.72rem; }
.gcp-v18-data-table .data-table-toolbar { min-height: 3.1rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v18-data-table .data-table-toolbar button { height: 2.05rem; font-size: 0.5rem; }
.gcp-v18-data-table table { font-size: 0.51rem; }
.gcp-v18-data-table th { color: var(--gcp-ink-soft); font-size: 0.43rem; text-transform: uppercase; letter-spacing: 0.06em; }
.gcp-v18-data-table td { min-width: 5.5rem; }
.gcp-v18-job-name { min-width: 11.5rem; display: grid; gap: 0.13rem; }
.gcp-v18-job-name strong { overflow: hidden; font-size: 0.53rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-job-name small { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.43rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-table-link { color: #102a45; font-weight: 800; text-decoration: none; }
.gcp-v18-row-action { display: inline-flex; align-items: center; gap: 0.25rem; color: #102a45; font-size: 0.47rem; font-weight: 800; text-decoration: none; }
.gcp-v18-row-action svg { width: 0.65rem; height: 0.65rem; }
.gcp-v18-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.45rem; border: 1px solid var(--gcp-line); border-radius: 999px; color: var(--gcp-ink-soft); background: rgba(245, 247, 248, 0.9); font-size: 0.44rem; font-weight: 770; white-space: nowrap; }
.gcp-v18-status i,
.gcp-v18-readiness-list i,
.gcp-v18-review-list i { width: 0.38rem; height: 0.38rem; flex: 0 0 auto; border-radius: 50%; background: #687782; }
.gcp-v18-status.is-healthy { color: #17653b; border-color: rgba(23, 101, 59, 0.2); background: rgba(231, 246, 237, 0.8); }
.gcp-v18-status.is-warning { color: #926307; border-color: rgba(182, 125, 17, 0.2); background: rgba(253, 246, 226, 0.88); }
.gcp-v18-status.is-critical { color: #a02828; border-color: rgba(180, 46, 46, 0.2); background: rgba(255, 238, 238, 0.88); }
.gcp-v18-status.is-healthy i,
.gcp-v18-readiness-list i.is-healthy,
.gcp-v18-review-list i.is-healthy { background: #2e8b57; }
.gcp-v18-status.is-warning i,
.gcp-v18-readiness-list i.is-warning,
.gcp-v18-review-list i.is-warning { background: #d29a20; }
.gcp-v18-status.is-critical i,
.gcp-v18-readiness-list i.is-critical,
.gcp-v18-review-list i.is-critical { background: #cf3737; }

.gcp-v18-page .gcp-v18-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.gcp-v18-page .gcp-v18-summary-card { min-width: 0; overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 0.78rem; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0.65rem 2rem rgba(20, 48, 72, 0.04); }
.gcp-v18-page .gcp-v18-summary-card > header { min-height: 3.35rem; justify-content: space-between; padding: 0.72rem 0.85rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v18-page .gcp-v18-summary-card > header strong { font-size: 0.62rem; }
.gcp-v18-page .gcp-v18-summary-card > header a,
.gcp-v18-page .gcp-v18-summary-card > header span { display: inline-flex; align-items: center; gap: 0.25rem; color: #102a45; font-size: 0.46rem; font-weight: 780; text-decoration: none; }
.gcp-v18-page .gcp-v18-summary-card > header svg { width: 0.67rem; height: 0.67rem; color: #102a45; }

.gcp-v18-readiness-list { display: grid; padding: 0.35rem 0.82rem 0.7rem; }
.gcp-v18-readiness-list button { display: grid; gap: 0.32rem; padding: 0.55rem 0; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v18-readiness-list button:first-child { border-top: 0; }
.gcp-v18-readiness-list button > span { display: grid; grid-template-columns: 0.45rem minmax(0, 1fr) auto; align-items: center; gap: 0.38rem; }
.gcp-v18-readiness-list small { font-size: 0.48rem; font-weight: 720; }
.gcp-v18-readiness-list b { font-size: 0.49rem; }
.gcp-v18-readiness-list progress { margin: 0; }

.gcp-v18-workload-list { display: grid; padding: 0.35rem 0.82rem 0.7rem; }
.gcp-v18-workload-list > a { min-height: 3rem; display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(4rem, 0.75fr) auto; align-items: center; gap: 0.65rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); text-decoration: none; }
.gcp-v18-workload-list > a:first-child { border-top: 0; }
.gcp-v18-workload-list span { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v18-workload-list strong { overflow: hidden; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-workload-list small { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.4rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-workload-list progress { margin: 0; }
.gcp-v18-workload-list b { font-size: 0.49rem; }

.gcp-v18-review-list { display: grid; }
.gcp-v18-review-list > a { min-height: 3.2rem; display: grid; grid-template-columns: 0.45rem minmax(0, 1fr) 0.7rem; align-items: center; gap: 0.55rem; padding: 0.55rem 0.82rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); text-decoration: none; }
.gcp-v18-review-list > a:first-child { border-top: 0; }
.gcp-v18-review-list span { min-width: 0; display: grid; gap: 0.12rem; }
.gcp-v18-review-list strong { overflow: hidden; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-review-list small { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.4rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-review-list > a > svg { width: 0.67rem; height: 0.67rem; color: var(--gcp-ink-soft); }
.gcp-v18-review-list > p,
.gcp-v18-workload-list > p { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 1rem; color: var(--gcp-ink-soft); font-size: 0.47rem; }
.gcp-v18-review-list > p svg { width: 0.85rem; height: 0.85rem; color: var(--gcp-green); }

.gcp-v18-tools {
  overflow: hidden;
  margin-top: 0.75rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.65rem 2rem rgba(20, 48, 72, 0.04);
}
.gcp-v18-tools > header { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.72rem 0.9rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v18-tools > header > span { display: grid; gap: 0.1rem; }
.gcp-v18-tools > header strong { font-size: 0.61rem; }
.gcp-v18-tools > header small { color: var(--gcp-ink-soft); font-size: 0.44rem; }
.gcp-v18-tools > header > a { display: inline-flex; align-items: center; gap: 0.3rem; color: #102a45; font-size: 0.47rem; font-weight: 800; text-decoration: none; }
.gcp-v18-tools > header > a svg { width: 0.68rem; height: 0.68rem; }
.gcp-v18-tools > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0.6rem; }
.gcp-v18-tools > div > a { min-width: 0; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: 0.55rem; min-height: 4.3rem; padding: 0.65rem 0.78rem; border-left: 1px solid var(--gcp-line); color: var(--gcp-ink); text-decoration: none; }
.gcp-v18-tools > div > a:first-child { border-left: 0; }
.gcp-v18-tools > div > a > svg { width: 1.05rem; height: 1.05rem; color: #102a45; }
.gcp-v18-tools > div > a > span { min-width: 0; display: grid; gap: 0.12rem; }
.gcp-v18-tools > div strong { overflow: hidden; font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v18-tools > div small { color: var(--gcp-ink-soft); font-size: 0.4rem; line-height: 1.35; }

html.dark .gcp-v18-page,
html.dark .gcp-v18-page .gcp-v18-hero,
html.dark .gcp-v18-stat-grid,
html.dark .gcp-v18-work-panel,
html.dark .gcp-v18-page .gcp-v18-summary-card,
html.dark .gcp-v18-tools { background-color: #0b213b; }
html.dark .gcp-v18-page .gcp-v18-hero::after { background: linear-gradient(90deg, #0b213b 0%, rgba(11, 33, 59, 0.97) 43%, rgba(11, 33, 59, 0.68) 65%, transparent 90%); }
html.dark .gcp-v18-stat-grid > button.is-active,
html.dark .gcp-v18-page .gcp-v18-filter-row { background: #102e4d; }

@media (max-width: 1180px) {
  .gcp-v18-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v18-stat-grid > button:nth-child(4) { border-left: 0; }
  .gcp-v18-stat-grid > button:nth-child(n + 4) { border-top: 1px solid var(--gcp-line); }
  .gcp-v18-page .gcp-v18-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v18-page .gcp-v18-summary-card:last-child { grid-column: 1 / -1; }
  .gcp-v18-tools > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v18-tools > div > a:nth-child(4) { border-left: 0; border-top: 1px solid var(--gcp-line); }
  .gcp-v18-tools > div > a:nth-child(5) { border-top: 1px solid var(--gcp-line); }
}

@media (max-width: 820px) {
  .gcp-v18-page .gcp-v18-canvas { width: calc(100% - 1rem); padding-top: 0.5rem; }
  .gcp-v18-page .gcp-v18-hero { min-height: 29rem; }
  .gcp-v18-page .gcp-v18-hero > img { width: 100%; height: 57%; top: auto; bottom: -1%; object-position: 72% 48%; opacity: 0.82; }
  .gcp-v18-page .gcp-v18-hero::after { background: linear-gradient(180deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.97) 51%, rgba(255, 255, 255, 0.28) 84%, transparent 100%); }
  .gcp-v18-page .gcp-v18-hero > div { width: 100%; min-height: 29rem; justify-content: flex-start; padding: 1.35rem 1rem 13.5rem; }
  .gcp-v18-page .gcp-v18-hero h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .gcp-v18-page .gcp-v18-hero nav { width: 100%; }
  .gcp-v18-page .gcp-v18-hero nav a { flex: 1; }
  html.dark .gcp-v18-page .gcp-v18-hero::after { background: linear-gradient(180deg, #0b213b 0%, rgba(11, 33, 59, 0.96) 54%, rgba(11, 33, 59, 0.35) 86%, transparent 100%); }
  .gcp-v18-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v18-stat-grid > button { min-height: 6.7rem; border-top: 1px solid var(--gcp-line); }
  .gcp-v18-stat-grid > button:nth-child(odd) { border-left: 0; }
  .gcp-v18-stat-grid > button:first-child,
  .gcp-v18-stat-grid > button:nth-child(2) { border-top: 0; }
  .gcp-v18-stat-grid > button:nth-child(4) { border-left: 1px solid var(--gcp-line); }
  .gcp-v18-page .gcp-v18-filter-row { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-page .gcp-v18-filter-row > span { grid-column: auto; }
  .gcp-v18-page .gcp-v18-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-page .gcp-v18-summary-card:last-child { grid-column: auto; }
  .gcp-v18-tools > div { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .gcp-v18-tools > div > a,
  .gcp-v18-tools > div > a:nth-child(4),
  .gcp-v18-tools > div > a:nth-child(5) { min-height: 4rem; border-top: 1px solid var(--gcp-line); border-left: 0; padding-inline: 0.9rem; }
  .gcp-v18-tools > div > a:first-child { border-top: 0; }
  .gcp-v18-data-table { padding: 0.55rem; }
  .gcp-v18-data-table .data-table-mobile-card { border-color: var(--gcp-line); box-shadow: none; }
  .gcp-v18-data-table .data-table-mobile-card > div > div { gap: 0.55rem; }
}

@media (max-width: 480px) {
  .gcp-v18-page .gcp-v18-canvas { max-width: 100%; padding-bottom: 4rem; }
  .gcp-v18-page .gcp-v18-hero { min-height: 31rem; border-radius: 0.72rem; }
  .gcp-v18-page .gcp-v18-hero > div { min-height: 31rem; padding-bottom: 14rem; }
  .gcp-v18-page .gcp-v18-hero > div > span { font-size: 0.64rem; }
  .gcp-v18-page .gcp-v18-hero nav { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-stat-grid { border-radius: 0.65rem; }
  .gcp-v18-stat-grid > button { min-height: 6.25rem; padding: 0.78rem; }
  .gcp-v18-stat-grid > button strong { font-size: 1.65rem; }
  .gcp-v18-stat-grid > button small { font-size: 0.5rem; }
  .gcp-v18-page .gcp-v18-filter-row { padding: 0.55rem; }
  .gcp-v18-tools > header { align-items: flex-start; flex-direction: column; }
  .gcp-v18-workload-list > a { grid-template-columns: minmax(0, 1fr) 3.5rem auto; }
}

/* ========================================================================== 
   Genie Control Panel — owner-supplied exact mockup artwork (2026-08-31)
   These rules place the supplied 4x pixel-replicated PNGs without extra fades,
   colour blending, masks or generated crops.
   ========================================================================== */

.gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art picture {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  width: var(--gcp-exact-hero-width);
  height: var(--gcp-exact-hero-height);
  max-width: 100%;
  transform: translateY(-50%);
}

.gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art img,
.page-artwork-decoration.is-pixel-exact img,
.gcp-settings-security-art img {
  -webkit-mask-image: none;
  mask-image: none;
  image-rendering: auto;
}

.gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art img {
  object-fit: fill;
}

.gcp-stage1-hero[data-artwork-page="overview"] {
  --gcp-exact-hero-width: 508px;
  --gcp-exact-hero-height: 298px;
}

.gcp-stage1-hero[data-artwork-page="tasksReviewsList"] {
  --gcp-exact-hero-width: 552px;
  --gcp-exact-hero-height: 284px;
}

.gcp-stage1-hero[data-artwork-page="calendarVariantA"] {
  --gcp-exact-hero-width: 562px;
  --gcp-exact-hero-height: 282px;
}

.gcp-stage1-hero[data-artwork-page="calendarVariantB"] {
  --gcp-exact-hero-width: 524px;
  --gcp-exact-hero-height: 292px;
}

.gcp-stage1-hero[data-artwork-page="automationsVariantA"] {
  --gcp-exact-hero-width: 556px;
  --gcp-exact-hero-height: 204px;
}

.gcp-stage1-hero[data-artwork-page="settings"] {
  --gcp-exact-hero-width: 556px;
  --gcp-exact-hero-height: 304px;
}

.gcp-stage1-hero[data-artwork-page="systemStatus"] {
  --gcp-exact-hero-width: 550px;
  --gcp-exact-hero-height: 260px;
}

.gcp-stage1-hero[data-artwork-page="automationsVariantB"] {
  --gcp-exact-hero-width: 528px;
  --gcp-exact-hero-height: 296px;
}

.gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"] {
  height: 650px;
}

[data-control-panel-page="settings"] .gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"],
[data-control-panel-page="calendarVariantB"] .gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"],
[data-control-panel-page="automationsVariantB"] .gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"],
[data-control-panel-page="automationBuilder"] .gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"],
[data-control-panel-page="reportsPerformanceOverview"] .gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"] {
  height: 640px;
}

.gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"] img,
.gcp-stage1-mobile-sidebar-art[data-artwork-fidelity="pixel-exact"] img {
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: fill;
}

.gcp-stage1-sidebar-art[data-artwork-fidelity="pixel-exact"]::after {
  content: none;
}

.gcp-stage1-mobile-sidebar-art[data-artwork-fidelity="pixel-exact"] {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-artwork-decoration.is-pixel-exact {
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

.gcp-exact-decoration--tasks-bottom {
  right: -8px;
  bottom: -18px;
  width: 148px;
  height: 210px;
}

.gcp-exact-decoration--calendar-bottom {
  right: -10px;
  bottom: -16px;
  width: 194px;
  height: 156px;
}

.gcp-exact-decoration--calendar-bamboo {
  right: -8px;
  bottom: -72px;
  width: 102px;
  height: 390px;
}

.gcp-exact-decoration--system-bamboo {
  right: -8px;
  bottom: -28px;
  width: 146px;
  height: 224px;
}

.gcp-exact-decoration--system-strip {
  left: 0;
  bottom: 0;
  width: 180px;
  height: 40px;
}

.gcp-exact-decoration--automations-bamboo {
  right: -8px;
  bottom: -30px;
  width: 146px;
  height: 228px;
}

.gcp-settings-security-art {
  display: block;
  width: 125px;
  height: 144px;
  overflow: hidden;
}

.gcp-settings-security-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@media (max-width: 767px) {
  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art picture {
    top: var(--gcp-space-4);
    width: min(var(--gcp-exact-hero-width), 92vw);
    height: auto;
    aspect-ratio: var(--gcp-exact-hero-width) / var(--gcp-exact-hero-height);
    transform: none;
  }

  .gcp-stage1-mobile-sidebar-art[data-artwork-fidelity="pixel-exact"] img {
    object-fit: cover;
  }

  .gcp-settings-security-art {
    width: 96px;
    height: auto;
    aspect-ratio: 125 / 144;
  }
}

/* ========================================================================== 
   Genie Control Panel — refined Knowledge hubs and Calendar (v20)
   ========================================================================== */

.gcp-v20-hubs-hero {
  position: relative;
  grid-template-columns: minmax(24rem, 0.92fr) minmax(32rem, 1.08fr);
  min-height: 21rem;
  padding-bottom: 4.8rem;
  border-radius: 1rem;
}

.gcp-v20-hubs-hero > div { z-index: 2; padding: 2.1rem 2.2rem 1.7rem; }
.gcp-v20-hubs-hero > div > p:not(.gcp-v8-eyebrow) { max-width: 33rem; }
.gcp-v20-hubs-hero > img { min-height: 16.2rem; object-position: 54% 48%; }
.gcp-v20-hubs-hero > nav,
.gcp-v20-hubs-hero nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; }
.gcp-v20-hubs-hero nav a {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.58rem 0.82rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.45rem;
  color: var(--gcp-ink);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.62rem;
  font-weight: 820;
  text-decoration: none;
}
.gcp-v20-hubs-hero nav a:first-child { color: #fff; border-color: #102a45; background: #102a45; }
.gcp-v20-hubs-hero nav svg { width: 0.75rem; height: 0.75rem; }
.gcp-v20-hubs-hero > dl {
  position: absolute;
  z-index: 4;
  right: 1rem;
  bottom: 0.8rem;
  left: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 198, 202, 0.78);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.89);
  box-shadow: 0 0.6rem 1.6rem rgba(18, 60, 99, 0.07);
}
.gcp-v20-hubs-hero > dl > div { min-width: 0; padding: 0.7rem 0.85rem; border-left: 1px solid rgba(190, 198, 202, 0.76); }
.gcp-v20-hubs-hero > dl > div:first-child { border-left: 0; }
.gcp-v20-hubs-hero dt { color: var(--gcp-ink-soft); font-size: 0.46rem; font-weight: 780; }
.gcp-v20-hubs-hero dd { margin: 0.12rem 0 0; overflow: hidden; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.15rem; font-weight: 610; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v20-hubs-hero dl small { display: block; margin-top: 0.12rem; color: var(--gcp-ink-soft); font-size: 0.4rem; }

.gcp-v20-learning-route,
.gcp-v20-hub-status-grid > article,
.gcp-v20-hub-support-grid > article {
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.82rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 0.7rem 2rem rgba(20, 48, 72, 0.04);
}
.gcp-v20-learning-route { margin-top: 0.85rem; padding: 0.8rem 0.9rem 0.7rem; scroll-margin-top: 5rem; }
.gcp-v20-learning-route > header { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.gcp-v20-learning-route > header > span { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 0.65rem; color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); }
.gcp-v20-learning-route > header > span svg { width: 1.1rem; height: 1.1rem; }
.gcp-v20-learning-route h2,
.gcp-v20-hub-status-grid h2,
.gcp-v20-hub-support-grid h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.25rem; font-weight: 600; line-height: 1.08; }
.gcp-v20-learning-route > header p:not(.gcp-v8-eyebrow),
.gcp-v20-hub-status-grid header p:not(.gcp-v8-eyebrow),
.gcp-v20-hub-support-grid header p:not(.gcp-v8-eyebrow) { margin: 0.18rem 0 0; color: var(--gcp-ink-soft); font-size: 0.48rem; line-height: 1.35; }
.gcp-v20-learning-route > header > b,
.gcp-v20-hub-status-grid header > b { padding: 0.3rem 0.5rem; border-radius: 999px; font-size: 0.45rem; text-transform: capitalize; }
.gcp-v20-learning-route .is-active,
.gcp-v20-hub-status-grid .is-active { color: var(--gcp-green); background: var(--gcp-green-pale); }
.gcp-v20-learning-route .is-paused,
.gcp-v20-hub-status-grid .is-paused { color: var(--gcp-gold-deep); background: var(--gcp-gold-pale); }
.gcp-v20-learning-route > ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.42rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.gcp-v20-learning-route > ol > li { position: relative; min-height: 6rem; padding: 0.62rem; border: 1px solid var(--gcp-line); border-radius: 0.58rem; background: rgba(248, 250, 251, 0.86); }
.gcp-v20-learning-route > ol > li > span { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; margin-bottom: 0.4rem; border-radius: 50%; color: #102a45; background: #e6ebf0; font-size: 0.45rem; font-weight: 850; }
.gcp-v20-learning-route > ol strong { display: block; font-size: 0.52rem; }
.gcp-v20-learning-route > ol small { display: block; margin-top: 0.08rem; color: var(--gcp-gold-deep); font-size: 0.4rem; font-weight: 760; }
.gcp-v20-learning-route > ol p { margin: 0.35rem 0 0; color: var(--gcp-ink-soft); font-size: 0.42rem; line-height: 1.35; }
.gcp-v20-learning-route > footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.65rem; padding: 0.55rem 0.2rem 0; border-top: 1px solid var(--gcp-line); }
.gcp-v20-learning-route > footer > span { display: flex; align-items: center; gap: 0.35rem; color: var(--gcp-ink-soft); font-size: 0.43rem; }
.gcp-v20-learning-route > footer > span svg { width: 0.72rem; height: 0.72rem; color: #102a45; }
.gcp-v20-learning-route > footer a { display: inline-flex; align-items: center; gap: 0.3rem; color: #102a45; font-size: 0.44rem; font-weight: 800; text-decoration: none; }
.gcp-v20-learning-route > footer a svg { width: 0.66rem; height: 0.66rem; }

.gcp-v20-hub-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.gcp-v20-hub-status-grid > article > header,
.gcp-v20-hub-support-grid > article > header { min-height: 4.7rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v20-hub-status-grid > article > div { display: grid; }
.gcp-v20-hub-status-grid > article > div > a { min-height: 3.55rem; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto 0.7rem; align-items: center; gap: 0.5rem; padding: 0.52rem 0.75rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); text-decoration: none; }
.gcp-v20-hub-status-grid > article > div > a:first-child { border-top: 0; }
.gcp-v20-hub-status-grid > article > div > a > span:first-child { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 0.45rem; color: #102a45; background: #eef4f7; }
.gcp-v20-hub-status-grid > article > div > a > span:first-child svg { width: 0.75rem; height: 0.75rem; }
.gcp-v20-hub-status-grid > article > div > a > span:nth-child(2) { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v20-hub-status-grid strong { overflow: hidden; font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v20-hub-status-grid small { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.4rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v20-hub-status-grid em { color: var(--gcp-ink-soft); font-size: 0.42rem; font-style: normal; font-weight: 760; white-space: nowrap; }
.gcp-v20-hub-status-grid a > svg { width: 0.66rem; height: 0.66rem; color: var(--gcp-ink-soft); }

.gcp-v20-hub-support-grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 0.75rem; margin-top: 0.75rem; }
.gcp-v20-hub-support-grid > article > div { display: grid; }
.gcp-v20-hub-support-grid > article > div > button { min-height: 3.35rem; display: grid; grid-template-columns: minmax(0, 1fr) auto 0.7rem; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v20-hub-support-grid > article > div > button:first-child { border-top: 0; }
.gcp-v20-hub-support-grid button > span { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v20-hub-support-grid button strong { overflow: hidden; font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v20-hub-support-grid button small,
.gcp-v20-hub-support-grid button time { color: var(--gcp-ink-soft); font-size: 0.39rem; }
.gcp-v20-hub-support-grid button > svg { width: 0.64rem; height: 0.64rem; color: var(--gcp-ink-soft); }
.gcp-v20-hub-support-grid dl { margin: 0; padding: 0.35rem 0.8rem 0.55rem; }
.gcp-v20-hub-support-grid dl > div { min-height: 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; border-top: 1px solid var(--gcp-line); }
.gcp-v20-hub-support-grid dl > div:first-child { border-top: 0; }
.gcp-v20-hub-support-grid dt { color: var(--gcp-ink-soft); font-size: 0.43rem; }
.gcp-v20-hub-support-grid dd { margin: 0; font-size: 0.45rem; font-weight: 800; }
.gcp-v20-hub-support-grid > article > a { min-height: 2.8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.8rem; border-top: 1px solid var(--gcp-line); color: #102a45; font-size: 0.44rem; font-weight: 800; text-decoration: none; }
.gcp-v20-hub-support-grid > article > a svg { width: 0.66rem; height: 0.66rem; }
.gcp-v20-hub-support-empty { margin: 0; padding: 0.8rem; color: var(--gcp-ink-soft); font-size: 0.44rem; }
.gcp-v20-hub-support-grid > article.is-focus { color: #fff; border-color: #102a45; background: #0b2944; }
.gcp-v20-hub-support-grid > article.is-focus > header { border-bottom-color: rgba(255, 255, 255, 0.12); }
.gcp-v20-hub-support-grid > article.is-focus .gcp-v8-eyebrow { color: var(--gcp-gold); }
.gcp-v20-hub-support-grid > article.is-focus header p:not(.gcp-v8-eyebrow) { color: rgba(255, 255, 255, 0.7); }
.gcp-v20-hub-support-grid > article.is-focus > a { margin: 0.9rem; min-height: 2.7rem; justify-content: center; color: #102a45; border: 0; border-radius: 0.45rem; background: var(--gcp-gold); }
.gcp-v20-hub-support-grid > article.is-focus > small { display: flex; align-items: center; gap: 0.35rem; margin: 0 0.9rem 0.9rem; color: rgba(255, 255, 255, 0.62); font-size: 0.39rem; }
.gcp-v20-hub-support-grid > article.is-focus > small svg { width: 0.64rem; height: 0.64rem; }

.gcp-v18-calendar-page .gcp-v18-hero { min-height: 20.5rem; }
.gcp-v18-calendar-page .gcp-v18-hero > div { width: 56%; min-height: 20.5rem; padding: 2.25rem 2.4rem; }
.gcp-v18-calendar-page .gcp-v18-hero h1 { max-width: 40rem; font-size: clamp(2.75rem, 4vw, 4.65rem); }
.gcp-v18-calendar-page .gcp-v18-hero h1 em { display: block; margin-top: 0.1rem; color: #102a45; font-size: 0.8em; font-weight: 520; line-height: 0.96; }
.gcp-v18-calendar-page .gcp-v18-hero > div > span { max-width: 34rem; }
.gcp-v18-calendar-page .gcp-v18-hero nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.gcp-v18-calendar-page .gcp-v18-hero nav > a,
.gcp-v18-calendar-page .gcp-v18-hero nav > button { min-height: 2.55rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.58rem 0.82rem; border: 1px solid #102a45; border-radius: 0.48rem; color: #fff; background: #102a45; font-size: 0.56rem; font-weight: 800; text-decoration: none; }
.gcp-v18-calendar-page .gcp-v18-hero nav > button { color: #102a45; border-color: rgba(18, 60, 99, 0.26); background: rgba(255, 255, 255, 0.86); }
.gcp-v18-calendar-page .gcp-v18-hero nav svg { width: 0.75rem; height: 0.75rem; }
.gcp-v18-calendar-page .gcp-v18-working-grid { display: block; }
.gcp-v18-calendar-page .gcp-v18-calendar-surface { width: 100%; }
.gcp-v18-calendar-page .gcp-v18-week__head,
.gcp-v18-calendar-page .gcp-v18-week__body { min-width: 74rem; grid-template-columns: 4.2rem repeat(7, minmax(9.7rem, 1fr)); }

.gcp-v20-calendar-panels,
.gcp-v20-calendar-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.7rem; }
.gcp-v20-calendar-panels > article,
.gcp-v20-calendar-review-grid > section { min-width: 0; }
.gcp-v20-calendar-panels .gcp-v18-side-card > div { max-height: 18.4rem; overflow-y: auto; }
.gcp-v20-calendar-insights { overflow: hidden; border: 1px solid var(--gcp-line); border-radius: 0.72rem; background: var(--gcp-paper-bright); box-shadow: 0 8px 25px rgba(11, 31, 50, 0.035); }
.gcp-v20-calendar-insights > header { min-height: 3rem; display: flex; align-items: center; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v20-calendar-insights > header > div { display: flex; align-items: center; gap: 0.5rem; }
.gcp-v20-calendar-insights > header svg { width: 0.88rem; height: 0.88rem; color: var(--gcp-gold-deep); }
.gcp-v20-calendar-insights > header span { display: grid; gap: 0.08rem; }
.gcp-v20-calendar-insights > header strong { font-size: 0.56rem; }
.gcp-v20-calendar-insights > header small { color: var(--gcp-ink-soft); font-size: 0.45rem; }
.gcp-v20-calendar-insights dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.gcp-v20-calendar-insights dl > div { min-height: 6.35rem; display: grid; align-content: center; padding: 0.75rem; border-top: 1px solid var(--gcp-line); border-left: 1px solid var(--gcp-line); }
.gcp-v20-calendar-insights dl > div:nth-child(-n + 2) { border-top: 0; }
.gcp-v20-calendar-insights dl > div:nth-child(odd) { border-left: 0; }
.gcp-v20-calendar-insights dt { color: var(--gcp-ink-soft); font-size: 0.46rem; font-weight: 760; }
.gcp-v20-calendar-insights dd { margin: 0.14rem 0 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.55rem; font-weight: 620; }
.gcp-v20-calendar-insights dl small { margin-top: 0.12rem; color: var(--gcp-ink-soft); font-size: 0.4rem; }
.gcp-v20-calendar-insights .is-warning dd { color: var(--gcp-rose); }
.gcp-v18-calendar-page .gcp-v18-summary-grid { margin-top: 0.7rem; }

html.dark .gcp-v20-hubs-hero > dl,
html.dark .gcp-v20-learning-route,
html.dark .gcp-v20-hub-status-grid > article,
html.dark .gcp-v20-hub-support-grid > article:not(.is-focus),
html.dark .gcp-v20-calendar-insights { color: #f0eadf; background: #0b213b; }
html.dark .gcp-v20-hubs-hero > dl { background: rgba(11, 33, 59, 0.9); }
html.dark .gcp-v20-hubs-hero nav a:not(:first-child),
html.dark .gcp-v18-calendar-page .gcp-v18-hero nav > button { color: #f0eadf; background: rgba(11, 33, 59, 0.82); }

@media (max-width: 1180px) {
  .gcp-v20-hub-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v20-hub-support-grid > article.is-focus { grid-column: 1 / -1; }
  .gcp-v20-calendar-panels,
  .gcp-v20-calendar-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v20-calendar-panels > article:last-child,
  .gcp-v20-calendar-review-grid > section:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .gcp-v20-hubs-hero { grid-template-columns: minmax(0, 1fr); min-height: 34rem; padding-bottom: 9rem; }
  .gcp-v20-hubs-hero > div { min-height: 18.5rem; justify-content: flex-start; padding: 1.35rem 1rem; }
  .gcp-v20-hubs-hero > img { min-height: 16.5rem; object-position: 58% 48%; }
  .gcp-v20-hubs-hero > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v20-hubs-hero > dl > div:nth-child(odd) { border-left: 0; }
  .gcp-v20-hubs-hero > dl > div:nth-child(n + 3) { border-top: 1px solid rgba(190, 198, 202, 0.76); }
  .gcp-v20-learning-route > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v20-learning-route > ol > li:last-child { grid-column: 1 / -1; }
  .gcp-v20-hub-status-grid,
  .gcp-v20-hub-support-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v20-hub-support-grid > article.is-focus { grid-column: auto; }
  .gcp-v18-calendar-page .gcp-v18-hero { min-height: 32rem; }
  .gcp-v18-calendar-page .gcp-v18-hero > div { width: 100%; min-height: 32rem; padding: 1.35rem 1rem 15rem; }
  .gcp-v18-calendar-page .gcp-v18-hero nav { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .gcp-v20-calendar-panels,
  .gcp-v20-calendar-review-grid { grid-template-columns: minmax(0, 1fr); }
  .gcp-v20-calendar-panels > article:last-child,
  .gcp-v20-calendar-review-grid > section:last-child { grid-column: auto; }
}

@media (max-width: 480px) {
  .gcp-v20-hubs-hero { min-height: 37rem; padding-bottom: 10rem; }
  .gcp-v20-hubs-hero nav { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gcp-v20-hubs-hero nav a { width: 100%; }
  .gcp-v20-hubs-hero > dl { right: 0.55rem; bottom: 0.55rem; left: 0.55rem; }
  .gcp-v20-hubs-hero > dl > div { padding: 0.58rem; }
  .gcp-v20-hubs-hero dd { font-size: 0.96rem; }
  .gcp-v20-learning-route > header { grid-template-columns: 2.35rem minmax(0, 1fr); }
  .gcp-v20-learning-route > header > b { grid-column: 1 / -1; justify-self: start; }
  .gcp-v20-learning-route > ol { grid-template-columns: minmax(0, 1fr); }
  .gcp-v20-learning-route > ol > li:last-child { grid-column: auto; }
  .gcp-v20-learning-route > footer { align-items: flex-start; flex-direction: column; }
  .gcp-v20-hub-status-grid > article > div > a { grid-template-columns: 1.7rem minmax(0, 1fr) 0.7rem; }
  .gcp-v20-hub-status-grid em { display: none; }
  .gcp-v20-hub-support-grid > article > div > button { grid-template-columns: minmax(0, 1fr) 0.7rem; }
  .gcp-v20-hub-support-grid button time { display: none; }
  .gcp-v18-calendar-page .gcp-v18-hero { min-height: 34rem; }
  .gcp-v18-calendar-page .gcp-v18-hero > div { min-height: 34rem; padding-bottom: 16rem; }
  .gcp-v18-calendar-page .gcp-v18-hero h1 { font-size: clamp(2.45rem, 12.5vw, 3.25rem); }
  .gcp-v20-calendar-insights dl { grid-template-columns: minmax(0, 1fr); }
  .gcp-v20-calendar-insights dl > div,
  .gcp-v20-calendar-insights dl > div:nth-child(-n + 2) { min-height: 4.7rem; border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v20-calendar-insights dl > div:first-child { border-top: 0; }
}

/*
 * Genie Control Panel — private automation catalog (v21)
 * Reference-led layout with the real catalog, filters, and read-only actions.
 */
.gcp-v21-automations-page {
  min-height: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 95% 18%, rgba(18, 60, 99, 0.07), transparent 34rem),
    linear-gradient(180deg, rgba(248, 250, 251, 0.72), rgba(239, 244, 247, 0.78));
}

.gcp-v21-automation-canvas {
  width: min(100% - 2rem, 116rem);
  margin-inline: auto;
  padding: 1rem 0 5rem;
}

.gcp-v21-automation-hero {
  position: relative;
  min-height: 21rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.95rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 1rem 2.8rem rgba(18, 42, 63, 0.055);
}

.gcp-v21-automation-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.98) 37%, rgba(255, 255, 255, 0.37) 65%, rgba(255, 255, 255, 0.05) 100%);
  content: "";
}

.gcp-v21-automation-hero > img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 48%;
}

.gcp-v21-automation-hero > div {
  position: relative;
  z-index: 2;
  width: 50%;
  min-height: 21rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.2rem 2.35rem 3.4rem;
}

.gcp-v21-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  color: var(--gcp-gold-deep);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gcp-v21-eyebrow svg { width: 0.82rem; height: 0.82rem; }
.gcp-v21-automation-hero h1 {
  max-width: 37rem;
  margin: 0.55rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3rem, 4.5vw, 5.2rem);
  font-weight: 590;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.gcp-v21-automation-hero h1 em {
  display: block;
  margin-top: 0.24rem;
  color: #102a45;
  font-size: 0.78em;
  font-weight: 520;
}

.gcp-v21-automation-hero > div > p:not(.gcp-v21-eyebrow) {
  max-width: 33rem;
  margin: 1rem 0 0;
  color: var(--gcp-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.gcp-v21-automation-hero nav { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.gcp-v21-automation-hero nav a {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.58rem 0.86rem;
  border: 1px solid rgba(18, 60, 99, 0.24);
  border-radius: 0.48rem;
  color: #102a45;
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 820;
  text-decoration: none;
}
.gcp-v21-automation-hero nav a:first-child { color: #fff; border-color: #102a45; background: #102a45; }
.gcp-v21-automation-hero nav svg { width: 0.78rem; height: 0.78rem; }

.gcp-v21-automation-hero > aside {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 27rem;
  padding: 0.62rem 0.78rem;
  border: 1px solid rgba(196, 151, 61, 0.42);
  border-radius: 0.55rem;
  color: #fff;
  background: #0b2944;
}
.gcp-v21-automation-hero > aside > svg { width: 0.92rem; height: 0.92rem; color: var(--gcp-gold); }
.gcp-v21-automation-hero > aside > span { display: grid; gap: 0.08rem; }
.gcp-v21-automation-hero > aside strong { font-size: 0.63rem; }
.gcp-v21-automation-hero > aside small { color: rgba(255, 255, 255, 0.66); font-size: 0.51rem; line-height: 1.35; }

.gcp-v21-automation-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.gcp-v21-automation-metrics > button {
  position: relative;
  min-width: 0;
  min-height: 8.8rem;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 0.9rem 1rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.72rem;
  color: var(--gcp-ink);
  background: var(--gcp-paper-bright);
  text-align: left;
  box-shadow: 0 0.55rem 1.8rem rgba(18, 42, 63, 0.035);
}
.gcp-v21-automation-metrics > button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.18rem;
  background: transparent;
  content: "";
}
.gcp-v21-automation-metrics > button.is-selected { border-color: rgba(18, 60, 99, 0.6); box-shadow: inset 0 0 0 1px rgba(18, 60, 99, 0.12); }
.gcp-v21-automation-metrics > button.is-selected::after { background: #102a45; }
.gcp-v21-automation-metrics > button > span { position: absolute; top: 0.78rem; right: 0.78rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; color: #102a45; background: #edf3f8; }
.gcp-v21-automation-metrics > button.is-failed > span { color: var(--gcp-rose); background: var(--gcp-rose-pale); }
.gcp-v21-automation-metrics svg { width: 0.88rem; height: 0.88rem; }
.gcp-v21-automation-metrics small { max-width: calc(100% - 2rem); color: var(--gcp-ink-soft); font-size: 0.58rem; font-weight: 780; }
.gcp-v21-automation-metrics strong { margin-top: 0.38rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 2rem; font-weight: 610; line-height: 1; }
.gcp-v21-automation-metrics em { margin-top: 0.48rem; color: var(--gcp-ink-soft); font-size: 0.51rem; font-style: normal; }
.gcp-v21-automation-metrics > button.is-failed strong { color: var(--gcp-rose); }

.gcp-v21-automation-catalog,
.gcp-v21-automation-detail,
.gcp-v21-automation-support > article,
.gcp-v21-automation-footer {
  border: 1px solid var(--gcp-line);
  border-radius: 0.78rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 0.7rem 2rem rgba(18, 42, 63, 0.04);
}
.gcp-v21-automation-catalog { margin-top: 0.75rem; overflow: hidden; scroll-margin-top: 5rem; }
.gcp-v21-automation-catalog > header {
  min-height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--gcp-line);
}
.gcp-v21-automation-catalog > header h2,
.gcp-v21-automation-detail h2,
.gcp-v21-automation-support h2 {
  margin: 0.18rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 610;
  line-height: 1.05;
}
.gcp-v21-automation-catalog > header p:not(.gcp-v21-eyebrow),
.gcp-v21-automation-detail header p:not(.gcp-v21-eyebrow),
.gcp-v21-automation-support header p { margin: 0.2rem 0 0; color: var(--gcp-ink-soft); font-size: 0.59rem; }

.gcp-v21-automation-filters {
  display: grid;
  grid-template-columns: minmax(19rem, 1.55fr) repeat(3, minmax(10rem, 0.62fr));
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--gcp-line);
  background: rgba(246, 248, 249, 0.76);
}
.gcp-v21-automation-filters > label { position: relative; min-width: 0; }
.gcp-v21-automation-filters > label > svg { position: absolute; z-index: 1; top: 50%; left: 0.72rem; width: 0.78rem; height: 0.78rem; color: var(--gcp-ink-soft); transform: translateY(-50%); }
.gcp-v21-automation-filters > label input { padding-left: 2.1rem; }
.gcp-v21-automation-filters input,
.gcp-v21-automation-filters button { min-height: 2.55rem; border-color: var(--gcp-line); background: var(--gcp-paper-bright); }

.gcp-v21-automation-table { min-width: 0; padding: 0.72rem 0.8rem 0.85rem; }
.gcp-v21-automation-table [data-table-scroll-container] { border-color: var(--gcp-line); border-radius: 0.56rem; }
.gcp-v21-automation-table table { min-width: 68rem; }
.gcp-v21-automation-table thead { background: rgba(239, 244, 247, 0.7); }
.gcp-v21-automation-table th { color: var(--gcp-ink-soft); font-size: 0.53rem; letter-spacing: 0.045em; text-transform: uppercase; }
.gcp-v21-automation-table td { font-size: 0.61rem; vertical-align: middle; }
.gcp-v21-automation-name { min-width: 16rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.gcp-v21-automation-name > span:first-child { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--gcp-line); border-radius: 0.48rem; color: #102a45; background: #f4f7f9; }
.gcp-v21-automation-name svg { width: 0.82rem; height: 0.82rem; }
.gcp-v21-automation-name > span:last-child,
.gcp-v21-automation-workspace,
.gcp-v21-automation-route { min-width: 0; display: grid; gap: 0.08rem; }
.gcp-v21-automation-name strong,
.gcp-v21-automation-workspace strong,
.gcp-v21-automation-route strong { overflow: hidden; font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v21-automation-name small,
.gcp-v21-automation-workspace small,
.gcp-v21-automation-route small { overflow: hidden; max-width: 14rem; color: var(--gcp-ink-soft); font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v21-runner-state { display: flex; align-items: center; gap: 0.42rem; }
.gcp-v21-runner-state > svg { width: 0.82rem; height: 0.82rem; color: var(--gcp-ink-soft); }
.gcp-v21-runner-state.is-enabled > svg { color: var(--gcp-green); }
.gcp-v21-runner-state > span { display: grid; gap: 0.08rem; }
.gcp-v21-runner-state strong { font-size: 0.58rem; }
.gcp-v21-runner-state small { color: var(--gcp-ink-soft); font-size: 0.46rem; }

.gcp-v21-automation-detail { margin-top: 0.75rem; overflow: hidden; }
.gcp-v21-automation-detail > header { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v21-automation-detail > header > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 0.62rem; color: #102a45; background: #e6ebf0; }
.gcp-v21-automation-detail > header > span svg { width: 1rem; height: 1rem; }
.gcp-v21-automation-detail dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.gcp-v21-automation-detail dl > div { min-width: 0; padding: 0.72rem; border-left: 1px solid var(--gcp-line); }
.gcp-v21-automation-detail dl > div:first-child { border-left: 0; }
.gcp-v21-automation-detail dt { color: var(--gcp-ink-soft); font-size: 0.48rem; }
.gcp-v21-automation-detail dd { margin: 0.18rem 0 0; overflow: hidden; font-size: 0.58rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v21-automation-detail > p { margin: 0; padding: 0.72rem 0.9rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink-soft); font-size: 0.6rem; line-height: 1.48; }
.gcp-v21-automation-detail > p strong { color: var(--gcp-ink); }

.gcp-v21-automation-support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.75rem; }
.gcp-v21-automation-support > article { min-width: 0; overflow: hidden; }
.gcp-v21-automation-support > article > header { min-height: 4.5rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.72rem 0.82rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v21-automation-support > article > header > span { width: 2.15rem; height: 2.15rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 0.55rem; color: #102a45; background: #e6ebf0; }
.gcp-v21-automation-support > article > header svg { width: 0.88rem; height: 0.88rem; }

.gcp-v21-status-bars { display: grid; padding: 0.45rem 0.75rem 0.7rem; }
.gcp-v21-status-bars > button { min-height: 3.05rem; display: grid; align-content: center; gap: 0.35rem; padding: 0.42rem 0; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v21-status-bars > button:first-child { border-top: 0; }
.gcp-v21-status-bars > button > span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gcp-v21-status-bars strong { font-size: 0.56rem; text-transform: capitalize; }
.gcp-v21-status-bars small { color: var(--gcp-ink-soft); font-size: 0.5rem; font-weight: 800; }
.gcp-v21-status-bars i { height: 0.22rem; overflow: hidden; border-radius: 999px; background: #e1e7eb; }
.gcp-v21-status-bars i > span { display: block; height: 100%; border-radius: inherit; background: #102a45; }

.gcp-v21-readiness-list,
.gcp-v21-recorded-use { display: grid; }
.gcp-v21-readiness-list > button,
.gcp-v21-readiness-list > div { min-height: 3.5rem; display: grid; grid-template-columns: 1.65rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.52rem 0.72rem; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v21-readiness-list > :first-child { border-top: 0; }
.gcp-v21-readiness-list > :first-child > svg { color: var(--gcp-rose); }
.gcp-v21-readiness-list > * > svg { width: 0.86rem; height: 0.86rem; color: var(--gcp-gold-deep); }
.gcp-v21-readiness-list > * > span { min-width: 0; display: grid; gap: 0.1rem; }
.gcp-v21-readiness-list strong { font-size: 0.55rem; }
.gcp-v21-readiness-list small { color: var(--gcp-ink-soft); font-size: 0.46rem; line-height: 1.3; }
.gcp-v21-readiness-list b { font-family: "Fraunces Variable", Georgia, serif; font-size: 0.92rem; }

.gcp-v21-recorded-use > p { margin: 0; padding: 0.8rem; color: var(--gcp-ink-soft); font-size: 0.56rem; }
.gcp-v21-recorded-use > button { min-height: 3.55rem; display: grid; grid-template-columns: minmax(0, 1fr) 3rem 3.3rem 0.7rem; align-items: center; gap: 0.45rem; padding: 0.52rem 0.72rem; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v21-recorded-use > button:first-child { border-top: 0; }
.gcp-v21-recorded-use > button > span { min-width: 0; display: grid; gap: 0.08rem; }
.gcp-v21-recorded-use > button > span:first-child strong,
.gcp-v21-recorded-use > button > span:first-child small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v21-recorded-use strong { font-size: 0.54rem; }
.gcp-v21-recorded-use small { color: var(--gcp-ink-soft); font-size: 0.43rem; }
.gcp-v21-recorded-use b { font-size: 0.57rem; }
.gcp-v21-recorded-use > button > svg { width: 0.66rem; height: 0.66rem; color: var(--gcp-ink-soft); }

.gcp-v21-automation-canvas > #knowledge-hub-workflows { margin-top: 1.1rem; padding-top: 0.25rem; scroll-margin-top: 5rem; }
.gcp-v21-automation-footer { min-height: 3.2rem; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; padding: 0.65rem 0.8rem; color: var(--gcp-ink-soft); font-size: 0.55rem; }
.gcp-v21-automation-footer svg { width: 0.76rem; height: 0.76rem; color: var(--gcp-gold-deep); }
.gcp-v21-automation-footer strong { color: var(--gcp-ink); }

html.dark .gcp-v21-automation-hero,
html.dark .gcp-v21-automation-metrics > button,
html.dark .gcp-v21-automation-catalog,
html.dark .gcp-v21-automation-detail,
html.dark .gcp-v21-automation-support > article,
html.dark .gcp-v21-automation-footer { color: #f0eadf; background: #0b213b; }
html.dark .gcp-v21-automation-hero::after { background: linear-gradient(90deg, #0b213b 0%, rgba(11, 33, 59, 0.98) 39%, rgba(11, 33, 59, 0.45) 68%, rgba(11, 33, 59, 0.08) 100%); }
html.dark .gcp-v21-automation-hero h1 em { color: #d4a84e; }
html.dark .gcp-v21-automation-hero nav a:not(:first-child),
html.dark .gcp-v21-automation-filters,
html.dark .gcp-v21-automation-filters input,
html.dark .gcp-v21-automation-filters button { color: #f0eadf; background: #102e4d; }
html.dark .gcp-v21-automation-name > span:first-child,
html.dark .gcp-v21-automation-detail > header > span,
html.dark .gcp-v21-automation-support > article > header > span,
html.dark .gcp-v21-automation-metrics > button > span { color: #d4a84e; background: #153754; }
html.dark .gcp-v21-status-bars i { background: #1d3e59; }

@media (max-width: 1180px) {
  .gcp-v21-automation-hero > div { width: 58%; }
  .gcp-v21-automation-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v21-automation-metrics > button:nth-child(n + 4) { min-height: 7.6rem; }
  .gcp-v21-automation-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v21-automation-filters > label { grid-column: 1 / -1; }
  .gcp-v21-automation-detail dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v21-automation-detail dl > div:nth-child(4) { border-left: 0; }
  .gcp-v21-automation-detail dl > div:nth-child(n + 4) { border-top: 1px solid var(--gcp-line); }
  .gcp-v21-automation-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v21-automation-support > article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .gcp-v21-automation-canvas { width: min(100% - 1rem, 116rem); padding-top: 0.5rem; }
  .gcp-v21-automation-hero { min-height: 33rem; padding-bottom: 9rem; }
  .gcp-v21-automation-hero::after { background: linear-gradient(180deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.97) 46%, rgba(255, 255, 255, 0.28) 76%, transparent 100%); }
  .gcp-v21-automation-hero > img { top: auto; bottom: 0; width: 100%; height: 59%; object-position: 58% 48%; }
  .gcp-v21-automation-hero > div { width: 100%; min-height: 24rem; justify-content: flex-start; padding: 1.35rem 1rem 9.5rem; }
  .gcp-v21-automation-hero h1 { font-size: clamp(2.65rem, 11vw, 4rem); }
  .gcp-v21-automation-hero > aside { right: 0.7rem; bottom: 0.65rem; left: 0.7rem; max-width: none; }
  html.dark .gcp-v21-automation-hero::after { background: linear-gradient(180deg, #0b213b 0%, rgba(11, 33, 59, 0.97) 48%, rgba(11, 33, 59, 0.32) 78%, transparent 100%); }
  .gcp-v21-automation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v21-automation-metrics > button { min-height: 7.3rem; }
  .gcp-v21-automation-metrics > button:last-child { grid-column: 1 / -1; }
  .gcp-v21-automation-catalog > header { align-items: flex-start; flex-direction: column; }
  .gcp-v21-automation-filters { grid-template-columns: minmax(0, 1fr); }
  .gcp-v21-automation-filters > label { grid-column: auto; }
  .gcp-v21-automation-table table { min-width: 0; }
  .gcp-v21-automation-table .data-table-mobile-card { border-color: var(--gcp-line); box-shadow: none; }
  .gcp-v21-automation-name { min-width: 0; }
  .gcp-v21-automation-detail > header { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .gcp-v21-automation-detail > header > button { grid-column: 1 / -1; justify-self: start; }
  .gcp-v21-automation-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v21-automation-detail dl > div:nth-child(odd) { border-left: 0; }
  .gcp-v21-automation-detail dl > div:nth-child(n + 3) { border-top: 1px solid var(--gcp-line); }
  .gcp-v21-automation-support { grid-template-columns: minmax(0, 1fr); }
  .gcp-v21-automation-support > article:last-child { grid-column: auto; }
}

@media (max-width: 480px) {
  .gcp-v21-automation-hero { min-height: 35rem; padding-bottom: 10rem; }
  .gcp-v21-automation-hero > div { min-height: 25rem; padding-bottom: 10rem; }
  .gcp-v21-automation-hero h1 { font-size: clamp(2.5rem, 13vw, 3.2rem); }
  .gcp-v21-automation-hero nav { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .gcp-v21-automation-hero nav a { width: 100%; }
  .gcp-v21-automation-metrics > button { min-height: 6.6rem; padding: 0.7rem; }
  .gcp-v21-automation-metrics > button > span { top: 0.62rem; right: 0.62rem; width: 1.65rem; height: 1.65rem; }
  .gcp-v21-automation-metrics small { max-width: calc(100% - 1.6rem); font-size: 0.52rem; }
  .gcp-v21-automation-metrics strong { font-size: 1.55rem; }
  .gcp-v21-automation-metrics em { font-size: 0.45rem; }
  .gcp-v21-automation-table { padding: 0.55rem; }
  .gcp-v21-automation-detail dl { grid-template-columns: minmax(0, 1fr); }
  .gcp-v21-automation-detail dl > div,
  .gcp-v21-automation-detail dl > div:nth-child(odd) { border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v21-automation-detail dl > div:first-child { border-top: 0; }
  .gcp-v21-recorded-use > button { grid-template-columns: minmax(0, 1fr) 2.6rem 2.9rem 0.6rem; }
  .gcp-v21-automation-footer { align-items: flex-start; }
}

/* ========================================================================== 
   Genie Control Panel — responsive shared shell and remaining pages (v22)
   ========================================================================== */

.gcp-v22-topbar-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gcp-v22-mobile-menu { display: none; }

.gcp-v22-mobile-sheet {
  width: min(88vw, 22rem) !important;
  max-width: 22rem !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0 !important;
  color: var(--gcp-color-sidebar-text) !important;
  border-color: var(--gcp-color-sidebar-gold-border) !important;
  background: var(--gcp-color-sidebar-navy) !important;
  box-shadow: var(--gcp-shadow-raised) !important;
}

.gcp-v22-mobile-sheet::before {
  display: none;
}

.gcp-stage1-mobile-sidebar-art {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 62%;
  display: block;
  overflow: hidden;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 22%, var(--gcp-color-card-white) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 22%, var(--gcp-color-card-white) 100%);
  pointer-events: none;
}

.gcp-stage1-mobile-sidebar-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom;
}

.gcp-v22-mobile-sheet > button {
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--gcp-color-sidebar-text);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-divider);
  border-radius: 50%;
  opacity: 1;
}

.gcp-v22-mobile-sheet__header {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.15rem 1rem;
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-divider);
  text-align: left;
}

.gcp-v22-mobile-sheet__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.gcp-v22-mobile-sheet__brand > img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  object-position: 84% 50%;
  border: 2px solid var(--gcp-color-card-white);
  border-radius: 50%;
  background: var(--gcp-color-card-white);
}

.gcp-v22-mobile-sheet__brand > span { display: grid; gap: 0.2rem; }
.gcp-v22-mobile-sheet__brand strong { font-family: var(--gcp-font-display); font-size: 1.35rem; font-weight: 590; line-height: 1; }
.gcp-v22-mobile-sheet__brand small { color: var(--gcp-color-gold); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.gcp-v22-mobile-sheet__header > h2 { color: var(--gcp-color-sidebar-text); font-family: var(--gcp-font-display); font-size: 1.15rem; font-weight: 580; }
.gcp-v22-mobile-sheet__header > p { color: var(--gcp-color-sidebar-text-muted); font-size: 0.72rem; }

.gcp-v22-mobile-sheet__nav {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0.8rem 1rem;
}

.gcp-v22-mobile-sheet__nav section { margin-top: 1rem; }
.gcp-v22-mobile-sheet__nav section > p { margin: 0; padding: 0 0.7rem 0.4rem; color: var(--gcp-color-sidebar-group); font-size: 0.63rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.gcp-v22-mobile-sheet__nav a {
  min-height: 2.9rem;
  display: flex;
  align-items: center;
  gap: 0.68rem;
  margin-top: 0.16rem;
  padding: 0.62rem 0.72rem;
  color: var(--gcp-color-sidebar-text);
  border-radius: 0.64rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.gcp-v22-mobile-sheet__nav a svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: currentColor; }
.gcp-v22-mobile-sheet__nav a.is-active { color: var(--gcp-color-sidebar-navy-deep); background: var(--gcp-color-gold); }
.gcp-v22-mobile-sheet__nav a.is-active svg { color: var(--gcp-color-sidebar-navy-deep); }
.gcp-v22-mobile-sheet__nav a:focus-visible { outline: 2px solid var(--gcp-color-gold); outline-offset: 2px; }

.gcp-v22-mobile-private-note {
  position: relative;
  z-index: 1;
  min-height: 84px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--gcp-space-2);
  margin: 0 var(--gcp-space-3) var(--gcp-space-2);
  padding: var(--gcp-space-3);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-gold-border);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-sidebar-surface);
}

.gcp-v22-mobile-private-note > svg {
  width: var(--gcp-component-nav-icon);
  height: var(--gcp-component-nav-icon);
  color: var(--gcp-color-gold);
}

.gcp-v22-mobile-private-note > span {
  display: grid;
  gap: 2px;
}

.gcp-v22-mobile-private-note strong {
  color: var(--gcp-color-sidebar-text);
  font-size: var(--gcp-type-stat-label-size);
}

.gcp-v22-mobile-private-note small {
  color: var(--gcp-color-sidebar-text-muted);
  font-size: 9px;
  line-height: 13px;
}

.gcp-v22-mobile-sheet__owner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem 0.8rem 1rem;
  padding: 0.75rem;
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-gold-border);
  border-radius: 0.7rem;
  background: var(--gcp-color-sidebar-surface);
}

.gcp-v22-mobile-sheet__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.4rem;
  margin: 0 0.8rem;
  padding-top: 0.75rem;
  border-top: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-divider);
}

.gcp-v22-mobile-sheet__actions > div,
.gcp-v22-mobile-sheet__actions > button {
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.55rem;
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-gold-border);
  border-radius: 0.7rem;
  color: var(--gcp-color-sidebar-text);
  background: var(--gcp-color-sidebar-surface-soft);
  text-align: left;
}

.gcp-v22-mobile-sheet__actions > div > span,
.gcp-v22-mobile-sheet__actions > button > span { min-width: 0; display: grid; gap: 0.12rem; }
.gcp-v22-mobile-sheet__actions strong { color: var(--gcp-color-sidebar-text); font-size: 0.7rem; }
.gcp-v22-mobile-sheet__actions small { color: var(--gcp-color-sidebar-text-muted); font-size: 0.61rem; }
.gcp-v22-mobile-sheet__actions > button > svg { width: 1rem; height: 1rem; margin-inline: auto; color: var(--gcp-color-gold); }
.gcp-v22-mobile-theme-toggle { width: 2.35rem; height: 2.35rem; color: var(--gcp-color-gold); border: 0; border-radius: 0.55rem; background: var(--gcp-color-sidebar-hover); }
.gcp-v22-mobile-theme-toggle:hover { background: var(--gcp-color-sidebar-divider); }
.gcp-v22-mobile-theme-toggle:focus-visible,
.gcp-v22-mobile-sheet__actions > button:focus-visible { outline: 2px solid var(--gcp-color-gold); outline-offset: 2px; }

.gcp-v22-mobile-sheet__owner > span:first-child { width: 2rem; height: 2rem; display: grid; flex: 0 0 auto; place-items: center; border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-gold); border-radius: 50%; font-size: 0.7rem; font-weight: 850; }
.gcp-v22-mobile-sheet__owner > span:last-child { display: grid; gap: 0.12rem; }
.gcp-v22-mobile-sheet__owner strong { color: var(--gcp-color-sidebar-text); font-size: 0.7rem; }
.gcp-v22-mobile-sheet__owner small { color: var(--gcp-color-sidebar-text-muted); font-size: 0.61rem; }

.gcp-v18-page .gcp-v18-filter-row {
  grid-template-columns: minmax(16rem, 1.3fr) minmax(10rem, 0.72fr) minmax(10rem, 0.72fr) auto auto;
}

.gcp-v18-page .gcp-v18-filter-row > button:last-child {
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.gcp-v18-page .gcp-v18-filter-row > button:last-child svg { width: 0.75rem; height: 0.75rem; }

@media (max-width: 900px) {
  .gcp-v8-mobile-rail { display: none; }
  .gcp-v22-mobile-menu {
    width: 2.55rem;
    height: 2.55rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--gcp-ink);
    border: 1px solid var(--gcp-line);
    border-radius: 50%;
    background: var(--gcp-paper-bright);
  }
  .gcp-v22-mobile-menu svg { width: 1.05rem; height: 1.05rem; }
  .gcp-v22-mobile-menu:focus-visible { outline: 2px solid var(--gcp-gold-deep); outline-offset: 2px; }
  .gcp-v8-page-frame > .goh-sidenav:not(:empty) { top: 4.25rem; }
  .gcp-v8-surface, .gcp-v8-page-frame, .performance-ink-main { width: 100%; max-width: 100%; overflow-x: clip; }
}

@media (max-width: 820px) {
  .gcp-v18-page .gcp-v18-filter-row { grid-template-columns: minmax(0, 1fr); }
  .gcp-v18-page .gcp-v18-filter-row > button:last-child { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  .gcp-v8-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding-inline: 0.65rem;
  }
  .gcp-v22-topbar-context { gap: 0.55rem; }
  .gcp-v8-context { min-width: 0; }
  .gcp-v8-context strong { overflow: hidden; max-width: 8.6rem; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
  .gcp-v15-global-find { width: 2.5rem; min-height: 2.5rem; padding: 0; justify-content: center; }
  .gcp-v15-global-find > span { display: none; }

  .gcp-v18-page .gcp-v18-hero,
  .gcp-v21-automation-hero { box-shadow: 0 0.6rem 1.8rem rgba(18, 42, 63, 0.06); }
  .gcp-v18-page .gcp-v18-hero > div > p,
  .gcp-v21-eyebrow,
  .gcp-v8-eyebrow { font-size: 0.68rem; }
  .gcp-v18-page .gcp-v18-hero > div > span,
  .gcp-v21-automation-hero > div > p:not(.gcp-v21-eyebrow),
  .gcp-v20-hubs-hero > div > p:not(.gcp-v8-eyebrow) { font-size: 0.78rem; line-height: 1.55; }
  .gcp-v18-truth-lock { font-size: 0.67rem; }
  .gcp-v18-page .gcp-v18-hero nav a,
  .gcp-v21-automation-hero nav a,
  .gcp-v20-hubs-hero nav a { min-height: 2.85rem; font-size: 0.76rem; }

  .gcp-v18-stat-grid > button small,
  .gcp-v21-automation-metrics small { font-size: 0.69rem; }
  .gcp-v18-stat-grid > button em,
  .gcp-v21-automation-metrics em { font-size: 0.62rem; line-height: 1.3; }
  .gcp-v18-stat-grid > button strong,
  .gcp-v21-automation-metrics strong { font-size: 1.8rem; }

  .gcp-v18-page .gcp-v18-filter-row input,
  .gcp-v18-page .gcp-v18-filter-row button,
  .gcp-v21-automation-filters input,
  .gcp-v21-automation-filters button,
  .gcp-v8-search-panel input,
  .gcp-v8-search-panel button { min-height: 2.9rem; font-size: 1rem; }
  .gcp-v18-page .gcp-v18-filter-row > span { min-height: 2.9rem; font-size: 0.72rem; }

  .gcp-v18-page .gcp-v18-summary-card > header strong,
  .gcp-v18-tools > header strong,
  .gcp-v20-learning-route h2,
  .gcp-v20-hub-status-grid h2,
  .gcp-v20-hub-support-grid h2,
  .gcp-v21-automation-catalog h2,
  .gcp-v21-automation-support h2 { font-size: 1rem; }
  .gcp-v18-page .gcp-v18-summary-card > header a,
  .gcp-v18-page .gcp-v18-summary-card > header span,
  .gcp-v18-readiness-list small,
  .gcp-v18-workload-list strong,
  .gcp-v18-review-list strong,
  .gcp-v18-tools > header small,
  .gcp-v18-tools > header > a,
  .gcp-v18-tools > div strong { font-size: 0.7rem; }
  .gcp-v18-workload-list small,
  .gcp-v18-review-list small,
  .gcp-v18-tools > div small { font-size: 0.62rem; }

  .gcp-v20-hubs-hero { min-height: 0; padding-bottom: 0; }
  .gcp-v20-hubs-hero > div { order: 1; min-height: 0; }
  .gcp-v20-hubs-hero > img { order: 2; height: 13rem; min-height: 13rem; }
  .gcp-v20-hubs-hero > dl { position: relative; inset: auto; order: 3; margin: 0.6rem; }
  .gcp-v20-hubs-hero dt,
  .gcp-v20-hubs-hero dl small { font-size: 0.58rem; }
  .gcp-v20-hubs-hero dd { font-size: 1.05rem; }
  .gcp-v20-learning-route > header p:not(.gcp-v8-eyebrow),
  .gcp-v20-hub-status-grid header p:not(.gcp-v8-eyebrow),
  .gcp-v20-hub-support-grid header p:not(.gcp-v8-eyebrow),
  .gcp-v20-learning-route > ol p { font-size: 0.65rem; }
  .gcp-v20-learning-route > ol strong,
  .gcp-v20-hub-status-grid strong,
  .gcp-v20-hub-support-grid button strong { font-size: 0.72rem; }
  .gcp-v20-learning-route > ol small,
  .gcp-v20-hub-status-grid small,
  .gcp-v20-hub-support-grid button small,
  .gcp-v20-hub-support-grid button time,
  .gcp-v20-hub-support-empty { font-size: 0.61rem; }
  .gcp-v20-hub-support-grid dt,
  .gcp-v20-hub-support-grid dd,
  .gcp-v20-hub-support-grid > article > a,
  .gcp-v20-learning-route > footer > span,
  .gcp-v20-learning-route > footer a { font-size: 0.66rem; }

  .gcp-v21-automation-hero > aside small { font-size: 0.65rem; }
  .gcp-v21-automation-catalog > header p:not(.gcp-v21-eyebrow),
  .gcp-v21-automation-support header p { font-size: 0.68rem; }
  .gcp-v21-status-bars strong,
  .gcp-v21-readiness-list strong,
  .gcp-v21-recorded-use strong { font-size: 0.7rem; }
  .gcp-v21-status-bars small,
  .gcp-v21-readiness-list small,
  .gcp-v21-recorded-use small { font-size: 0.61rem; }
  .gcp-v21-automation-footer { font-size: 0.68rem; line-height: 1.4; }
}

@media (max-width: 480px) {
  .gcp-v18-stat-grid > button:last-child,
  .gcp-v21-automation-metrics > button:last-child { grid-column: 1 / -1; }
  .gcp-v18-stat-grid > button,
  .gcp-v21-automation-metrics > button { min-height: 7.2rem; }
  .gcp-v20-hubs-hero > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .gcp-v22-mobile-sheet, .gcp-v22-mobile-sheet * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Genie Control Panel — Connections (v23)
   ========================================================================== */

.gcp-v23-connections-page {
  min-height: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 92% 16%, rgba(18, 60, 99, 0.075), transparent 34rem),
    linear-gradient(180deg, rgba(248, 250, 251, 0.72), rgba(239, 244, 247, 0.78));
}

.gcp-v23-connection-canvas {
  width: min(100% - 2rem, 116rem);
  margin-inline: auto;
  padding: 1rem 0 5rem;
}

.gcp-v23-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  color: var(--gcp-gold-deep);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gcp-v23-eyebrow svg { width: 0.82rem; height: 0.82rem; }

.gcp-v23-connection-hero {
  position: relative;
  min-height: 21rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.95rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 1rem 2.8rem rgba(18, 42, 63, 0.055);
}

.gcp-v23-connection-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.97) 35%, rgba(255, 255, 255, 0.34) 62%, rgba(255, 255, 255, 0.04) 100%);
  content: "";
}

.gcp-v23-connection-hero > img {
  position: absolute;
  inset: 0 -2% 0 auto;
  width: 60%;
  height: 100%;
  object-fit: contain;
  object-position: 82% 52%;
}

.gcp-v23-connection-hero > div {
  position: relative;
  z-index: 2;
  width: 52%;
  min-height: 21rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.2rem 2.35rem 3.4rem;
}

.gcp-v23-connection-hero h1 {
  max-width: 37rem;
  margin: 0.55rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3rem, 4.5vw, 5.2rem);
  font-weight: 590;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.gcp-v23-connection-hero h1 em {
  display: block;
  margin-top: 0.24rem;
  color: #102a45;
  font-size: 0.72em;
  font-weight: 520;
}

.gcp-v23-connection-hero > div > p:not(.gcp-v23-eyebrow) {
  max-width: 33rem;
  margin: 1rem 0 0;
  color: var(--gcp-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.gcp-v23-connection-hero nav { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.gcp-v23-connection-hero nav a {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.58rem 0.86rem;
  border: 1px solid rgba(18, 60, 99, 0.24);
  border-radius: 0.48rem;
  color: #102a45;
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 820;
  text-decoration: none;
}
.gcp-v23-connection-hero nav a:first-child { color: #fff; border-color: #102a45; background: #102a45; }
.gcp-v23-connection-hero nav svg { width: 0.78rem; height: 0.78rem; }

.gcp-v23-connection-hero > aside {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 27rem;
  padding: 0.62rem 0.78rem;
  border: 1px solid rgba(196, 151, 61, 0.42);
  border-radius: 0.55rem;
  color: #fff;
  background: #0b2944;
}
.gcp-v23-connection-hero > aside > svg { width: 0.92rem; height: 0.92rem; color: var(--gcp-gold); }
.gcp-v23-connection-hero > aside > span { display: grid; gap: 0.08rem; }
.gcp-v23-connection-hero > aside strong { font-size: 0.63rem; }
.gcp-v23-connection-hero > aside small { color: rgba(255, 255, 255, 0.66); font-size: 0.51rem; line-height: 1.35; }

.gcp-v23-connection-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.gcp-v23-connection-metrics > article {
  position: relative;
  min-width: 0;
  min-height: 9.4rem;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 0.9rem 1rem;
  overflow: hidden;
  border: 1px solid var(--gcp-line);
  border-radius: 0.72rem;
  color: var(--gcp-ink);
  background: var(--gcp-paper-bright);
  box-shadow: 0 0.55rem 1.8rem rgba(18, 42, 63, 0.035);
}
.gcp-v23-connection-metrics > article > span:first-child { position: absolute; top: 0.78rem; right: 0.78rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; color: #102a45; background: #edf3f8; }
.gcp-v23-connection-metrics > article.is-untested > span:first-child { color: var(--gcp-gold-deep); background: #f8f1e2; }
.gcp-v23-connection-metrics svg { width: 0.88rem; height: 0.88rem; }
.gcp-v23-connection-metrics small { max-width: calc(100% - 2rem); color: var(--gcp-ink-soft); font-size: 0.58rem; font-weight: 780; }
.gcp-v23-connection-metrics strong { margin-top: 0.38rem; font-family: "Fraunces Variable", Georgia, serif; font-size: 2rem; font-weight: 610; line-height: 1; }
.gcp-v23-connection-metrics em { margin-top: 0.42rem; color: var(--gcp-ink-soft); font-size: 0.51rem; font-style: normal; line-height: 1.35; }

.gcp-v23-spark { width: 100%; height: 1.5rem; display: flex; align-items: flex-end; gap: 0.14rem; margin-top: 0.62rem; }
.gcp-v23-spark > i { flex: 1 1 0; min-width: 0; min-height: 0.18rem; border-radius: 0.1rem 0.1rem 0 0; background: rgba(18, 60, 99, 0.28); }
.gcp-v23-connection-metrics > article.is-untested .gcp-v23-spark > i { background: rgba(196, 151, 61, 0.42); }
.gcp-v23-connection-metrics > article.is-panel .gcp-v23-spark > i { background: rgba(47, 125, 91, 0.34); }

.gcp-v23-connection-directory,
.gcp-v23-connection-detail,
.gcp-v23-connection-support > article,
.gcp-v23-connection-footer {
  border: 1px solid var(--gcp-line);
  border-radius: 0.78rem;
  background: var(--gcp-paper-bright);
  box-shadow: 0 0.7rem 2rem rgba(18, 42, 63, 0.04);
}
.gcp-v23-connection-directory { margin-top: 0.75rem; overflow: hidden; scroll-margin-top: 5rem; }
.gcp-v23-connection-directory > header {
  min-height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--gcp-line);
}
.gcp-v23-connection-directory > header h2,
.gcp-v23-connection-detail h2,
.gcp-v23-connection-support h2 {
  margin: 0.18rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 610;
  line-height: 1.05;
}
.gcp-v23-connection-directory > header p:not(.gcp-v23-eyebrow),
.gcp-v23-connection-detail header p:not(.gcp-v23-eyebrow),
.gcp-v23-connection-support header p { margin: 0.2rem 0 0; color: var(--gcp-ink-soft); font-size: 0.59rem; }

.gcp-v23-connection-filters {
  display: grid;
  grid-template-columns: minmax(19rem, 1.7fr) repeat(2, minmax(11rem, 0.65fr));
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--gcp-line);
  background: rgba(246, 248, 249, 0.76);
}
.gcp-v23-connection-filters > label { position: relative; min-width: 0; }
.gcp-v23-connection-filters > label > svg { position: absolute; z-index: 1; top: 50%; left: 0.72rem; width: 0.78rem; height: 0.78rem; color: var(--gcp-ink-soft); transform: translateY(-50%); }
.gcp-v23-connection-filters > label input { padding-left: 2.1rem; }
.gcp-v23-connection-filters input,
.gcp-v23-connection-filters button { min-height: 2.55rem; border-color: var(--gcp-line); background: var(--gcp-paper-bright); }

.gcp-v23-connection-table { min-width: 0; padding: 0.72rem 0.8rem 0.85rem; }
.gcp-v23-connection-table [data-table-scroll-container] { border-color: var(--gcp-line); border-radius: 0.56rem; }
.gcp-v23-connection-table table { min-width: 62rem; }
.gcp-v23-connection-table thead { background: rgba(239, 244, 247, 0.7); }
.gcp-v23-connection-table th { color: var(--gcp-ink-soft); font-size: 0.53rem; letter-spacing: 0.045em; text-transform: uppercase; }
.gcp-v23-connection-table td { font-size: 0.61rem; vertical-align: middle; }

.gcp-v23-connection-name { min-width: 15rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.gcp-v23-connection-name > span:first-child { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--gcp-line); border-radius: 0.48rem; color: #102a45; background: #f4f7f9; }
.gcp-v23-connection-name svg { width: 0.82rem; height: 0.82rem; }
.gcp-v23-connection-name > span:last-child,
.gcp-v23-connection-workspace { min-width: 0; display: grid; gap: 0.08rem; }
.gcp-v23-connection-name strong,
.gcp-v23-connection-workspace strong { overflow: hidden; font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v23-connection-name small,
.gcp-v23-connection-workspace small { overflow: hidden; max-width: 14rem; color: var(--gcp-ink-soft); font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v23-connection-recorded { color: var(--gcp-ink-soft); font-size: 0.58rem; font-weight: 780; white-space: nowrap; }

.gcp-v23-condition { min-width: 12rem; display: grid; grid-template-columns: 0.55rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.gcp-v23-condition > i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gcp-gold); }
.gcp-v23-condition.is-checked > i { background: var(--gcp-green); }
.gcp-v23-condition > span { min-width: 0; display: grid; gap: 0.08rem; }
.gcp-v23-condition strong { font-size: 0.58rem; }
.gcp-v23-condition small { overflow: hidden; max-width: 15rem; color: var(--gcp-ink-soft); font-size: 0.46rem; text-overflow: ellipsis; white-space: nowrap; }

.gcp-v23-connection-detail { margin-top: 0.75rem; overflow: hidden; }
.gcp-v23-connection-detail > header { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v23-connection-detail > header > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 0.62rem; color: #102a45; background: #e6ebf0; }
.gcp-v23-connection-detail > header > span svg { width: 1rem; height: 1rem; }
.gcp-v23-connection-detail dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.gcp-v23-connection-detail dl > div { min-width: 0; padding: 0.72rem; border-left: 1px solid var(--gcp-line); }
.gcp-v23-connection-detail dl > div:first-child { border-left: 0; }
.gcp-v23-connection-detail dt { color: var(--gcp-ink-soft); font-size: 0.48rem; }
.gcp-v23-connection-detail dd { margin: 0.18rem 0 0; overflow: hidden; font-size: 0.58rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v23-connection-detail > p { margin: 0; padding: 0.72rem 0.9rem; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink-soft); font-size: 0.6rem; line-height: 1.48; }
.gcp-v23-connection-detail > p strong { color: var(--gcp-ink); }

.gcp-v23-connection-support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.75rem; }
.gcp-v23-connection-support > article { min-width: 0; overflow: hidden; }
.gcp-v23-connection-support > article > header { min-height: 4.5rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.72rem 0.82rem; border-bottom: 1px solid var(--gcp-line); }
.gcp-v23-connection-support > article > header > span { width: 2.15rem; height: 2.15rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 0.55rem; color: #102a45; background: #e6ebf0; }
.gcp-v23-connection-support > article > header svg { width: 0.88rem; height: 0.88rem; }
.gcp-v23-support-empty { margin: 0; padding: 0.9rem 0.82rem; color: var(--gcp-ink-soft); font-size: 0.56rem; line-height: 1.45; }

.gcp-v23-setup-split { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); align-items: center; gap: 0.7rem; padding: 0.85rem 0.82rem 1rem; }
.gcp-v23-setup-split svg { width: 8.4rem; height: 8.4rem; }
.gcp-v23-setup-split svg circle { fill: none; stroke-width: 3.6; }
.gcp-v23-setup-split svg .gcp-v23-donut-track { stroke: #e4eaee; }
.gcp-v23-setup-split svg text { fill: var(--gcp-ink); font-family: "Fraunces Variable", Georgia, serif; font-size: 0.42rem; font-weight: 620; text-anchor: middle; }
.gcp-v23-setup-split svg text.gcp-v23-donut-caption { fill: var(--gcp-ink-soft); font-family: inherit; font-size: 0.16rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gcp-v23-setup-split ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.gcp-v23-setup-split li { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; }
.gcp-v23-setup-split li > i { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.gcp-v23-setup-split li > span { overflow: hidden; color: var(--gcp-ink-soft); font-size: 0.53rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v23-setup-split li > b { font-family: "Fraunces Variable", Georgia, serif; font-size: 0.95rem; }

.gcp-v23-workspace-bars { display: grid; }
.gcp-v23-workspace-bars > button { min-height: 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0.3rem 0.5rem; padding: 0.52rem 0.72rem; border: 0; border-top: 1px solid var(--gcp-line); color: var(--gcp-ink); background: transparent; text-align: left; }
.gcp-v23-workspace-bars > button:first-child { border-top: 0; }
.gcp-v23-workspace-bars > button > span { min-width: 0; display: grid; gap: 0.08rem; }
.gcp-v23-workspace-bars strong { overflow: hidden; font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v23-workspace-bars small { color: var(--gcp-ink-soft); font-size: 0.46rem; }
.gcp-v23-workspace-bars b { font-family: "Fraunces Variable", Georgia, serif; font-size: 0.92rem; }
.gcp-v23-workspace-bars i { grid-column: 1 / -1; height: 0.22rem; overflow: hidden; border-radius: 999px; background: #e1e7eb; }
.gcp-v23-workspace-bars i > span { display: block; height: 100%; border-radius: inherit; background: #102a45; }

.gcp-v23-connection-guidance { position: relative; }
.gcp-v23-connection-guidance > img { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 62%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0.5; }
.gcp-v23-connection-guidance > div { position: relative; z-index: 1; display: grid; align-content: center; gap: 0.42rem; min-height: 14rem; padding: 1.1rem 1rem; background: linear-gradient(90deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.95) 46%, rgba(255, 255, 255, 0.45) 78%, rgba(255, 255, 255, 0.08) 100%); }
.gcp-v23-connection-guidance h2 { max-width: 15rem; }
.gcp-v23-connection-guidance p:not(.gcp-v23-eyebrow) { max-width: 17rem; margin: 0; color: var(--gcp-ink-soft); font-size: 0.57rem; line-height: 1.5; }
.gcp-v23-connection-guidance a { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; color: #102a45; font-size: 0.57rem; font-weight: 820; text-decoration: none; }
.gcp-v23-connection-guidance a svg { width: 0.72rem; height: 0.72rem; }

.gcp-v23-connection-secure {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.75rem;
  padding: 1.15rem 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(196, 151, 61, 0.34);
  border-radius: 0.78rem;
  color: #f2ece1;
  background:
    radial-gradient(circle at 12% 20%, rgba(196, 151, 61, 0.2), transparent 18rem),
    linear-gradient(120deg, #0a2440, #102a45);
}
.gcp-v23-connection-secure > div:first-child { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: 0.8rem; }
.gcp-v23-connection-secure > div:first-child > span { width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid rgba(196, 151, 61, 0.5); border-radius: 0.68rem; color: var(--gcp-gold); background: rgba(255, 255, 255, 0.06); }
.gcp-v23-connection-secure > div:first-child > span svg { width: 1.25rem; height: 1.25rem; }
.gcp-v23-connection-secure h2 { margin: 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.28rem; font-weight: 600; line-height: 1.1; }
.gcp-v23-connection-secure p { margin: 0.24rem 0 0; color: rgba(242, 236, 225, 0.68); font-size: 0.57rem; }
.gcp-v23-connection-secure ul { display: grid; gap: 0.48rem; margin: 0; padding: 0; list-style: none; }
.gcp-v23-connection-secure li { display: grid; grid-template-columns: 0.95rem minmax(0, 1fr); align-items: center; gap: 0.5rem; color: rgba(242, 236, 225, 0.86); font-size: 0.58rem; }
.gcp-v23-connection-secure li svg { width: 0.85rem; height: 0.85rem; color: var(--gcp-gold); }

.gcp-v23-connection-footer { min-height: 3.2rem; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; padding: 0.65rem 0.8rem; color: var(--gcp-ink-soft); font-size: 0.55rem; }
.gcp-v23-connection-footer svg { width: 0.76rem; height: 0.76rem; color: var(--gcp-gold-deep); }
.gcp-v23-connection-footer strong { color: var(--gcp-ink); }

html.dark .gcp-v23-connection-hero,
html.dark .gcp-v23-connection-metrics > article,
html.dark .gcp-v23-connection-directory,
html.dark .gcp-v23-connection-detail,
html.dark .gcp-v23-connection-support > article,
html.dark .gcp-v23-connection-footer { color: #f0eadf; background: #0b213b; }
html.dark .gcp-v23-connection-hero::after { background: linear-gradient(90deg, #0b213b 0%, rgba(11, 33, 59, 0.97) 37%, rgba(11, 33, 59, 0.42) 66%, rgba(11, 33, 59, 0.06) 100%); }
html.dark .gcp-v23-connection-hero h1 em { color: #d4a84e; }
html.dark .gcp-v23-connection-hero nav a:not(:first-child),
html.dark .gcp-v23-connection-filters,
html.dark .gcp-v23-connection-filters input,
html.dark .gcp-v23-connection-filters button { color: #f0eadf; background: #102e4d; }
html.dark .gcp-v23-connection-name > span:first-child,
html.dark .gcp-v23-connection-detail > header > span,
html.dark .gcp-v23-connection-support > article > header > span,
html.dark .gcp-v23-connection-metrics > article > span:first-child { color: #d4a84e; background: #153754; }
html.dark .gcp-v23-workspace-bars i,
html.dark .gcp-v23-setup-split svg .gcp-v23-donut-track { background: #1d3e59; stroke: #1d3e59; }
html.dark .gcp-v23-setup-split svg text { fill: #f0eadf; }
html.dark .gcp-v23-connection-guidance > div { background: linear-gradient(90deg, #0b213b 0%, rgba(11, 33, 59, 0.95) 48%, rgba(11, 33, 59, 0.5) 79%, rgba(11, 33, 59, 0.1) 100%); }
html.dark .gcp-v23-connection-guidance a { color: #d4a84e; }

@media (max-width: 1180px) {
  .gcp-v23-connection-hero > div { width: 60%; }
  .gcp-v23-connection-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v23-connection-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v23-connection-filters > label { grid-column: 1 / -1; }
  .gcp-v23-connection-detail dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gcp-v23-connection-detail dl > div:nth-child(4) { border-left: 0; }
  .gcp-v23-connection-detail dl > div:nth-child(n + 4) { border-top: 1px solid var(--gcp-line); }
  .gcp-v23-connection-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v23-connection-support > article:last-child { grid-column: 1 / -1; }
  .gcp-v23-connection-guidance > div { min-height: 11rem; }
}

@media (max-width: 820px) {
  .gcp-v23-connection-canvas { width: min(100% - 1rem, 116rem); padding-top: 0.5rem; }
  .gcp-v23-connection-hero { min-height: 33rem; padding-bottom: 9rem; }
  .gcp-v23-connection-hero::after { background: linear-gradient(180deg, var(--gcp-paper-bright) 0%, rgba(255, 255, 255, 0.96) 44%, rgba(255, 255, 255, 0.26) 74%, transparent 100%); }
  .gcp-v23-connection-hero > img { top: auto; right: 0; bottom: 0; width: 100%; height: 56%; object-position: 50% 52%; }
  .gcp-v23-connection-hero > div { width: 100%; min-height: 24rem; justify-content: flex-start; padding: 1.35rem 1rem 9.5rem; }
  .gcp-v23-connection-hero h1 { font-size: clamp(2.65rem, 11vw, 4rem); }
  .gcp-v23-connection-hero > aside { right: 0.7rem; bottom: 0.65rem; left: 0.7rem; max-width: none; }
  html.dark .gcp-v23-connection-hero::after { background: linear-gradient(180deg, #0b213b 0%, rgba(11, 33, 59, 0.96) 46%, rgba(11, 33, 59, 0.3) 76%, transparent 100%); }
  .gcp-v23-connection-metrics > article { min-height: 8.2rem; }
  .gcp-v23-connection-directory > header { align-items: flex-start; flex-direction: column; }
  .gcp-v23-connection-filters { grid-template-columns: minmax(0, 1fr); }
  .gcp-v23-connection-filters > label { grid-column: auto; }
  .gcp-v23-connection-table table { min-width: 0; }
  .gcp-v23-connection-table .data-table-mobile-card { border-color: var(--gcp-line); box-shadow: none; }
  .gcp-v23-connection-name { min-width: 0; }
  .gcp-v23-condition { min-width: 0; }
  .gcp-v23-condition small { max-width: none; white-space: normal; }
  .gcp-v23-connection-detail > header { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .gcp-v23-connection-detail > header > button { grid-column: 1 / -1; justify-self: start; }
  .gcp-v23-connection-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v23-connection-detail dl > div:nth-child(odd) { border-left: 0; }
  .gcp-v23-connection-detail dl > div:nth-child(n + 3) { border-top: 1px solid var(--gcp-line); }
  .gcp-v23-connection-support { grid-template-columns: minmax(0, 1fr); }
  .gcp-v23-connection-support > article:last-child { grid-column: auto; }
  .gcp-v23-connection-guidance > img { width: 100%; opacity: 0.32; }
  .gcp-v23-connection-guidance > div { min-height: 12rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 62%, rgba(255, 255, 255, 0.6) 100%); }
  html.dark .gcp-v23-connection-guidance > div { background: linear-gradient(180deg, rgba(11, 33, 59, 0.95) 0%, rgba(11, 33, 59, 0.88) 62%, rgba(11, 33, 59, 0.62) 100%); }
  .gcp-v23-connection-guidance h2,
  .gcp-v23-connection-guidance p:not(.gcp-v23-eyebrow) { max-width: none; }
  .gcp-v23-connection-secure { grid-template-columns: minmax(0, 1fr); gap: 0.95rem; }
}

@media (max-width: 480px) {
  .gcp-v23-connection-hero { min-height: 35rem; padding-bottom: 10rem; }
  .gcp-v23-connection-hero > div { min-height: 25rem; padding-bottom: 10rem; }
  .gcp-v23-connection-hero h1 { font-size: clamp(2.5rem, 13vw, 3.2rem); }
  .gcp-v23-connection-hero nav { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .gcp-v23-connection-hero nav a { width: 100%; }
  .gcp-v23-connection-metrics { grid-template-columns: minmax(0, 1fr); }
  .gcp-v23-connection-metrics > article { min-height: 7.4rem; padding: 0.7rem; }
  .gcp-v23-connection-metrics > article > span:first-child { top: 0.62rem; right: 0.62rem; width: 1.65rem; height: 1.65rem; }
  .gcp-v23-connection-metrics small { max-width: calc(100% - 1.6rem); font-size: 0.52rem; }
  .gcp-v23-connection-metrics strong { font-size: 1.7rem; }
  .gcp-v23-connection-metrics em { font-size: 0.46rem; }
  .gcp-v23-connection-table { padding: 0.55rem; }
  .gcp-v23-connection-detail dl { grid-template-columns: minmax(0, 1fr); }
  .gcp-v23-connection-detail dl > div,
  .gcp-v23-connection-detail dl > div:nth-child(odd) { border-top: 1px solid var(--gcp-line); border-left: 0; }
  .gcp-v23-connection-detail dl > div:first-child { border-top: 0; }
  .gcp-v23-setup-split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .gcp-v23-setup-split ul { width: 100%; }
  .gcp-v23-connection-footer { align-items: flex-start; }
}

/* ========================================================================== 
   Genie Control Panel — page artwork and desktop fidelity repair (v24)
   ========================================================================== */

/* The six main work areas keep separate visual identities without changing
   their records, controls, or client-specific artwork. */
[data-page-artwork="reports"] .reports-bbmoto-canvas:not(.reports-bbmoto-canvas--client) .performance-reporting-hero__art img {
  content: url('/img/ink/genie-performance.png');
  object-position: center;
  filter: saturate(1.16) contrast(1.08);
}

[data-page-artwork="tasks"] .gcp-v18-page .gcp-v18-hero > img {
  content: url('/img/knowledge-hubs/hero-fairy-wolf-narrow-valley.png');
  object-position: 68% 50%;
  filter: saturate(1.08) contrast(1.04);
}

/* The Calendar keeps every desktop day visible. At narrower desktop widths,
   the complete right rail moves below the week instead of being removed. */
[data-page-artwork="calendar"] .gcp-calendar-hero {
  border-color: rgb(212 163 63 / 56%);
  background: linear-gradient(108deg, #071a30 0%, #0d2f54 52%, #233e5c 100%);
  box-shadow: 0 1.3rem 3rem rgb(7 26 48 / 24%);
}

[data-page-artwork="calendar"] .gcp-calendar-hero__art::before {
  background:
    linear-gradient(90deg, #0d2f54 0%, rgb(13 47 84 / 48%) 17%, transparent 50%),
    linear-gradient(0deg, rgb(7 26 48 / 26%) 0%, transparent 58%);
}

[data-page-artwork="calendar"] .gcp-calendar-hero__art img {
  object-position: 61% 54%;
  filter: saturate(1.14) contrast(1.11) brightness(0.94);
  opacity: 0.98;
}

[data-page-artwork="calendar"] .gcp-calendar-surface .gcp-v18-week__head,
[data-page-artwork="calendar"] .gcp-calendar-surface .gcp-v18-week__body {
  min-width: 0;
  grid-template-columns: 3.35rem repeat(7, minmax(0, 1fr));
}

[data-page-artwork="calendar"] .gcp-calendar-surface .gcp-v18-calendar-event {
  min-width: 0;
  padding-inline: 0.3rem;
}

/* Automations uses the richer pagoda scene throughout light and dark modes. */
[data-page-artwork="automations"] .gcp-v21-automations-page {
  background:
    radial-gradient(circle at 92% 12%, rgba(34, 94, 142, 0.16), transparent 36rem),
    linear-gradient(180deg, rgba(244, 247, 248, 0.84), rgba(230, 237, 241, 0.9));
}

[data-page-artwork="automations"] .gcp-v21-automation-hero {
  color: #f5f1e8;
  border-color: rgba(204, 160, 70, 0.48);
  background: #071c31;
  box-shadow: 0 1.15rem 3rem rgba(7, 28, 49, 0.2);
}

[data-page-artwork="automations"] .gcp-v21-automation-hero::after,
html.dark [data-page-artwork="automations"] .gcp-v21-automation-hero::after {
  background: linear-gradient(90deg, #071c31 0%, rgba(7, 28, 49, 0.98) 39%, rgba(7, 28, 49, 0.63) 63%, rgba(7, 28, 49, 0.06) 100%);
}

[data-page-artwork="automations"] .gcp-v21-automation-hero > img {
  width: 100%;
  object-position: 58% 50%;
  filter: saturate(1.16) contrast(1.1) brightness(0.88);
}

[data-page-artwork="automations"] .gcp-v21-automation-hero h1,
[data-page-artwork="automations"] .gcp-v21-automation-hero > div > p:not(.gcp-v21-eyebrow) {
  color: #f5f1e8;
}

[data-page-artwork="automations"] .gcp-v21-automation-hero h1 em,
html.dark [data-page-artwork="automations"] .gcp-v21-automation-hero h1 em,
[data-page-artwork="automations"] .gcp-v21-automation-hero .gcp-v21-eyebrow {
  color: #d4a33f;
}

[data-page-artwork="automations"] .gcp-v21-automation-hero > div > p:not(.gcp-v21-eyebrow) {
  color: rgba(245, 241, 232, 0.76);
}

[data-page-artwork="automations"] .gcp-v21-automation-hero nav a:not(:first-child),
html.dark [data-page-artwork="automations"] .gcp-v21-automation-hero nav a:not(:first-child) {
  color: #f5f1e8;
  border-color: rgba(212, 163, 63, 0.52);
  background: rgba(7, 28, 49, 0.72);
}

/* Knowledge Hub routes remain complete supporting evidence, but the narrower,
   quieter treatment keeps the automation catalog as the page's main focus. */
.gcp-v21-knowledge-workflows {
  width: min(94%, 91rem);
  margin: 1.15rem auto 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px dashed rgba(83, 101, 116, 0.3);
  border-radius: 0.78rem;
  background: rgba(246, 248, 249, 0.58);
}

.gcp-v21-knowledge-workflows #knowledge-hub-workflows {
  margin-top: 0;
  padding-top: 0;
}

.gcp-v21-knowledge-workflows #knowledge-hub-workflows-title,
.gcp-v21-knowledge-workflows [role="tabpanel"] .text-2xl {
  font-size: 1.16rem;
}

.gcp-v21-knowledge-workflows [role="alert"] {
  padding-block: 0.75rem;
}

.gcp-v21-knowledge-workflows [role="tabpanel"] > div {
  box-shadow: none;
}

.gcp-v21-knowledge-workflows [role="tabpanel"] > div > div:first-child,
.gcp-v21-knowledge-workflows [role="tabpanel"] > div > div:last-child {
  padding: 0.9rem;
}

.gcp-v21-knowledge-workflows [role="tabpanel"] ol > li {
  padding: 0.78rem;
}

@media (min-width: 48.76rem) and (max-width: 96rem) {
  [data-page-artwork="calendar"] .gcp-calendar-workspace {
    grid-template-columns: minmax(13.5rem, 0.72fr) minmax(0, 2.5fr);
  }

  [data-page-artwork="calendar"] .gcp-calendar-rail--end {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Genie Control Panel Stage 1 — mockup-derived shared visual foundation.
   All shared shell and primitive measurements resolve through named tokens.
   -------------------------------------------------------------------------- */
:root {
  --gcp-color-sidebar-navy: #061017;
  --gcp-color-sidebar-navy-deep: #000d1d;
  --gcp-color-page-cream: #faf8f6;
  --gcp-color-card-white: #fefefe;
  --gcp-color-border-warm: #ededed;
  --gcp-color-border-cool: #f3f5f7;
  --gcp-color-text-primary: #001c48;
  --gcp-color-text-muted: #48586f;
  --gcp-color-gold: #e5b257;
  --gcp-color-gold-dark: #d9ae5f;
  --gcp-color-blue: #0642a3;
  --gcp-color-blue-dark: #001849;
  --gcp-color-success: #2b8449;
  --gcp-color-warning: #eb8a28;
  --gcp-color-error: #c43130;
  --gcp-color-info: #0348b8;
  --gcp-color-success-surface: #eff8f1;
  --gcp-color-warning-surface: #fff7e8;
  --gcp-color-error-surface: #fef2f2;
  --gcp-color-info-surface: #f3f7ff;
  --gcp-color-success-text: color-mix(in srgb, var(--gcp-color-success) 95%, var(--gcp-color-text-primary));
  --gcp-color-warning-text: color-mix(in srgb, var(--gcp-color-warning) 65%, var(--gcp-color-text-primary));
  --gcp-color-error-text: var(--gcp-color-error);
  --gcp-color-info-text: var(--gcp-color-info);
  --gcp-color-sidebar-text: color-mix(in srgb, var(--gcp-color-card-white) 92%, transparent);
  --gcp-color-sidebar-text-muted: color-mix(in srgb, var(--gcp-color-card-white) 76%, transparent);
  --gcp-color-sidebar-group: color-mix(in srgb, var(--gcp-color-card-white) 78%, transparent);
  --gcp-color-sidebar-divider: color-mix(in srgb, var(--gcp-color-card-white) 14%, transparent);
  --gcp-color-sidebar-hover: color-mix(in srgb, var(--gcp-color-card-white) 8%, transparent);
  --gcp-color-sidebar-badge: color-mix(in srgb, var(--gcp-color-card-white) 12%, transparent);
  --gcp-color-sidebar-active-badge: color-mix(in srgb, var(--gcp-color-sidebar-navy-deep) 13%, transparent);
  --gcp-color-sidebar-surface: color-mix(in srgb, var(--gcp-color-sidebar-navy-deep) 92%, transparent);
  --gcp-color-sidebar-surface-soft: color-mix(in srgb, var(--gcp-color-sidebar-navy-deep) 86%, transparent);
  --gcp-color-sidebar-gold-border: color-mix(in srgb, var(--gcp-color-gold) 42%, transparent);
  --gcp-color-blue-border: color-mix(in srgb, var(--gcp-color-blue) 42%, transparent);
  --gcp-color-blue-border-soft: color-mix(in srgb, var(--gcp-color-blue) 28%, transparent);
  --gcp-color-blue-ring: color-mix(in srgb, var(--gcp-color-blue) 8%, transparent);
  --gcp-color-account-hover: color-mix(in srgb, var(--gcp-color-text-primary) 4%, transparent);

  --gcp-font-display: "Fraunces Variable", Fraunces, Georgia, "Times New Roman", serif;
  --gcp-font-ui: "Source Sans 3 Variable", "Source Sans 3", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --gcp-type-page-title-size: 16px;
  --gcp-type-page-title-weight: 650;
  --gcp-type-page-title-line: 22px;
  --gcp-type-page-title-tracking: -0.01em;
  --gcp-type-hero-one-size: 40px;
  --gcp-type-hero-one-weight: 580;
  --gcp-type-hero-one-line: 40px;
  --gcp-type-hero-one-tracking: -0.025em;
  --gcp-type-hero-two-size: 40px;
  --gcp-type-hero-two-weight: 500;
  --gcp-type-hero-two-line: 40px;
  --gcp-type-hero-two-tracking: -0.025em;
  --gcp-type-detail-title-size: 28px;
  --gcp-type-detail-title-weight: 580;
  --gcp-type-detail-title-line: 34px;
  --gcp-type-detail-title-tracking: -0.02em;
  --gcp-type-eyebrow-size: 10px;
  --gcp-type-eyebrow-weight: 700;
  --gcp-type-eyebrow-line: 16px;
  --gcp-type-eyebrow-tracking: 0.13em;
  --gcp-type-section-size: 16px;
  --gcp-type-section-weight: 650;
  --gcp-type-section-line: 22px;
  --gcp-type-section-tracking: -0.01em;
  --gcp-type-card-size: 13px;
  --gcp-type-card-weight: 650;
  --gcp-type-card-line: 18px;
  --gcp-type-card-tracking: 0;
  --gcp-type-body-size: 13px;
  --gcp-type-body-weight: 430;
  --gcp-type-body-line: 20px;
  --gcp-type-body-tracking: 0;
  --gcp-type-table-head-size: 9px;
  --gcp-type-table-head-weight: 700;
  --gcp-type-table-head-line: 14px;
  --gcp-type-table-head-tracking: 0.08em;
  --gcp-type-table-cell-size: 11px;
  --gcp-type-table-cell-weight: 430;
  --gcp-type-table-cell-line: 16px;
  --gcp-type-table-cell-tracking: 0;
  --gcp-type-stat-number-size: 32px;
  --gcp-type-stat-number-weight: 580;
  --gcp-type-stat-number-line: 32px;
  --gcp-type-stat-number-tracking: -0.025em;
  --gcp-type-stat-label-size: 11px;
  --gcp-type-stat-label-weight: 600;
  --gcp-type-stat-label-line: 16px;
  --gcp-type-stat-label-tracking: 0;
  --gcp-type-small-size: 10px;
  --gcp-type-small-weight: 430;
  --gcp-type-small-line: 15px;
  --gcp-type-small-tracking: 0;

  --gcp-space-0: 0;
  --gcp-space-1: 4px;
  --gcp-space-2: 8px;
  --gcp-space-3: 12px;
  --gcp-space-4: 16px;
  --gcp-space-5: 20px;
  --gcp-space-6: 24px;
  --gcp-space-8: 32px;
  --gcp-space-10: 40px;
  --gcp-space-12: 48px;
  --gcp-space-16: 64px;

  --gcp-radius-control: 6px;
  --gcp-radius-card: 8px;
  --gcp-radius-large-card: 12px;
  --gcp-radius-active-nav: 8px;
  --gcp-radius-round: 999px;
  --gcp-border-default-width: 1px;
  --gcp-border-default-style: solid;
  --gcp-border-default-color: var(--gcp-color-border-warm);
  --gcp-border-cool-width: 1px;
  --gcp-border-cool-style: solid;
  --gcp-border-cool-color: var(--gcp-color-border-cool);
  --gcp-border-tab-width: 2px;
  --gcp-border-tab-style: solid;
  --gcp-border-tab-color: var(--gcp-color-blue-dark);
  --gcp-shadow-card: 0 1px 2px rgba(0, 28, 72, 0.035);
  --gcp-shadow-raised: 0 8px 24px rgba(0, 28, 72, 0.07);
  --gcp-shadow-flat: none;

  --gcp-layout-sidebar-compact: 180px;
  --gcp-layout-sidebar-wide: 192px;
  --gcp-layout-top-bar: 68px;
  --gcp-layout-assistant-panel: 384px;
  --gcp-layout-content-gutter: 24px;
  --gcp-layout-content-max: 1280px;
  --gcp-layout-grid-columns: 12;
  --gcp-layout-grid-gap: 12px;
  --gcp-layout-hero-min-height: 268px;
  --gcp-layout-hero-mobile-art: 180px;
  --gcp-layout-desktop-breakpoint: 1280px;
  --gcp-layout-tablet-breakpoint: 768px;
  --gcp-type-hero-mobile-size: 32px;
  --gcp-type-hero-mobile-line: 34px;

  --gcp-component-nav-height: 36px;
  --gcp-component-nav-padding: 12px;
  --gcp-component-nav-icon: 17px;
  --gcp-component-nav-gap: 10px;
  --gcp-component-attention-badge: 20px;
  --gcp-component-search-width: 320px;
  --gcp-component-search-height: 36px;
  --gcp-component-search-radius: 18px;
  --gcp-component-button-height: 36px;
  --gcp-component-button-padding: 16px;
  --gcp-component-button-radius: 6px;
  --gcp-component-stat-min-height: 130px;
  --gcp-component-stat-padding: 16px;
  --gcp-component-table-head-height: 38px;
  --gcp-component-table-row-height: 64px;
  --gcp-component-table-row-compact-height: 46px;
  --gcp-component-avatar: 28px;
  --gcp-component-pill-height: 20px;
  --gcp-component-pill-padding: 7px;
  --gcp-component-pill-radius: 999px;
  --gcp-component-tab-height: 48px;
  --gcp-component-settings-field-height: 36px;
  --gcp-component-settings-field-radius: 6px;
  --gcp-component-toggle-width: 32px;
  --gcp-component-toggle-height: 18px;
  --gcp-component-toggle-thumb: 14px;
  --gcp-component-flow-node-width: 264px;
  --gcp-component-flow-node-min-height: 76px;
  --gcp-component-flow-node-padding: 16px;
  --gcp-component-flow-node-radius: 8px;
  --gcp-component-flow-node-border: 1px;
  --gcp-component-flow-connector: 1.5px;
  --gcp-component-assistant-header: 56px;
  --gcp-component-assistant-composer: 48px;
}

/* Keep the authored Control Panel colour utilities on the approved token set.
   These names intentionally mirror the page markup and provide a stable
   fallback when the generated utility sheet has not been refreshed yet. */
.bg-gcp-page { background-color: var(--gcp-color-page-cream); }
.bg-gcp-card,
.bg-gcp-panel { background-color: var(--gcp-color-card-white); }
.bg-gcp-navy { background-color: var(--gcp-color-sidebar-navy); }
.bg-gcp-blue { background-color: var(--gcp-color-blue); }
.bg-gcp-blue-dark { background-color: var(--gcp-color-blue-dark); }
.bg-gcp-gold { background-color: var(--gcp-color-gold); }
.bg-gcp-success { background-color: var(--gcp-color-success); }
.bg-gcp-warning { background-color: var(--gcp-color-warning); }
.bg-gcp-error { background-color: var(--gcp-color-error); }
.bg-gcp-info { background-color: var(--gcp-color-info); }
.bg-gcp-success-surface { background-color: var(--gcp-color-success-surface); }
.bg-gcp-warning-surface { background-color: var(--gcp-color-warning-surface); }
.bg-gcp-error-surface { background-color: var(--gcp-color-error-surface); }
.bg-gcp-info-surface { background-color: var(--gcp-color-info-surface); }
.bg-gcp-border-warm { background-color: var(--gcp-color-border-warm); }
.bg-gcp-border-cool,
.bg-gcp-muted { background-color: var(--gcp-color-border-cool); }

.text-gcp-text { color: var(--gcp-color-text-primary); }
.text-gcp-muted { color: var(--gcp-color-text-muted); }
.text-gcp-blue { color: var(--gcp-color-blue); }
.text-gcp-gold { color: var(--gcp-color-gold); }
.text-gcp-success { color: var(--gcp-color-success-text); }
.text-gcp-warning { color: var(--gcp-color-warning-text); }
.text-gcp-error { color: var(--gcp-color-error-text); }
.text-gcp-info { color: var(--gcp-color-info-text); }

.border-gcp-border-warm,
.border-gcp-panel { border-color: var(--gcp-color-border-warm); }
.border-gcp-border-cool { border-color: var(--gcp-color-border-cool); }
.border-gcp-blue { border-color: var(--gcp-color-blue); }
.border-gcp-gold { border-color: var(--gcp-color-gold); }
.border-gcp-success { border-color: var(--gcp-color-success); }
.border-gcp-warning { border-color: var(--gcp-color-warning); }
.border-gcp-error { border-color: var(--gcp-color-error); }
.border-gcp-info { border-color: var(--gcp-color-info); }
.border-gcp-muted { border-color: var(--gcp-color-text-muted); }
.ring-gcp-blue { --tw-ring-color: var(--gcp-color-blue); }

.gcp-stage1-shell .settings-admin-page :is(input, textarea, button[role="combobox"]) {
  border-color: var(--gcp-color-border-warm);
  background: var(--gcp-color-card-white);
  color: var(--gcp-color-text-primary);
}

.gcp-stage1-shell {
  display: grid;
  grid-template-columns: var(--gcp-layout-sidebar-compact) minmax(0, 1fr);
  min-height: 100vh;
  color: var(--gcp-color-text-primary);
  background: var(--gcp-page-background, var(--gcp-color-page-cream));
  font-family: var(--gcp-font-ui);
  font-size: var(--gcp-type-body-size);
  font-variation-settings: "wght" var(--gcp-type-body-weight);
  letter-spacing: var(--gcp-type-body-tracking);
}

.gcp-stage1-shell .gcp-v8-sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: auto;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--gcp-space-4) var(--gcp-space-3) var(--gcp-space-3);
  border: 0;
  background: var(--gcp-color-sidebar-navy);
  box-shadow: none;
  color: var(--gcp-color-card-white);
  isolation: isolate;
}

/* The Stage 1 artwork owns the sidebar. Retire the older photo/circle layers. */
.gcp-stage1-shell .gcp-v8-sidebar::before,
.gcp-stage1-shell .gcp-v8-sidebar::after {
  display: none;
  content: none;
}

.gcp-stage1-sidebar-art {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 68%;
  overflow: hidden;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}

.gcp-stage1-sidebar-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 26%, var(--gcp-color-card-white) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 26%, var(--gcp-color-card-white) 100%);
}

.gcp-stage1-sidebar-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 23, 0.72) 0%, rgba(6, 16, 23, 0.79) 52%, rgba(6, 16, 23, 0.86) 100%);
  content: "";
  pointer-events: none;
}

.gcp-stage1-shell .gcp-v8-brand {
  position: relative;
  z-index: 1;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--gcp-space-2);
  margin-bottom: var(--gcp-space-2);
  padding: 0 var(--gcp-space-1) var(--gcp-space-3);
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-divider);
  color: var(--gcp-color-card-white);
  text-decoration: none;
}

.gcp-stage1-shell .gcp-v8-brand__mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-sidebar-hover);
}

.gcp-stage1-shell .gcp-v8-brand__mark img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.gcp-stage1-shell .gcp-v8-brand > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gcp-stage1-shell .gcp-v8-brand strong {
  font-family: var(--gcp-font-display);
  font-size: 18px;
  font-variation-settings: "wght" 580;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.gcp-stage1-shell .gcp-v8-brand small {
  color: var(--gcp-color-gold);
  font-size: 8px;
  font-variation-settings: "wght" 700;
  line-height: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gcp-stage1-shell .gcp-v8-sidebar__nav {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: hidden;
  padding-top: var(--gcp-space-2);
  scrollbar-width: none;
}

.gcp-stage1-shell .gcp-v8-sidebar__nav::-webkit-scrollbar {
  display: none;
}

.gcp-stage1-shell .gcp-v8-nav-group {
  display: grid;
  gap: calc(var(--gcp-space-1) / 2);
  margin: 0 0 var(--gcp-space-2);
  border: 0;
}

.gcp-stage1-shell .gcp-v8-nav-group > p {
  margin: 0;
  padding: 0 var(--gcp-component-nav-padding) var(--gcp-space-1);
  color: var(--gcp-color-sidebar-group);
  font-size: var(--gcp-type-eyebrow-size);
  font-variation-settings: "wght" var(--gcp-type-eyebrow-weight);
  line-height: var(--gcp-type-eyebrow-line);
  letter-spacing: var(--gcp-type-eyebrow-tracking);
  text-transform: uppercase;
}

.gcp-stage1-shell .gcp-v8-nav-group > a {
  position: relative;
  min-width: 0;
  height: calc(var(--gcp-component-nav-height) - var(--gcp-space-1));
  display: flex;
  align-items: center;
  gap: var(--gcp-component-nav-gap);
  padding: 0 var(--gcp-component-nav-padding);
  border-radius: var(--gcp-radius-active-nav);
  color: var(--gcp-color-sidebar-text);
  font-size: 12px;
  font-variation-settings: "wght" 600;
  line-height: 16px;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}

.gcp-stage1-shell .gcp-v8-nav-group > a:hover,
.gcp-stage1-shell .gcp-v8-nav-group > a:focus-visible {
  color: var(--gcp-color-card-white);
  background: var(--gcp-color-sidebar-hover);
  outline: none;
}

.gcp-stage1-shell .gcp-v8-nav-group > a.is-active {
  color: var(--gcp-color-sidebar-navy-deep);
  background: var(--gcp-color-gold);
  font-variation-settings: "wght" 650;
}

.gcp-stage1-shell .gcp-v8-nav-group > a > svg {
  width: var(--gcp-component-nav-icon);
  height: var(--gcp-component-nav-icon);
  flex: 0 0 auto;
  stroke-width: 1.75;
}

.gcp-stage1-shell .gcp-v8-nav-group > a > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcp-stage1-shell .gcp-v8-nav-group > a:has(.gcp-stage1-attention-badge) {
  gap: var(--gcp-space-2);
  padding-inline: var(--gcp-space-2);
}

.gcp-stage1-attention-badge {
  width: var(--gcp-component-attention-badge);
  height: var(--gcp-component-attention-badge);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-sidebar-badge);
  color: currentColor;
  font-size: 10px;
  font-variation-settings: "wght" 700;
}

.gcp-stage1-shell .is-active .gcp-stage1-attention-badge {
  background: var(--gcp-color-sidebar-active-badge);
}

.gcp-stage1-sidebar-bottom {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gcp-space-1);
  padding-top: var(--gcp-space-1);
}

.gcp-stage1-shell .gcp-v8-private-note {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  box-sizing: border-box;
  min-height: 84px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--gcp-space-2);
  padding: var(--gcp-space-2);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-sidebar-gold-border);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-sidebar-surface);
  box-shadow: var(--gcp-shadow-flat);
  color: var(--gcp-color-card-white);
}

.gcp-stage1-shell .gcp-v8-private-note > svg {
  width: 17px;
  height: 17px;
  color: var(--gcp-color-gold);
}

.gcp-stage1-shell .gcp-v8-private-note span {
  display: grid;
  gap: 2px;
}

.gcp-stage1-shell .gcp-v8-private-note strong,
.gcp-stage1-sidebar-owner strong {
  font-size: var(--gcp-type-stat-label-size);
  font-variation-settings: "wght" var(--gcp-type-stat-label-weight);
  line-height: var(--gcp-type-stat-label-line);
}

.gcp-stage1-shell .gcp-v8-private-note small,
.gcp-stage1-sidebar-owner small {
  color: var(--gcp-color-sidebar-text-muted);
  font-size: 9px;
  line-height: 13px;
}

.gcp-stage1-sidebar-owner {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--gcp-space-2);
  padding: var(--gcp-space-2);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-sidebar-surface-soft);
}

.gcp-stage1-sidebar-owner::after {
  position: absolute;
  top: 50%;
  right: var(--gcp-space-2);
  width: 7px;
  height: 7px;
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-success);
  content: "";
  transform: translateY(-50%);
}

.gcp-stage1-sidebar-owner > b,
.gcp-stage1-owner-trigger > i {
  width: var(--gcp-component-avatar);
  height: var(--gcp-component-avatar);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-gold);
  color: var(--gcp-color-sidebar-navy-deep);
  font-style: normal;
  font-size: 11px;
  font-variation-settings: "wght" 700;
}

.gcp-stage1-sidebar-owner > span {
  min-width: 0;
  display: grid;
  padding-right: var(--gcp-space-3);
}

.gcp-stage1-shell .gcp-v8-surface {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.gcp-stage1-shell .gcp-v8-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: var(--gcp-layout-top-bar);
  height: var(--gcp-layout-top-bar);
  display: grid;
  grid-template-columns: minmax(210px, 1fr) var(--gcp-component-search-width) minmax(210px, 1fr);
  align-items: center;
  gap: var(--gcp-space-4);
  padding: 0 var(--gcp-layout-content-gutter);
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  background: var(--gcp-page-background-color, var(--gcp-color-page-cream));
  box-shadow: var(--gcp-shadow-flat);
  backdrop-filter: none;
}

.gcp-stage1-shell .gcp-v22-topbar-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gcp-space-2);
}

.gcp-stage1-shell .gcp-v22-mobile-menu {
  display: none;
}

.gcp-stage1-shell .gcp-v8-context {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--gcp-space-3);
}

.gcp-stage1-shell .gcp-v8-context strong {
  overflow: hidden;
  color: var(--gcp-color-text-primary);
  font-size: var(--gcp-type-page-title-size);
  font-variation-settings: "wght" var(--gcp-type-page-title-weight);
  line-height: var(--gcp-type-page-title-line);
  letter-spacing: var(--gcp-type-page-title-tracking);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcp-stage1-shell .gcp-v8-context small {
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-small-size);
  font-variation-settings: "wght" var(--gcp-type-small-weight);
  line-height: var(--gcp-type-small-line);
  letter-spacing: var(--gcp-type-small-tracking);
  white-space: nowrap;
}

.gcp-stage1-global-search {
  position: relative;
  width: var(--gcp-component-search-width);
  height: var(--gcp-component-search-height);
  display: flex;
  align-items: center;
  justify-self: center;
  gap: var(--gcp-space-2);
  padding: 0 var(--gcp-space-2) 0 var(--gcp-space-3);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-component-search-radius);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-card);
}

.gcp-stage1-global-search:focus-within {
  border-color: var(--gcp-color-blue-border);
  box-shadow: 0 0 0 3px var(--gcp-color-blue-ring);
}

.gcp-stage1-global-search > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--gcp-color-text-muted);
}

.gcp-stage1-global-search > input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--gcp-color-text-primary);
  font-size: 11px;
  line-height: 16px;
}

.gcp-stage1-global-search > input::placeholder {
  color: var(--gcp-color-text-muted);
  opacity: 0.78;
}

.gcp-stage1-global-search > kbd {
  width: 28px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  padding: 0;
  border: var(--gcp-border-cool-width) var(--gcp-border-cool-style) var(--gcp-border-cool-color);
  border-radius: var(--gcp-radius-control);
  background: var(--gcp-color-page-cream);
  color: var(--gcp-color-text-muted);
  font-family: var(--gcp-font-ui);
  font-size: 9px;
  line-height: 12px;
}

.gcp-stage1-search-results {
  position: absolute;
  top: calc(100% + var(--gcp-space-2));
  right: 0;
  left: 0;
  display: grid;
  gap: 2px;
  padding: var(--gcp-space-2);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-raised);
}

.gcp-stage1-search-results a,
.gcp-stage1-search-results span {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 var(--gcp-space-3);
  border-radius: var(--gcp-radius-control);
  color: var(--gcp-color-text-primary);
  font-size: 11px;
  text-decoration: none;
}

.gcp-stage1-search-results a:hover,
.gcp-stage1-search-results a:focus-visible {
  background: var(--gcp-color-info-surface);
  outline: none;
}

.gcp-stage1-shell .gcp-v8-account {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gcp-space-2);
}

.gcp-stage1-shell .gcp-v15-top-action,
.gcp-stage1-shell button.gcp-v15-top-action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-card-white);
  color: var(--gcp-color-text-primary);
  text-decoration: none;
  box-shadow: var(--gcp-shadow-card);
}

.gcp-stage1-shell .gcp-v15-top-action:hover,
.gcp-stage1-shell button.gcp-v15-top-action:hover,
.gcp-stage1-shell .gcp-v15-top-action:focus-visible,
.gcp-stage1-shell button.gcp-v15-top-action:focus-visible {
  border-color: var(--gcp-color-blue-border-soft);
  color: var(--gcp-color-blue);
  outline: none;
}

.gcp-stage1-shell .gcp-v15-top-action svg {
  width: 16px;
  height: 16px;
}

.gcp-stage1-owner-trigger {
  height: var(--gcp-component-search-height);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--gcp-space-2);
  min-width: max-content;
  width: max-content;
  padding: 0 var(--gcp-space-1) 0 var(--gcp-space-2);
  border: 0;
  border-radius: var(--gcp-radius-card);
  background: transparent;
  color: var(--gcp-color-text-primary);
  white-space: nowrap;
}

.gcp-stage1-shell .gcp-v8-account > .gcp-stage1-owner-trigger {
  position: relative;
  width: auto;
  min-width: max-content;
  height: var(--gcp-component-search-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gcp-space-2);
  margin-left: var(--gcp-space-2);
  padding: 0 var(--gcp-space-1) 0 var(--gcp-space-3);
  border: 0;
  border-radius: var(--gcp-radius-card);
  background: transparent;
}

.gcp-stage1-shell .gcp-v8-account > .gcp-stage1-owner-trigger::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 24px;
  background: var(--gcp-border-default-color);
  content: "";
  transform: translateY(-50%);
}

.gcp-stage1-shell .gcp-v8-account > .gcp-stage1-owner-trigger > i {
  background: var(--gcp-color-sidebar-navy);
  color: var(--gcp-color-card-white);
}

.gcp-stage1-owner-trigger:hover,
.gcp-stage1-owner-trigger:focus-visible {
  background: var(--gcp-color-account-hover);
  outline: none;
}

.gcp-stage1-owner-trigger > span {
  display: block;
  text-align: left;
}

.gcp-stage1-owner-trigger strong {
  display: block;
  font-size: var(--gcp-type-stat-label-size);
  font-variation-settings: "wght" var(--gcp-type-stat-label-weight);
  line-height: var(--gcp-type-stat-label-line);
}

.gcp-stage1-owner-trigger small {
  color: var(--gcp-color-text-muted);
  font-size: 9px;
  line-height: 12px;
}

.gcp-stage1-owner-trigger > svg {
  width: 13px;
  height: 13px;
  color: var(--gcp-color-text-muted);
}

.gcp-stage1-menu {
  max-height: min(70vh, 520px);
  min-width: 220px;
  overflow-y: auto;
  border-color: var(--gcp-color-border-warm);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  color: var(--gcp-color-text-primary);
  box-shadow: var(--gcp-shadow-raised);
  font-family: var(--gcp-font-ui);
}

.gcp-stage1-menu a {
  color: inherit;
  text-decoration: none;
}

.gcp-stage1-account-label {
  max-width: 260px;
  overflow: hidden;
  color: var(--gcp-color-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcp-stage1-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gcp-space-4);
  padding: var(--gcp-space-1) var(--gcp-space-2);
  font-size: 12px;
}

.gcp-stage1-shell .gcp-v8-page-frame {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  background: var(--gcp-page-background, var(--gcp-color-page-cream));
}

.gcp-stage1-shell .performance-ink-main {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--gcp-layout-content-max);
  min-width: 0;
  margin: 0 auto;
  padding: 0 var(--gcp-layout-content-gutter) var(--gcp-layout-content-gutter);
  background: transparent;
}

.gcp-stage1-shell .performance-ink-main > :not(.gcp-stage1-footer-artwork) {
  position: relative;
  z-index: 1;
}

/*
 * Route-mapped footer art occupies real lower-page space, then lifts under the
 * last content band. The intersecting masks curve the outer boundary and fade
 * upward, preventing a rectangular crop while content remains in front.
 */
.gcp-stage1-footer-artwork {
  position: relative;
  z-index: 0;
  display: block;
  width: calc(100% + var(--gcp-layout-content-gutter) + var(--gcp-layout-content-gutter));
  height: clamp(15rem, 29vw, 25rem);
  margin: clamp(-9rem, -10vw, -5rem) calc(var(--gcp-layout-content-gutter) * -1) calc(var(--gcp-layout-content-gutter) * -1);
  overflow: hidden;
  opacity: 0.72;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.gcp-stage1-footer-artwork img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image:
    radial-gradient(ellipse 70% 148% at 32% 110%, #000 0%, #000 55%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 13%, #000 48%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 70% 148% at 32% 110%, #000 0%, #000 55%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 13%, #000 48%, #000 100%);
  mask-composite: intersect;
}

.dark .gcp-stage1-footer-artwork {
  opacity: 0.2;
  mix-blend-mode: normal;
}

.gcp-stage1-shell.is-detail-shell .performance-ink-main {
  margin: 0;
  max-width: none;
  padding: 0;
}

.gcp-stage1-shell.is-detail-shell .gcp-stage1-footer-artwork {
  width: 100%;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.gcp-stage1-shell.is-detail-shell .gcp-v8-page-frame,
.gcp-stage1-shell.is-detail-shell .gcp-detail-assistant-layout,
.gcp-stage1-shell.is-detail-shell .gcp-reports-layout,
.gcp-stage1-shell.is-detail-shell .gcp-reports-page,
.gcp-stage1-shell.is-detail-shell .gcp-task-detail-page {
  min-height: 100vh;
}

/*
 * Secondary-page artwork uses the same open canvas as the signature hero.
 * The detail canvas stays white like the approved mockups while the outer page
 * remains cream, so a card or assistant rail cannot masquerade as an artwork
 * crop edge. The knowledge assistant also reaches the viewport instead of
 * stopping at the standard-page content cap.
 */
.gcp-stage1-shell.is-detail-shell :is(
  .automation-builder-view,
  .gcp-detail-assistant-layout,
  .gcp-reports-layout,
  .gcp-reports-page,
  .gcp-task-detail-page
) {
  background: var(--gcp-color-card-white);
}

.gcp-stage1-shell .performance-ink-main:has(> .gcp-v8-hubs-page) {
  max-width: none;
  padding: 0;
}

.gcp-stage1-shell .gcp-v8-hubs-page > .gcp-detail-assistant-layout > .gcp-v8-main {
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--gcp-layout-content-gutter);
}

.gcp-stage1-shell .performance-ink-footer {
  display: none;
}

.gcp-stage1-hero {
  --gcp-hero-active-sidebar: var(--gcp-layout-sidebar-compact);
  --gcp-hero-extra-bleed-end: 0px;
  --gcp-hero-viewport-gap: calc(max(0px, (100vw - var(--gcp-hero-active-sidebar) - var(--gcp-layout-content-max)) / 2) + var(--gcp-layout-content-gutter));
  --gcp-hero-art-inset-start: 28%;
  --gcp-hero-art-inset-top: calc(var(--gcp-space-3) * -1);
  --gcp-hero-art-inset-end: calc(0px - var(--gcp-hero-viewport-gap) - var(--gcp-hero-extra-bleed-end));
  --gcp-hero-art-inset-bottom: auto;
  --gcp-hero-art-position: right center;
  position: relative;
  isolation: isolate;
  min-height: var(--gcp-layout-hero-min-height);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gcp-stage1-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gcp-space-8) var(--gcp-space-6) var(--gcp-space-8) var(--gcp-space-8);
}

.gcp-stage1-eyebrow {
  margin: 0 0 var(--gcp-space-3);
  color: var(--gcp-color-text-muted);
  font-family: var(--gcp-font-ui);
  font-size: var(--gcp-type-eyebrow-size);
  font-variation-settings: "wght" var(--gcp-type-eyebrow-weight);
  line-height: var(--gcp-type-eyebrow-line);
  letter-spacing: var(--gcp-type-eyebrow-tracking);
  text-transform: uppercase;
}

.gcp-stage1-hero h1 {
  margin: 0;
  color: var(--gcp-color-text-primary);
  font-family: var(--gcp-font-display);
}

.gcp-stage1-hero h1 > span,
.gcp-stage1-hero h1 > em {
  display: block;
}

.gcp-stage1-hero h1 > span {
  font-size: var(--gcp-type-hero-one-size);
  font-style: normal;
  font-variation-settings: "wght" var(--gcp-type-hero-one-weight);
  line-height: var(--gcp-type-hero-one-line);
  letter-spacing: var(--gcp-type-hero-one-tracking);
}

.gcp-stage1-hero h1 > em {
  color: var(--gcp-color-blue);
  font-size: var(--gcp-type-hero-two-size);
  font-style: italic;
  font-variation-settings: "wght" var(--gcp-type-hero-two-weight);
  line-height: var(--gcp-type-hero-two-line);
  letter-spacing: var(--gcp-type-hero-two-tracking);
}

.gcp-stage1-body {
  max-width: 580px;
  margin: var(--gcp-space-4) 0 0;
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-body-size);
  font-variation-settings: "wght" var(--gcp-type-body-weight);
  line-height: var(--gcp-type-body-line);
  letter-spacing: var(--gcp-type-body-tracking);
}

.gcp-stage1-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gcp-space-2);
  margin-top: var(--gcp-space-5);
}

.gcp-stage1-button {
  min-height: var(--gcp-component-button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gcp-component-button-padding);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) transparent;
  border-radius: var(--gcp-component-button-radius);
  font-size: 11px;
  font-variation-settings: "wght" 650;
  line-height: 16px;
  text-decoration: none;
}

.gcp-stage1-button.is-primary {
  background: var(--gcp-color-blue-dark);
  color: var(--gcp-color-card-white);
}

.gcp-stage1-button.is-secondary {
  border-color: var(--gcp-color-border-warm);
  background: var(--gcp-color-card-white);
  color: var(--gcp-color-text-primary);
}

.gcp-stage1-button:hover,
.gcp-stage1-button:focus-visible {
  box-shadow: var(--gcp-shadow-raised);
  outline: none;
}

.gcp-stage1-hero__art {
  position: absolute;
  z-index: 0;
  inset: var(--gcp-hero-art-inset-top) var(--gcp-hero-art-inset-end) var(--gcp-hero-art-inset-bottom) var(--gcp-hero-art-inset-start);
  height: calc(var(--gcp-layout-hero-min-height) + var(--gcp-space-6));
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.gcp-stage1-hero__art::before {
  content: none;
}

.gcp-stage1-hero__art picture {
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.gcp-stage1-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--gcp-hero-art-position);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, var(--gcp-color-card-white) 28%, var(--gcp-color-card-white) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 16%, var(--gcp-color-card-white) 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, var(--gcp-color-card-white) 28%, var(--gcp-color-card-white) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 16%, var(--gcp-color-card-white) 72%, transparent 100%);
  mask-composite: intersect;
}

.gcp-stage1-hero[data-artwork-page="tasksReviewsList"] {
  --gcp-hero-art-inset-start: 26%;
  --gcp-hero-art-position: right 44%;
}

.gcp-stage1-hero[data-artwork-page="calendarVariantB"] {
  --gcp-hero-art-inset-start: 24%;
  --gcp-hero-art-position: right 48%;
}

.gcp-stage1-hero[data-artwork-page="clientsBbmoto"] {
  --gcp-hero-art-inset-start: 23%;
  --gcp-hero-art-position: right 46%;
}

.gcp-stage1-hero[data-artwork-page="automationsVariantB"] {
  --gcp-hero-extra-bleed-end: var(--gcp-space-6);
  --gcp-hero-art-inset-start: 27%;
  --gcp-hero-art-position: right 44%;
}

.gcp-stage1-hero[data-artwork-page="settings"] {
  --gcp-hero-extra-bleed-end: var(--gcp-space-6);
  --gcp-hero-art-inset-start: 27%;
  --gcp-hero-art-position: right 42%;
}

.gcp-stage1-hero[data-artwork-page="systemStatus"] {
  --gcp-hero-extra-bleed-end: var(--gcp-space-8);
  --gcp-hero-art-inset-start: 25%;
  --gcp-hero-art-position: right 44%;
}

.gcp-system-status-incident-art {
  display: block;
  height: 96px;
  margin: var(--gcp-space-4) calc(var(--gcp-space-4) * -1) calc(var(--gcp-space-4) * -1);
  overflow: hidden;
  pointer-events: none;
}

.gcp-system-status-incident-art img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  width: 100%;
}

.gcp-stage1-stat {
  min-height: var(--gcp-component-stat-min-height);
  display: flex;
  flex-direction: column;
  padding: var(--gcp-component-stat-padding);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-card);
}

.gcp-stage1-stat > header {
  display: flex;
  align-items: center;
  gap: var(--gcp-space-2);
}

.gcp-stage1-stat__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--gcp-radius-control);
  background: var(--gcp-color-info-surface);
  color: var(--gcp-color-info);
}

.gcp-stage1-stat__icon svg {
  width: 15px;
  height: 15px;
}

.gcp-stage1-stat.is-success .gcp-stage1-stat__icon { background: var(--gcp-color-success-surface); color: var(--gcp-color-success); }
.gcp-stage1-stat.is-warning .gcp-stage1-stat__icon { background: var(--gcp-color-warning-surface); color: var(--gcp-color-warning); }
.gcp-stage1-stat.is-error .gcp-stage1-stat__icon { background: var(--gcp-color-error-surface); color: var(--gcp-color-error); }

.gcp-stage1-stat__label {
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-stat-label-size);
  font-variation-settings: "wght" var(--gcp-type-stat-label-weight);
  line-height: var(--gcp-type-stat-label-line);
  letter-spacing: var(--gcp-type-stat-label-tracking);
}

.gcp-stage1-stat__value {
  margin-top: var(--gcp-space-3);
  color: var(--gcp-color-text-primary);
  font-family: var(--gcp-font-display);
  font-size: var(--gcp-type-stat-number-size);
  font-variation-settings: "wght" var(--gcp-type-stat-number-weight);
  line-height: var(--gcp-type-stat-number-line);
  letter-spacing: var(--gcp-type-stat-number-tracking);
}

.gcp-stage1-stat__delta,
.gcp-stage1-small-print {
  margin: var(--gcp-space-1) 0 0;
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-small-size);
  font-variation-settings: "wght" var(--gcp-type-small-weight);
  line-height: var(--gcp-type-small-line);
  letter-spacing: var(--gcp-type-small-tracking);
}

.gcp-stage1-stat__sparkline {
  width: 112px;
  height: 28px;
  margin-top: auto;
  overflow: visible;
}

.gcp-stage1-stat__sparkline polyline {
  stroke: var(--gcp-color-info);
  stroke-width: 1.5;
}

.gcp-stage1-stat__progress {
  display: grid;
  gap: var(--gcp-space-1);
  margin-top: auto;
  padding-top: var(--gcp-space-3);
}

.gcp-stage1-stat__progress-label {
  display: flex;
  justify-content: space-between;
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-small-size);
  line-height: var(--gcp-type-small-line);
}

.gcp-stage1-stat__track {
  height: 4px;
  overflow: hidden;
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-border-cool);
}

.gcp-stage1-stat__track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--gcp-color-info);
}

.gcp-stage1-filter-bar {
  min-height: var(--gcp-layout-top-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gcp-space-3);
  padding: var(--gcp-space-4);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-flat);
}

.gcp-stage1-filter-bar__search {
  width: min(100%, 300px);
  height: var(--gcp-component-settings-field-height);
  display: flex;
  align-items: center;
  gap: var(--gcp-space-2);
  padding: 0 var(--gcp-space-3);
  border: var(--gcp-border-cool-width) var(--gcp-border-cool-style) var(--gcp-border-cool-color);
  border-radius: var(--gcp-component-settings-field-radius);
  background: var(--gcp-color-page-cream);
}

.gcp-stage1-filter-bar__search svg {
  width: 15px;
  height: 15px;
  color: var(--gcp-color-text-muted);
}

.gcp-stage1-filter-bar__search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--gcp-color-text-primary);
  font-size: var(--gcp-type-table-cell-size);
  line-height: var(--gcp-type-table-cell-line);
}

.gcp-stage1-filter-bar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gcp-space-2);
}

.gcp-stage1-table-wrap {
  overflow-x: auto;
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-card);
}

.gcp-stage1-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--gcp-color-text-primary);
}

.gcp-stage1-table th {
  height: var(--gcp-component-table-head-height);
  padding: 0 var(--gcp-space-4);
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  background: var(--gcp-color-page-cream);
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-table-head-size);
  font-variation-settings: "wght" var(--gcp-type-table-head-weight);
  line-height: var(--gcp-type-table-head-line);
  letter-spacing: var(--gcp-type-table-head-tracking);
  text-align: left;
  text-transform: uppercase;
}

.gcp-stage1-table td {
  height: var(--gcp-component-table-row-height);
  padding: var(--gcp-space-3) var(--gcp-space-4);
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  font-size: var(--gcp-type-table-cell-size);
  font-variation-settings: "wght" var(--gcp-type-table-cell-weight);
  line-height: var(--gcp-type-table-cell-line);
  letter-spacing: var(--gcp-type-table-cell-tracking);
  vertical-align: middle;
}

.gcp-stage1-table tr:last-child td {
  border-bottom: 0;
}

.gcp-stage1-table__empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: var(--gcp-space-6);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-body-size);
  line-height: var(--gcp-type-body-line);
}

.gcp-stage1-pill {
  min-height: var(--gcp-component-pill-height);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--gcp-component-pill-padding);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-color-border-cool);
  border-radius: var(--gcp-component-pill-radius);
  background: var(--gcp-color-border-cool);
  color: var(--gcp-color-text-muted);
  font-size: 9px;
  font-variation-settings: "wght" 650;
  line-height: 12px;
  text-transform: capitalize;
}

.gcp-stage1-pill.is-success { border-color: color-mix(in srgb, var(--gcp-color-success) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-success-surface); color: var(--gcp-color-success-text); }
.gcp-stage1-pill.is-warning { border-color: color-mix(in srgb, var(--gcp-color-warning) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-warning-surface); color: var(--gcp-color-warning-text); }
.gcp-stage1-pill.is-error { border-color: color-mix(in srgb, var(--gcp-color-error) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-error-surface); color: var(--gcp-color-error-text); }
.gcp-stage1-pill.is-info { border-color: color-mix(in srgb, var(--gcp-color-info) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-info-surface); color: var(--gcp-color-info-text); }
.gcp-stage1-pill.is-priority-high { border-color: color-mix(in srgb, var(--gcp-color-error) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-error-surface); color: var(--gcp-color-error-text); }
.gcp-stage1-pill.is-priority-medium { border-color: color-mix(in srgb, var(--gcp-color-warning) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-warning-surface); color: var(--gcp-color-warning-text); }
.gcp-stage1-pill.is-priority-low { border-color: color-mix(in srgb, var(--gcp-color-info) 22%, var(--gcp-color-border-warm)); background: var(--gcp-color-info-surface); color: var(--gcp-color-info-text); }

.gcp-stage1-tabs {
  min-height: var(--gcp-component-tab-height);
  display: flex;
  align-items: stretch;
  gap: var(--gcp-space-6);
  overflow-x: auto;
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
}

.gcp-stage1-tabs a,
.gcp-stage1-tabs button {
  position: relative;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gcp-color-text-muted);
  font-size: var(--gcp-type-card-size);
  font-variation-settings: "wght" var(--gcp-type-card-weight);
  line-height: var(--gcp-type-card-line);
  text-decoration: none;
}

.gcp-stage1-tabs a.is-active,
.gcp-stage1-tabs button.is-active {
  color: var(--gcp-color-text-primary);
}

.gcp-stage1-tabs a.is-active::after,
.gcp-stage1-tabs button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: var(--gcp-border-tab-width);
  background: var(--gcp-border-tab-color);
}

.gcp-stage1-card {
  overflow: hidden;
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-card);
}

.gcp-stage1-card > header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gcp-space-3);
  padding: 0 var(--gcp-space-4);
  border-bottom: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
}

.gcp-stage1-card > header h2 {
  margin: 0;
  color: var(--gcp-color-text-primary);
  font-size: var(--gcp-type-card-size);
  font-variation-settings: "wght" var(--gcp-type-card-weight);
  line-height: var(--gcp-type-card-line);
  letter-spacing: var(--gcp-type-card-tracking);
}

.gcp-stage1-card > header a {
  color: var(--gcp-color-blue);
  font-size: var(--gcp-type-small-size);
  line-height: var(--gcp-type-small-line);
  text-decoration: none;
}

.gcp-stage1-card__body {
  padding: var(--gcp-space-4);
}

.gcp-stage1-bottom-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gcp-layout-grid-gap);
  margin-top: var(--gcp-space-6);
}

.gcp-stage1-placeholder {
  min-height: calc(100vh - var(--gcp-layout-top-bar) - (2 * var(--gcp-layout-content-gutter)));
  display: grid;
  align-items: start;
}

@media (min-width: 1280px) {
  .gcp-stage1-shell {
    grid-template-columns: var(--gcp-layout-sidebar-wide) minmax(0, 1fr);
  }

  .gcp-stage1-hero {
    --gcp-hero-active-sidebar: var(--gcp-layout-sidebar-wide);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .gcp-stage1-shell .gcp-v8-topbar {
    grid-template-columns: 260px minmax(240px, var(--gcp-component-search-width)) 260px;
    justify-content: center;
    gap: var(--gcp-space-3);
  }

  .gcp-stage1-global-search {
    width: 100%;
  }

  .gcp-stage1-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .gcp-stage1-hero__copy {
    width: min(78%, 580px);
    padding: var(--gcp-space-4) var(--gcp-space-6) var(--gcp-space-4) var(--gcp-space-4);
  }

  .gcp-stage1-body {
    max-width: 430px;
    margin-top: var(--gcp-space-3);
  }

  .gcp-stage1-hero__actions {
    margin-top: var(--gcp-space-4);
  }

  .gcp-stage1-hero[data-artwork-page="systemStatus"] .gcp-stage1-hero__copy {
    width: min(82%, 600px);
  }

  .gcp-stage1-hero[data-artwork-page="systemStatus"] h1 > span {
    font-size: var(--gcp-type-hero-mobile-size);
    line-height: var(--gcp-type-hero-mobile-line);
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] {
    height: 268px;
    min-height: 268px;
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-hero__copy {
    width: min(92%, 640px);
    padding: var(--gcp-space-2) var(--gcp-space-4);
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-eyebrow,
  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-body,
  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-hero__actions {
    margin-top: var(--gcp-space-2);
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-eyebrow {
    margin-bottom: var(--gcp-space-2);
    margin-top: 0;
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] h1 > span,
  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] h1 > em {
    font-size: var(--gcp-type-hero-mobile-size);
    line-height: var(--gcp-type-hero-mobile-line);
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-body {
    max-width: 330px;
    font-size: var(--gcp-type-table-cell-size);
    line-height: var(--gcp-type-table-cell-line);
  }

  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-button {
    min-height: 32px;
  }
}

@media (max-width: 1023px) {
  .gcp-stage1-shell {
    display: block;
  }

  .gcp-stage1-shell > .gcp-v8-sidebar {
    display: none;
  }

  .gcp-stage1-shell .gcp-v22-mobile-menu {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
    border-radius: var(--gcp-radius-round);
    background: var(--gcp-color-card-white);
    color: var(--gcp-color-text-primary);
  }

  .gcp-stage1-shell .gcp-v22-mobile-menu svg {
    width: 17px;
    height: 17px;
  }

  .gcp-stage1-shell .gcp-v8-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto;
  }

  .gcp-stage1-hero[data-artwork-page="systemStatus"] {
    --gcp-hero-extra-bleed-end: var(--gcp-space-6);
  }
}

@media (max-width: 767px) {
  .gcp-stage1-shell .gcp-v8-topbar {
    height: auto;
    min-height: var(--gcp-layout-top-bar);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gcp-space-2);
    padding: var(--gcp-space-2) var(--gcp-space-3);
  }

  .gcp-stage1-shell .gcp-v8-context {
    display: grid;
    gap: 0;
  }

  .gcp-stage1-shell .gcp-v8-context small {
    overflow: hidden;
    max-width: 150px;
    text-overflow: ellipsis;
  }

  .gcp-stage1-global-search {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .gcp-stage1-owner-trigger > span,
  .gcp-stage1-owner-trigger > svg,
  .gcp-stage1-global-search > kbd {
    display: none;
  }

  .gcp-stage1-shell .gcp-v8-account > .gcp-stage1-owner-trigger {
    flex-basis: 36px;
    min-width: 36px;
    width: 36px;
    margin-left: 0;
    padding: 0 var(--gcp-space-1);
  }

  .gcp-stage1-shell .gcp-v8-account > .gcp-stage1-owner-trigger::before {
    display: none;
  }

  .gcp-stage1-shell .performance-ink-main {
    padding: 0 var(--gcp-space-4) var(--gcp-space-4);
  }

  .gcp-stage1-footer-artwork {
    width: calc(100% + var(--gcp-space-4) + var(--gcp-space-4));
    height: 13rem;
    margin: -4rem calc(var(--gcp-space-4) * -1) calc(var(--gcp-space-4) * -1);
  }

  .gcp-stage1-shell.is-detail-shell .performance-ink-main {
    padding: 0;
  }

  .gcp-stage1-hero {
    --gcp-hero-art-inset-start: 0;
    --gcp-hero-art-inset-top: var(--gcp-space-4);
    --gcp-hero-art-inset-end: calc(0px - var(--gcp-space-4) - var(--gcp-hero-extra-bleed-end));
    --gcp-hero-art-inset-bottom: auto;
    min-height: 286px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(286px, auto);
  }

  .gcp-stage1-hero[data-artwork-page] {
    --gcp-hero-art-inset-start: 0;
    --gcp-hero-art-position: right center;
  }

  .gcp-stage1-hero[data-artwork-page="settings"],
  .gcp-stage1-hero[data-artwork-page="systemStatus"] {
    --gcp-hero-extra-bleed-end: var(--gcp-space-4);
  }

  .gcp-stage1-hero__copy {
    min-height: 286px;
    padding: var(--gcp-space-6) var(--gcp-space-5);
  }

  .gcp-stage1-hero h1 > span,
  .gcp-stage1-hero h1 > em {
    font-size: var(--gcp-type-hero-mobile-size);
    line-height: var(--gcp-type-hero-mobile-line);
  }

  .gcp-stage1-hero__art {
    height: clamp(160px, 48vw, 210px);
    opacity: 1;
  }

  .gcp-stage1-hero__art picture {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .gcp-stage1-hero__art img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, transparent 46%, var(--gcp-color-card-white) 76%, var(--gcp-color-card-white) 84%, transparent 100%),
      linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 18%, var(--gcp-color-card-white) 62%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, transparent 46%, var(--gcp-color-card-white) 76%, var(--gcp-color-card-white) 84%, transparent 100%),
      linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 18%, var(--gcp-color-card-white) 62%, transparent 100%);
    mask-composite: intersect;
  }

  .gcp-stage1-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .gcp-stage1-filter-bar__search {
    width: 100%;
  }

  .gcp-stage1-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .gcp-stage1-table,
  .gcp-stage1-table tbody,
  .gcp-stage1-table tr,
  .gcp-stage1-table td {
    display: block;
    width: 100%;
  }

  .gcp-stage1-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .gcp-stage1-table tbody {
    display: grid;
    gap: var(--gcp-space-3);
  }

  .gcp-stage1-table tr {
    overflow: hidden;
    border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
    border-radius: var(--gcp-radius-card);
    background: var(--gcp-color-card-white);
    box-shadow: var(--gcp-shadow-card);
  }

  .gcp-stage1-table td {
    min-height: var(--gcp-component-table-row-compact-height);
    height: auto;
    display: grid;
    grid-template-columns: minmax(90px, 0.42fr) minmax(0, 0.58fr);
    align-items: center;
    gap: var(--gcp-space-3);
    padding: var(--gcp-space-2) var(--gcp-space-3);
    text-align: right;
  }

  .gcp-stage1-table td::before {
    content: attr(data-label);
    color: var(--gcp-color-text-muted);
    font-size: var(--gcp-type-table-head-size);
    font-variation-settings: "wght" var(--gcp-type-table-head-weight);
    line-height: var(--gcp-type-table-head-line);
    letter-spacing: var(--gcp-type-table-head-tracking);
    text-align: left;
    text-transform: uppercase;
  }

  .gcp-stage1-tabs {
    gap: var(--gcp-space-5);
  }

  .gcp-stage1-bottom-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .gcp-stage1-footer-artwork {
    display: none;
  }
}

/* ========================================================================== 
   Genie Control Panel — exact shared acceptance palette and canvas (v26)
   ========================================================================== */

html:not(.dark) .gcp-v8-shell,
html:not(.dark) .gcp-v8-page-frame {
  background: var(--gcp-page-background, var(--gcp-color-page-cream));
}

html:not(.dark) .gcp-v8-surface,
html:not(.dark) .performance-ink-main {
  background: transparent;
}

html:not(.dark) .gcp-v8-shell :is(
  .gcp-v8-overview-page,
  .gcp-v14-attention-page,
  .gcp-v16-page,
  .gcp-v17-client-detail,
  .gcp-v18-calendar-page,
  .gcp-v18-page,
  .gcp-v8-hubs-page,
  .gcp-v21-automations-page,
  .gcp-v23-connections-page,
  .gcp-calendar-page,
  .performance-client-page,
  .reports-bbmoto-page,
  .account-health-page,
  .analytics-page,
  .audit-log-page,
  .entity-admin-page,
  .settings-admin-page
) {
  background: transparent;
}

html:not(.dark) .gcp-v8-shell :is(
  [class*="-card"],
  .gcp-v8-panel,
  .gcp-v8-metrics,
  .gcp-v16-stat-strip,
  .gcp-v18-calendar-surface,
  .gcp-v25-system-footer
) {
  box-shadow: var(--gcp-shadow-card);
}

.gcp-v8-shell *,
.gcp-v8-shell *::before,
.gcp-v8-shell *::after,
.gcp-v22-mobile-sheet,
.gcp-v22-mobile-sheet * {
  backdrop-filter: none !important;
}

.gcp-v8-shell img { filter: none !important; }
.gcp-v22-mobile-sheet { animation: none !important; transition: none !important; }
.gcp-v22-mobile-sheet__actions > button { font: inherit; cursor: pointer; }

/* ========================================================================== 
   Genie Control Panel — privacy-safe System Status (v25)
   ========================================================================== */

.gcp-v25-system-page {
  min-height: 100%;
  color: var(--gcp-ink);
  background:
    radial-gradient(circle at 86% 8%, rgba(30, 84, 128, 0.12), transparent 31rem),
    linear-gradient(180deg, #edf1f4 0%, #e6ebf0 45%, #edf1f4 100%);
}

.gcp-v25-system-canvas {
  width: min(100% - 2rem, 94rem);
  margin: 0 auto;
  padding: 1rem 0 3.5rem;
}

.gcp-v25-system-hero {
  position: relative;
  min-height: 25rem;
  display: grid;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(212, 163, 63, 0.46);
  border-radius: 1rem;
  color: #f5f1e9;
  background: #071c31;
  box-shadow: 0 1.45rem 3.8rem rgba(7, 28, 49, 0.2);
}

.gcp-v25-system-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, #071c31 0%, rgba(7, 28, 49, 0.98) 42%, rgba(7, 28, 49, 0.62) 67%, rgba(7, 28, 49, 0.08) 100%),
    radial-gradient(circle at 73% 30%, rgba(221, 174, 77, 0.16), transparent 17rem);
  content: "";
  pointer-events: none;
}

.gcp-v25-system-hero > img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 66%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
}

.gcp-v25-system-hero__copy {
  position: relative;
  z-index: 2;
  width: min(56%, 48rem);
  padding: clamp(2rem, 4vw, 4.6rem);
}

.gcp-v25-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #d4a33f;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gcp-v25-eyebrow svg { width: 0.9rem; height: 0.9rem; }

.gcp-v25-system-hero h1 {
  max-width: 38rem;
  margin: 0.75rem 0 0;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: clamp(3rem, 5.4vw, 5.9rem);
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.gcp-v25-system-hero__copy > p:not(.gcp-v25-eyebrow) {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: rgba(245, 241, 233, 0.76);
  font-size: 0.88rem;
  line-height: 1.6;
}

.gcp-v25-system-state {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.35rem;
  padding: 0.58rem 0.78rem;
  border: 1px solid rgba(212, 163, 63, 0.48);
  border-radius: 999px;
  color: #f3e7ce;
  background: rgba(7, 18, 29, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
}

.gcp-v25-system-state svg { width: 0.92rem; height: 0.92rem; color: #d4a33f; }
.gcp-v25-system-state.is-attention { border-color: rgba(231, 177, 83, 0.72); background: rgba(119, 62, 19, 0.38); }

.gcp-v25-system-hero > aside {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  max-width: 19rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(212, 163, 63, 0.44);
  border-radius: 0.72rem;
  background: rgba(7, 18, 29, 0.78);
}

.gcp-v25-system-hero > aside > svg { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; color: #d4a33f; }
.gcp-v25-system-hero > aside > span { display: grid; gap: 0.16rem; }
.gcp-v25-system-hero > aside strong { font-size: 0.66rem; }
.gcp-v25-system-hero > aside small { color: rgba(245, 241, 233, 0.62); font-size: 0.55rem; line-height: 1.4; }

.gcp-v25-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.68rem 0.82rem;
  border: 1px solid var(--gcp-line);
  border-radius: 0.7rem;
  color: var(--gcp-ink-soft);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.68rem;
}

.gcp-v25-loading > span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #d4a33f; }

.gcp-v25-system-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
  margin-top: 0.8rem;
}

.gcp-v25-system-metrics > article,
.gcp-v25-system-card,
.gcp-v25-system-footer {
  border: 1px solid #d5dce3;
  border-radius: 0.78rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(13, 31, 48, 0.05);
}

.gcp-v25-system-metrics > article {
  position: relative;
  min-height: 9rem;
  display: grid;
  align-content: start;
  padding: 1rem;
}

.gcp-v25-system-metrics > article > span {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 0.58rem;
  color: #102a45;
  background: #e6ebf0;
}

.gcp-v25-system-metrics > article.is-attention > span { color: #d4a33f; background: #e6ebf0; }
.gcp-v25-system-metrics > article.is-unknown > span { color: #557a9b; background: #e6ebf0; }
.gcp-v25-system-metrics svg { width: 1rem; height: 1rem; }
.gcp-v25-system-metrics small { max-width: calc(100% - 2.5rem); color: #557a9b; font-size: 0.62rem; font-weight: 800; }
.gcp-v25-system-metrics strong { margin-top: 0.65rem; font-family: "Fraunces Variable", Georgia, serif; font-size: clamp(1.65rem, 2.6vw, 2.55rem); font-weight: 610; line-height: 1; }
.gcp-v25-system-metrics p { margin: 0.45rem 0 0; color: #557a9b; font-size: 0.56rem; line-height: 1.4; }

.gcp-v25-system-overview,
.gcp-v25-system-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.78rem;
  margin-top: 0.78rem;
}

.gcp-v25-system-lower { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.65fr); }

.gcp-v25-system-card { overflow: hidden; }
.gcp-v25-system-card > header { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; border-bottom: 1px solid #d5dce3; }
.gcp-v25-system-card > header > span { width: 2.45rem; height: 2.45rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 0.62rem; color: #102a45; background: #e6ebf0; }
.gcp-v25-system-card > header > span svg { width: 1rem; height: 1rem; }
.gcp-v25-system-card > header > div { min-width: 0; }
.gcp-v25-system-card h2 { margin: 0.14rem 0 0; font-family: "Fraunces Variable", Georgia, serif; font-size: 1.42rem; font-weight: 610; line-height: 1.05; }

.gcp-v25-live-card > p { margin: 0; padding: 0.9rem 1rem 0; color: #557a9b; font-size: 0.65rem; line-height: 1.55; }
.gcp-v25-live-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0.9rem 0 0; }
.gcp-v25-live-card dl > div { padding: 0.82rem 1rem; border-top: 1px solid #d5dce3; border-left: 1px solid #d5dce3; }
.gcp-v25-live-card dl > div:nth-child(odd) { border-left: 0; }
.gcp-v25-live-card dt { color: #557a9b; font-size: 0.55rem; }
.gcp-v25-live-card dd { margin: 0.25rem 0 0; color: #161b21; font-size: 0.72rem; font-weight: 850; }

.gcp-v25-source-list,
.gcp-v25-signal-list { display: grid; }
.gcp-v25-source-list > article,
.gcp-v25-signal-list > article {
  min-height: 4rem;
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid #e2e7eb;
}
.gcp-v25-source-list > article:first-child,
.gcp-v25-signal-list > article:first-child { border-top: 0; }
.gcp-v25-source-list > article > span,
.gcp-v25-signal-list > article > span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #557a9b; }
.gcp-v25-source-list > article.is-unknown > span { background: #aab2b8; }
.gcp-v25-source-list > article.is-attention > span,
.gcp-v25-signal-list > article > span.is-open { background: #d4a33f; }
.gcp-v25-signal-list > article > span.is-resolved { background: #4b9469; }
.gcp-v25-source-list > article > div,
.gcp-v25-signal-list > article > div { min-width: 0; display: grid; gap: 0.2rem; }
.gcp-v25-source-list strong,
.gcp-v25-signal-list strong { overflow: hidden; font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.gcp-v25-source-list small,
.gcp-v25-signal-list small { color: #557a9b; font-size: 0.54rem; line-height: 1.4; }
.gcp-v25-source-list b,
.gcp-v25-signal-list b { color: #161b21; font-size: 0.58rem; text-transform: capitalize; }

.gcp-v25-empty { min-height: 13rem; display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1rem; text-align: left; }
.gcp-v25-empty > svg { width: 1.4rem; height: 1.4rem; color: #d4a33f; }
.gcp-v25-empty > span { display: grid; gap: 0.25rem; }
.gcp-v25-empty strong { font-size: 0.7rem; }
.gcp-v25-empty small { color: #557a9b; font-size: 0.58rem; }

.gcp-v25-boundary-card { color: #f2ece1; background: linear-gradient(135deg, #071c31 0%, #102a45 100%); border-color: rgba(212, 163, 63, 0.5); }
.gcp-v25-boundary-card > header { border-bottom-color: rgba(255, 255, 255, 0.12); }
.gcp-v25-boundary-card > header > span { color: #d4a33f; background: rgba(255, 255, 255, 0.08); }
.gcp-v25-boundary-card .gcp-v25-eyebrow { color: #d4a33f; }
.gcp-v25-boundary-card ul { display: grid; gap: 0.75rem; margin: 0; padding: 1rem; list-style: none; }
.gcp-v25-boundary-card li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: 0.55rem; color: rgba(242, 236, 225, 0.8); font-size: 0.62rem; line-height: 1.48; }
.gcp-v25-boundary-card li svg { width: 0.88rem; height: 0.88rem; margin-top: 0.08rem; color: #d4a33f; }

.gcp-v25-system-footer { min-height: 3.6rem; display: flex; align-items: center; gap: 0.55rem; margin-top: 0.78rem; padding: 0.78rem 0.9rem; color: #557a9b; font-size: 0.59rem; }
.gcp-v25-system-footer svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; color: #d4a33f; }
.gcp-v25-system-footer strong { color: #161b21; }

html.dark .gcp-v25-system-page { background: linear-gradient(180deg, #0b1722 0%, #101e2a 100%); }
html.dark .gcp-v25-system-metrics > article,
html.dark .gcp-v25-system-card,
html.dark .gcp-v25-system-footer,
html.dark .gcp-v25-loading { color: #f0eadf; border-color: #284158; background: #0b213b; }
html.dark .gcp-v25-system-card > header,
html.dark .gcp-v25-source-list > article,
html.dark .gcp-v25-signal-list > article,
html.dark .gcp-v25-live-card dl > div { border-color: #284158; }
html.dark .gcp-v25-system-card > header > span,
html.dark .gcp-v25-system-metrics > article > span { color: #d4a84e; background: #153754; }
html.dark .gcp-v25-system-metrics small,
html.dark .gcp-v25-system-metrics p,
html.dark .gcp-v25-live-card > p,
html.dark .gcp-v25-live-card dt,
html.dark .gcp-v25-source-list small,
html.dark .gcp-v25-signal-list small,
html.dark .gcp-v25-system-footer { color: #aab8c4; }
html.dark .gcp-v25-live-card dd,
html.dark .gcp-v25-source-list b,
html.dark .gcp-v25-signal-list b,
html.dark .gcp-v25-system-footer strong { color: #f0eadf; }
html.dark .gcp-v25-boundary-card { background: linear-gradient(135deg, #06121e 0%, #102f4d 100%); }

@media (max-width: 1080px) {
  .gcp-v25-system-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcp-v25-system-overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .gcp-v25-system-canvas { width: min(100% - 1rem, 94rem); padding-top: 0.5rem; }
  .gcp-v25-system-hero { min-height: 38rem; align-items: start; padding-bottom: 13rem; }
  .gcp-v25-system-hero::after { background: linear-gradient(180deg, #071c31 0%, rgba(7, 28, 49, 0.98) 52%, rgba(7, 28, 49, 0.42) 78%, rgba(7, 28, 49, 0.06) 100%); }
  .gcp-v25-system-hero > img { top: auto; bottom: 0; width: 100%; height: 52%; object-position: 56% 50%; }
  .gcp-v25-system-hero__copy { width: 100%; padding: 1.5rem 1.2rem 10rem; }
  .gcp-v25-system-hero h1 { max-width: 30rem; font-size: clamp(2.85rem, 11vw, 4.5rem); }
  .gcp-v25-system-hero > aside { right: 0.7rem; bottom: 0.7rem; left: 0.7rem; max-width: none; }
  .gcp-v25-system-lower { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .gcp-v25-system-hero { min-height: 42rem; padding-bottom: 14rem; }
  .gcp-v25-system-hero__copy { padding: 1.25rem 1rem 10rem; }
  .gcp-v25-system-hero h1 { font-size: clamp(2.65rem, 13vw, 3.4rem); }
  .gcp-v25-system-hero__copy > p:not(.gcp-v25-eyebrow) { font-size: 0.78rem; }
  .gcp-v25-system-metrics { grid-template-columns: minmax(0, 1fr); }
  .gcp-v25-system-metrics > article { min-height: 7.6rem; }
  .gcp-v25-live-card dl { grid-template-columns: minmax(0, 1fr); }
  .gcp-v25-live-card dl > div { border-left: 0; }
  .gcp-v25-source-list > article,
  .gcp-v25-signal-list > article { grid-template-columns: 0.55rem minmax(0, 1fr); }
  .gcp-v25-source-list b,
  .gcp-v25-signal-list b { grid-column: 2; }
  .gcp-v25-system-footer { align-items: flex-start; }
}


@media (max-width: 820px) {
  [data-page-artwork="automations"] .gcp-v21-automation-hero::after,
  html.dark [data-page-artwork="automations"] .gcp-v21-automation-hero::after {
    background: linear-gradient(180deg, #071c31 0%, rgba(7, 28, 49, 0.98) 48%, rgba(7, 28, 49, 0.48) 77%, transparent 100%);
  }

  [data-page-artwork="automations"] .gcp-v21-automation-hero > img {
    height: 63%;
    object-position: 68% 48%;
  }
}

@media (max-width: 480px) {
  .gcp-v21-knowledge-workflows {
    width: 100%;
    padding: 0.7rem;
  }

  .gcp-v21-knowledge-workflows #knowledge-hub-workflows .overflow-x-auto {
    overflow-x: visible;
    padding-bottom: 0;
  }

  .gcp-v21-knowledge-workflows [role="tablist"] {
    width: 100%;
    min-width: 0;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .gcp-v21-knowledge-workflows [role="tab"] {
    min-width: 0;
    min-height: 2.55rem;
    padding: 0.42rem 0.5rem;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}

/* ==========================================================================
   Genie Control Panel — phone readability repair (2026-08-31)
   The desktop mockups place the supplied artwork beside the reading copy.
   On a phone there is no room beside it, so the hero stacks: the reading copy
   sits above the artwork instead of behind it, the exact artwork is shown
   whole and unmasked, and the lower-corner artwork stays clear of card text.
   Desktop and tablet composition is unchanged.
   ========================================================================== */

@media (max-width: 767px) {
  .gcp-stage1-hero {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--gcp-space-3);
  }

  .gcp-stage1-hero .gcp-stage1-hero__copy {
    min-height: 0;
    padding-bottom: 0;
  }

  .gcp-stage1-hero .gcp-stage1-hero__art {
    position: relative;
    z-index: 0;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .gcp-stage1-hero[data-artwork-fidelity] .gcp-stage1-hero__art picture {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--gcp-exact-hero-width, 16) / var(--gcp-exact-hero-height, 9);
    transform: none;
  }

  .gcp-stage1-hero[data-artwork-fidelity] .gcp-stage1-hero__art img {
    width: 100%;
    height: 100%;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .gcp-stage1-hero[data-artwork-fidelity="processed"] .gcp-stage1-hero__art img {
    object-fit: contain;
  }

  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art img {
    object-fit: fill;
  }

  /* Lower-corner artwork keeps its exact pixels but stays in the corner, and
     the card it decorates reserves room so no working text sits over it. */
  .gcp-exact-decoration--tasks-bottom,
  .gcp-exact-decoration--calendar-bottom,
  .gcp-exact-decoration--calendar-bamboo,
  .gcp-exact-decoration--system-bamboo,
  .gcp-exact-decoration--automations-bamboo {
    right: -4px;
    bottom: -4px;
    width: 96px;
    height: 112px;
  }

  .gcp-exact-decoration--system-strip {
    left: 0;
    bottom: 0;
    width: 132px;
    height: 30px;
  }

  :where(section, article, div, aside):has(> .page-artwork-decoration.is-pixel-exact) {
    padding-bottom: 7rem;
  }

  /* Phone table cards: a working value may not force its row wider than the
     screen, so nothing is clipped out of sight. */
  .gcp-stage1-table td {
    overflow-wrap: anywhere;
  }

  .gcp-stage1-table td > * {
    min-width: 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   Genie Control Panel — design-screen sidebar and always-on navigation
   (31 August 2026)

   Two owner-approved corrections, taken straight from the supplied design
   screens:

   1. In every design screen the sidebar ink artwork sits in the empty space
      that starts under the last navigation item and runs to the bottom edge,
      with the private-space and owner cards resting on top of it. Navigation
      labels always stay on clean navy. The sidebar therefore lays out as
      brand / navigation / artwork field, with the artwork spanning the free
      field and the bottom cards.
   2. The whole navigation stays on screen at every width, exactly as drawn.
      The hamburger button and its drawer are retired, and the rail narrows
      in steps so the labels stay readable on a phone.
   ========================================================================== */

/* --- 1. Sidebar composition --------------------------------------------- */

.gcp-stage1-shell .gcp-v8-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr) auto;
}

.gcp-stage1-shell .gcp-v8-sidebar > .gcp-v8-brand {
  grid-row: 1;
  grid-column: 1;
}

.gcp-stage1-shell .gcp-v8-sidebar > .gcp-v8-sidebar__nav {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  /* The old rail reserved a deep footer gap here. The artwork field owns that
     space now, so the navigation ends with its last item. */
  padding-bottom: var(--gcp-space-2);
  overflow-y: auto;
}

.gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art {
  position: relative;
  z-index: 0;
  grid-row: 3 / 5;
  grid-column: 1;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  margin: var(--gcp-space-2) calc(var(--gcp-space-3) * -1) calc(var(--gcp-space-3) * -1);
  overflow: hidden;
  align-self: stretch;
}

.gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image: none;
  mask-image: none;
}

.gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-bottom {
  grid-row: 4;
  grid-column: 1;
  z-index: 1;
  align-self: end;
}

/* --- 2. The navigation never collapses ---------------------------------- */

.gcp-stage1-shell .gcp-v22-mobile-menu {
  display: none;
}

@media (max-width: 1023px) {
  .gcp-stage1-shell {
    display: grid;
    grid-template-columns: var(--gcp-layout-sidebar-compact) minmax(0, 1fr);
  }

  .gcp-stage1-shell > .gcp-v8-sidebar {
    display: grid;
  }

  .gcp-stage1-shell .gcp-v22-mobile-menu {
    display: none;
  }
}

@media (max-width: 900px) {
  .gcp-stage1-shell {
    --gcp-layout-sidebar-compact: 168px;
  }
}

@media (max-width: 767px) {
  .gcp-stage1-shell {
    --gcp-layout-sidebar-compact: 152px;
  }

  .gcp-stage1-shell .gcp-v8-sidebar {
    padding: var(--gcp-space-3) var(--gcp-space-2) var(--gcp-space-2);
  }

  .gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art {
    margin-inline: calc(var(--gcp-space-2) * -1);
    margin-bottom: calc(var(--gcp-space-2) * -1);
  }

  .gcp-stage1-shell .gcp-v8-nav-group > a {
    height: auto;
    min-height: 32px;
    padding-block: 6px;
  }

  .gcp-stage1-shell .gcp-v8-nav-group > a > span {
    overflow: visible;
    line-height: 14px;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .gcp-stage1-shell {
    --gcp-layout-sidebar-compact: 138px;
    --gcp-component-nav-padding: 9px;
    --gcp-component-nav-gap: 7px;
    --gcp-component-nav-icon: 15px;
  }

  .gcp-stage1-shell .gcp-v8-nav-group > a {
    font-size: 11px;
  }
}

/* --- 3. Remaining design-screen sidebar details ------------------------- */

/* In the design screens the ink does not start with a hard line: it washes in
   over the navy just under the last navigation item. */
.gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 17%, var(--gcp-color-card-white) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 17%, var(--gcp-color-card-white) 100%);
}

/* The thin gold arc that enters the rail from the right, as drawn. */
.gcp-stage1-shell .gcp-v8-sidebar::before {
  position: absolute;
  top: 7.5rem;
  right: -9.5rem;
  z-index: 0;
  width: 14rem;
  height: 14rem;
  display: block;
  border: 1px solid var(--gcp-color-sidebar-gold-border);
  border-radius: var(--gcp-radius-round);
  content: "";
  pointer-events: none;
}

/* The brand badge: cream disc, gold ring, ink pagoda — as drawn. */
.gcp-stage1-shell .gcp-v8-brand__mark {
  border: 1px solid var(--gcp-color-gold);
  background: var(--gcp-color-card-white);
}

.gcp-stage1-shell .gcp-v8-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

/* --- 4. Narrow-width polish for the always-on rail ---------------------- */

@media (max-width: 1023px) {
  /* A navigation label is never shortened: it wraps instead. */
  .gcp-stage1-shell .gcp-v8-nav-group > a {
    height: auto;
    min-height: 32px;
    padding-block: 6px;
  }

  .gcp-stage1-shell .gcp-v8-nav-group > a > span {
    overflow: visible;
    line-height: 14px;
    text-overflow: clip;
    white-space: normal;
  }

  /* The rail now owns part of the width, so the top bar gives the page name
     room by compacting the search field and the owner button. */
  .gcp-stage1-shell .gcp-v8-topbar {
    grid-template-columns: minmax(96px, 1fr) minmax(150px, 260px) auto;
  }

  .gcp-stage1-shell .gcp-stage1-global-search {
    width: 100%;
    min-width: 0;
  }

  .gcp-stage1-shell .gcp-stage1-global-search kbd {
    display: none;
  }

  .gcp-stage1-shell .gcp-v8-account > .gcp-stage1-owner-trigger > span {
    display: none;
  }
}

/* A section's tab strip takes its own line and scrolls once the rail shares
   the width, so tabs and their toolbar never sit on top of each other. */
@media (max-width: 1023px) {
  .gcp-stage1-shell .gcp-stage1-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gcp-stage1-shell .gcp-stage1-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   Genie Control Panel — artwork edges dissolve into the page (2 September 2026)

   The exact mockup crops were installed with every mask switched off so the
   pixels stayed untouched. That also removed the soft edge the design has: a
   crop boundary became a visible straight line, and the lower-corner pieces
   read as rectangles pasted inside their card. These rules put the fade back
   without altering any pixel inside the artwork.
   ========================================================================== */

/* Page headers on a desktop width: the painting washes out on its left and
   along its lower edge, so it meets the cream canvas with no boundary. */
@media (min-width: 1024px) {
  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.5) 13%, var(--gcp-color-card-white) 27%),
      linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 9%, var(--gcp-color-card-white) 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.5) 13%, var(--gcp-color-card-white) 27%),
      linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 9%, var(--gcp-color-card-white) 80%, transparent 100%);
    mask-composite: intersect;
  }
}

/* A laptop between these widths lays the header out as one column, so the copy
   used to run on into the painting. The copy now stops before the artwork
   becomes solid, and the painting keeps the same soft edges. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__copy,
  .gcp-stage1-hero[data-artwork-page="systemStatus"] .gcp-stage1-hero__copy,
  .gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] .gcp-stage1-hero__copy {
    width: min(56%, 440px);
  }

  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-body {
    max-width: 100%;
  }
}

/* On a tablet the painting lies across the whole header, so it fades in from
   the middle instead of from its left edge. */
@media (min-width: 768px) and (max-width: 1023px) {
  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, transparent 44%, var(--gcp-color-card-white) 74%),
      linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 16%, var(--gcp-color-card-white) 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, transparent 44%, var(--gcp-color-card-white) 74%),
      linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 16%, var(--gcp-color-card-white) 78%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Lower-corner and edge pieces dissolve outwards from the middle of the
   picture in every direction.

   The first attempt faded outwards from the picture's own bottom-right corner,
   which left that corner fully solid, and the card then cut the picture off
   with a straight line. Both edges were still visible on a desktop and on a
   phone. Fading from the middle removes every boundary. */
.page-artwork-decoration.is-pixel-exact img {
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 52% 44%, var(--gcp-color-card-white) 8%, rgb(0 0 0 / 0.72) 38%, rgb(0 0 0 / 0.28) 62%, transparent 82%);
  mask-image: radial-gradient(ellipse 64% 64% at 52% 44%, var(--gcp-color-card-white) 8%, rgb(0 0 0 / 0.72) 38%, rgb(0 0 0 / 0.28) 62%, transparent 82%);
}

/* A card that carries one of these pieces must not clip it: in the design the
   ink drifts out of the card and dies away on the page behind it. */
.gcp-stage1-card:has(.page-artwork-decoration.is-pixel-exact) {
  overflow: visible;
}

/* The narrow incident strip lies flat along a card's lower edge. */
.gcp-exact-decoration--system-strip img {
  -webkit-mask-image: linear-gradient(90deg, var(--gcp-color-card-white) 0%, var(--gcp-color-card-white) 62%, transparent 100%);
  mask-image: linear-gradient(90deg, var(--gcp-color-card-white) 0%, var(--gcp-color-card-white) 62%, transparent 100%);
}

/* Two routes have no header painting of their own in the supplied set. They now
   share an exact crop, so they need its drawn size like every other route. */
.gcp-stage1-hero[data-artwork-page="clientsList"] {
  --gcp-exact-hero-width: 400px;
  --gcp-exact-hero-height: 216px;
}

.gcp-stage1-hero[data-artwork-page="knowledgeHubsList"] {
  --gcp-exact-hero-width: 508px;
  --gcp-exact-hero-height: 298px;
}

@media (max-width: 767px) {
  /* On a phone the header painting stacks under the copy, so it dissolves at
     its top and lower edge instead of its left. */
  .gcp-stage1-hero[data-artwork-fidelity="pixel-exact"] .gcp-stage1-hero__art img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 12%, var(--gcp-color-card-white) 82%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0%, var(--gcp-color-card-white) 12%, var(--gcp-color-card-white) 82%, transparent 100%);
    mask-composite: add;
  }

  /* The pieces are much smaller on a phone, so they dissolve a little sooner. */
  .page-artwork-decoration.is-pixel-exact img {
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 52% 44%, var(--gcp-color-card-white) 6%, rgb(0 0 0 / 0.7) 36%, rgb(0 0 0 / 0.26) 60%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 60% at 52% 44%, var(--gcp-color-card-white) 6%, rgb(0 0 0 / 0.7) 36%, rgb(0 0 0 / 0.26) 60%, transparent 80%);
  }
}

/* Owner-approved alpine paintings, 20 September 2026. Preserve every source pixel
   and its proportions; blend white paper into the existing warm page surface. */
.gcp-stage1-hero[data-artwork-fidelity] .gcp-stage1-hero__art:has(img[src*="/alpine-"]) picture {
  aspect-ratio: 2 / 1;
  height: auto;
  mix-blend-mode: multiply;
}
.gcp-stage1-hero[data-artwork-fidelity] .gcp-stage1-hero__art img[src*="/alpine-"],
.gcp-client-detail__art picture[data-artwork-fidelity] img[src*="/alpine-"] {
  object-fit: contain;
  mix-blend-mode: multiply;
}
.gcp-stage1-sidebar-art[data-artwork-fidelity]:has(img[src*="/alpine-"]) {
  height: auto;
  aspect-ratio: 1 / 3;
  mix-blend-mode: multiply;
}
.gcp-stage1-sidebar-art[data-artwork-fidelity] img[src*="/alpine-"],
.gcp-stage1-mobile-sidebar-art[data-artwork-fidelity] img[src*="/alpine-"] {
  object-fit: contain;
  object-position: center bottom;
}

/* Keep the owner-approved lower sidebar painting deliberately framed on the
   always-visible phone and tablet rail. The navigation may scroll inside its
   own lane when height is tight, so it cannot consume the painting's field. */
@media (max-width: 1023px) {
  .gcp-stage1-shell .gcp-v8-sidebar {
    grid-template-rows: auto minmax(0, auto) minmax(15rem, 1fr) auto;
  }

  .gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art[data-artwork-fidelity]:has(img[src*="/alpine-"]) {
    height: 100%;
    min-height: 15rem;
    aspect-ratio: auto;
    align-self: stretch;
    background: var(--gcp-color-sidebar-navy);
    mix-blend-mode: normal;
  }

  .gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art[data-artwork-fidelity] img[src*="/alpine-"] {
    object-fit: cover;
    object-position: center 58%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 12%, var(--gcp-color-card-white) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, var(--gcp-color-card-white) 12%, var(--gcp-color-card-white) 90%, transparent 100%);
  }

  .gcp-stage1-shell .gcp-v8-sidebar > .gcp-stage1-sidebar-art[data-artwork-fidelity]:has(img[src*="/alpine-"])::after {
    background: linear-gradient(180deg, rgba(6, 16, 23, 0.34) 0%, rgba(6, 16, 23, 0.16) 52%, rgba(6, 16, 23, 0.58) 100%);
  }

  .gcp-stage1-shell .gcp-stage1-sidebar-bottom {
    padding-top: var(--gcp-space-3);
  }
}

@media (max-width: 767px) {
  .gcp-stage1-shell .gcp-v8-sidebar {
    grid-template-rows: auto minmax(0, auto) minmax(13rem, 1fr) auto;
  }

  .gcp-stage1-shell .gcp-v8-brand {
    min-height: 56px;
    margin-bottom: var(--gcp-space-1);
    padding-bottom: var(--gcp-space-2);
  }

  .gcp-stage1-shell .gcp-v8-sidebar__nav {
    padding-top: 0;
  }

  .gcp-stage1-shell .gcp-v8-nav-group {
    gap: 0;
    margin-bottom: var(--gcp-space-1);
  }

  .gcp-stage1-shell .gcp-v8-nav-group > p {
    padding-bottom: 2px;
    font-size: 8px;
    line-height: 12px;
  }

  .gcp-stage1-shell .gcp-v8-nav-group > a {
    min-height: 26px;
    padding-block: 3px;
    font-size: 10px;
    line-height: 12px;
  }

  .gcp-stage1-shell .gcp-v8-nav-group > a > span {
    line-height: 12px;
  }

  .gcp-stage1-shell .gcp-stage1-sidebar-bottom {
    gap: 2px;
    padding-top: var(--gcp-space-1);
  }

  .gcp-stage1-shell .gcp-v8-private-note {
    min-height: 72px;
    padding: 6px;
  }

  .gcp-stage1-sidebar-owner {
    min-height: 40px;
    padding: 6px;
  }
}

/* ------------------------------------------------------------------------- */
/* 2 October 2026 — client selector, per-client sidebar sections, Overview   */
/* urgency, evidence age and review cards. Uses the existing panel tokens.   */
/* ------------------------------------------------------------------------- */

.gcp-client-selector {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--gcp-space-3);
  margin: var(--gcp-space-4) 0 var(--gcp-space-3);
  padding: var(--gcp-space-1);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-radius: var(--gcp-radius-card);
  background: color-mix(in srgb, var(--gcp-color-card-white) 88%, transparent);
  box-shadow: var(--gcp-shadow-flat);
}
.gcp-client-selector__row {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  gap: var(--gcp-space-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gcp-client-selector__row a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gcp-space-1);
  min-height: 40px;
  padding: 0 var(--gcp-space-3);
  border-radius: var(--gcp-radius-control);
  color: var(--gcp-color-text-muted);
  font-size: 13px;
  font-variation-settings: "wght" 600;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: center;
}
.gcp-client-selector__row a:hover { color: var(--gcp-color-text-primary); background: var(--gcp-color-page-cream); }
.gcp-client-selector__row a.is-active { color: var(--gcp-color-card-white); background: var(--gcp-color-sidebar-navy); }
.gcp-client-selector__row a.is-inactive { opacity: 0.72; }
.gcp-client-selector__row a small { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.gcp-client-selector__choose {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gcp-space-1);
  padding: 0 var(--gcp-space-2);
  color: var(--gcp-color-blue);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.gcp-client-selector__choose svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .gcp-client-selector { margin-top: var(--gcp-space-3); }
  .gcp-client-selector__choose span { display: none; }
  .gcp-client-selector__row a { min-height: 44px; }
}

/* The selected client's own sections, nested under Clients in the sidebar. */
.gcp-client-context-nav {
  display: grid;
  gap: 2px;
  margin: 2px 0 var(--gcp-space-2) var(--gcp-space-4);
  padding-left: var(--gcp-space-2);
  border-left: 1px solid var(--gcp-color-sidebar-divider);
}
.gcp-client-context-nav > p {
  margin: var(--gcp-space-1) 0 2px;
  color: var(--gcp-color-sidebar-text-muted);
  font-size: 11px;
  font-variation-settings: "wght" 700;
}
.gcp-client-context-nav > a {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--gcp-space-2);
  border-radius: var(--gcp-radius-active-nav);
  color: var(--gcp-color-sidebar-text);
  font-size: 12px;
  text-decoration: none;
}
.gcp-client-context-nav > a:hover { background: var(--gcp-color-sidebar-hover); color: var(--gcp-color-card-white); }
.gcp-client-context-nav > a.is-active { background: var(--gcp-color-sidebar-surface-soft); color: var(--gcp-color-card-white); box-shadow: inset 2px 0 0 var(--gcp-color-gold); }
.gcp-v22-mobile-sheet__nav .gcp-client-context-nav > a { min-height: 40px; }

/* How current the evidence is. */
.gcp-overview-freshness,
.gcp-client-evidence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gcp-space-2);
  margin: var(--gcp-space-4) 0;
}
.gcp-overview-freshness > span,
.gcp-client-evidence-strip > span {
  min-width: 220px;
  flex: 1 1 220px;
  display: grid;
  gap: 2px;
  padding: var(--gcp-space-3);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-left-width: 4px;
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
}
.gcp-overview-freshness small,
.gcp-client-evidence-strip small { color: var(--gcp-color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.gcp-overview-freshness em,
.gcp-client-evidence-strip em { font-style: normal; font-size: 12px; }
.gcp-overview-freshness .is-fresh,
.gcp-client-evidence-strip .is-fresh { border-left-color: var(--gcp-color-success); }
.gcp-overview-freshness .is-stale,
.gcp-client-evidence-strip .is-stale { border-left-color: var(--gcp-color-warning); background: var(--gcp-color-warning-surface); }
.gcp-overview-freshness .is-unknown,
.gcp-client-evidence-strip .is-unknown { border-left-color: var(--gcp-color-border-cool); }
.gcp-overview-freshness > p {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: var(--gcp-space-2);
  margin: 0;
  color: var(--gcp-color-warning-text);
  font-size: 13px;
}
.gcp-overview-freshness > p svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Ads and ad accounts — urgent now. */
.gcp-overview-ad-issues,
.gcp-overview-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--gcp-layout-grid-gap, var(--gcp-space-4));
}
.gcp-overview-ad-issue,
.gcp-overview-review {
  display: grid;
  gap: var(--gcp-space-2);
  padding: var(--gcp-space-4);
  border: var(--gcp-border-default-width) var(--gcp-border-default-style) var(--gcp-border-default-color);
  border-top: 3px solid var(--gcp-color-border-cool);
  border-radius: var(--gcp-radius-card);
  background: var(--gcp-color-card-white);
  box-shadow: var(--gcp-shadow-card);
}
.gcp-overview-ad-issue.is-blocking { border-top-color: var(--gcp-color-error); }
.gcp-overview-ad-issue.is-warning:not(.is-blocking) { border-top-color: var(--gcp-color-warning); }
.gcp-overview-ad-issue.is-neutral { border-top-color: var(--gcp-color-border-cool); }
.gcp-overview-ad-issue header,
.gcp-overview-review header { display: grid; gap: 2px; }
.gcp-overview-ad-issue__kind,
.gcp-overview-review header > span {
  justify-self: start;
  padding: 2px var(--gcp-space-2);
  border-radius: var(--gcp-radius-round);
  background: var(--gcp-color-page-cream);
  color: var(--gcp-color-text-primary);
  font-size: 11px;
  font-variation-settings: "wght" 700;
}
.gcp-overview-ad-issue.is-blocking .gcp-overview-ad-issue__kind { background: var(--gcp-color-error-surface); color: var(--gcp-color-error-text); }
.gcp-overview-ad-issue header strong,
.gcp-overview-review header strong { font-size: 15px; }
.gcp-overview-ad-issue header small,
.gcp-overview-review header small { color: var(--gcp-color-text-muted); font-size: 12px; }
.gcp-overview-ad-issue dl { display: grid; gap: var(--gcp-space-1); margin: 0; }
.gcp-overview-ad-issue dl > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--gcp-space-2); font-size: 13px; }
.gcp-overview-ad-issue dt { color: var(--gcp-color-text-muted); }
.gcp-overview-ad-issue dd { margin: 0; overflow-wrap: anywhere; }
.gcp-overview-ad-issue dd.is-unconfirmed { color: var(--gcp-color-text-muted); font-style: italic; }
.gcp-overview-ad-issue dd.is-stale { color: var(--gcp-color-warning-text); font-variation-settings: "wght" 650; }
.gcp-overview-ad-issue footer,
.gcp-overview-review footer { display: flex; flex-wrap: wrap; gap: var(--gcp-space-2) var(--gcp-space-4); font-size: 12px; }
.gcp-overview-ad-issue footer a,
.gcp-overview-review footer a,
.gcp-overview-review ul a { display: inline-flex; align-items: center; gap: 4px; color: var(--gcp-color-blue); text-decoration: none; }
.gcp-overview-ad-issue footer svg,
.gcp-overview-review footer svg,
.gcp-overview-review ul svg { width: 13px; height: 13px; }
.gcp-overview-review.is-overdue { border-top-color: var(--gcp-color-error); }
.gcp-overview-review ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.gcp-overview-review > p { margin: 0; color: var(--gcp-color-text-muted); font-size: 13px; }
.gcp-overview-review footer .is-missing { color: var(--gcp-color-text-muted); }
.gcp-overview-not-repeated { margin-top: var(--gcp-space-3); font-size: 13px; }
.gcp-overview-not-repeated summary { cursor: pointer; color: var(--gcp-color-text-muted); }
.gcp-overview-not-repeated ul { margin: var(--gcp-space-2) 0 0; padding-left: var(--gcp-space-4); }
.gcp-overview-not-repeated small { color: var(--gcp-color-text-muted); }
.gcp-overview-more { margin: var(--gcp-space-2) 0 0; font-size: 13px; }
.gcp-v8-agenda article.is-overdue strong { color: var(--gcp-color-error-text); }
@media (max-width: 767px) {
  .gcp-overview-ad-issue dl > div { grid-template-columns: 1fr; gap: 0; }
}
.gcp-v15-all-clear.is-unknown svg { color: var(--gcp-color-warning); }

/* Overview: open work received from real conversations (9 Oct 2026). */
.gcp-overview-work .gcp-work-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); min-width: 0; }
.gcp-overview-work { min-width: 0; max-width: 100%; }
.gcp-work-item { background: var(--gcp-color-card-white, #fff); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 14px; padding: 14px 16px; min-width: 0; overflow-wrap: anywhere; }
.gcp-work-item header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.82rem; }
.gcp-work-item header small { margin-left: auto; opacity: 0.7; }
.gcp-work-item__status { border-radius: 999px; padding: 2px 10px; font-weight: 600; color: #fff; background: #475569; }
.gcp-work-item.is-waiting_owner .gcp-work-item__status { background: #b45309; }
.gcp-work-item.is-blocked .gcp-work-item__status { background: #b91c1c; }
.gcp-work-item.is-in_progress .gcp-work-item__status { background: #0f766e; }
.gcp-work-item.is-discussed_no_answer .gcp-work-item__status { background: #6d28d9; }
.gcp-work-item.is-requested_not_started .gcp-work-item__status { background: #1d4ed8; }
.gcp-work-item.is-completed_verified .gcp-work-item__status { background: #15803d; }
.gcp-work-item h3 { margin: 8px 0 4px; font-size: 1rem; }
.gcp-work-item p { margin: 4px 0; font-size: 0.9rem; }
.gcp-work-item__decision { color: #92400e; }
.gcp-work-item__blocker { color: #991b1b; }
.gcp-work-item__evidence ul { margin: 4px 0 4px 18px; }
.gcp-work-item footer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.82rem; }
.gcp-work-item footer svg { width: 14px; height: 14px; vertical-align: -2px; }
.gcp-work-done { margin-top: 14px; }
.gcp-overview-work { scroll-margin-top: 96px; }
.gcp-work-item__evidence { font-size: 0.82rem; margin: 4px 0; }
.gcp-work-item__evidence summary { cursor: pointer; opacity: 0.8; }
.gcp-work-done summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }