/**
 * Cobrowse testing site styles.
 * All values reference Glance UI Kit tokens (see ./tokens.css).
 */

/* ---------- Base ---------- */

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

:root {
  /* Corporate glance.cx heading face; body stays on UI kit Inter tokens. */
  --font-family-heading: "Outfit", var(--font-family-sans);
  /* Main-column text links (explicit underline color — avoid shorthand reset). */
  --color-link-main-fg: rgb(17, 85, 204);
  --color-link-main-fg-hover: rgb(11, 68, 170);
  --sidebar-width: calc(13rem + 18px);
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  /* Document-level font rendering (inherits to body and descendants). */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font: var(--typography-text-md-regular);
  font-family: var(--font-family-sans);
  color: var(--color-text-fg-on-light);
  background: var(--color-neutral50);
  min-height: 100vh;
}

.main a {
  color: var(--color-link-main-fg);
  font-weight: var(--font-weight-medium);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--color-sky400);
  -webkit-text-decoration-color: var(--color-sky400);
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.125rem;
}
.main a:hover {
  color: var(--color-link-main-fg-hover);
}

.main a .link-icon-external {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-inline-start: 0.2em;
  vertical-align: -0.1em;
}

/* The outline follows each element's own border-radius in modern browsers,
 * so we intentionally do not set border-radius here (would reshape the
 * element on focus). 2px is a raw value because the UI kit's
 * --border-width* tokens currently ship with broken rem values. */
:focus-visible {
  outline: 2px solid var(--color-base-focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space4);
  top: var(--space4);
  padding: var(--space2) var(--space4);
  background: var(--color-base-white);
  color: var(--color-text-fg-on-light);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform var(--duration-fast) ease;
  z-index: 10;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Layout ---------- */

.page {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  /* Gradient mirrors the Glance UI Kit Storybook sidebar
     (.storybook/manager-head.html). Deep navy base with a multiply-blended
     horizontal gradient that darkens the right edge. */
  background:
    linear-gradient(80deg, rgba(24, 32, 43, 0.35) 0%, rgba(24, 32, 43, 0.75) 49.5%),
    #193071;
  background-blend-mode: multiply, normal;
  color: var(--color-neutral100);
  padding: var(--space6) 0 var(--space8);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__logo {
  margin-top: 4px;
  padding: 0 var(--space6) var(--space5);
  margin-bottom: var(--space3);
}

.sidebar__logo img {
  max-width: calc(8.75rem * 0.9);
  height: auto;
  display: block;
}

.sidebar__title {
  font: var(--typography-label-sm-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--color-sky300);
  text-transform: uppercase;
  /* UI kit --letter-spacing-* tokens all resolve to ~0.02-0.04px (likely a Style Dictionary unit bug). Using raw 0.5px until the token scale is fixed. */
  letter-spacing: 0.5px;
  padding: var(--space5) var(--space6) var(--space2);
  margin: 0;
  border-bottom: 0;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
}

.sidebar__group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__group li {
  margin: 0;
}

.sidebar__link {
  display: block;
  color: var(--color-neutral200);
  padding: var(--space2) var(--space6);
  text-decoration: none;
  font: var(--typography-text-sm-medium);
  font-weight: var(--font-weight-medium);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.sidebar__link:hover,
.sidebar__link:focus-visible {
  background: var(--color-neutral800);
  color: var(--color-base-white);
}
.sidebar__link[aria-current="page"] {
  background: var(--color-neutral800);
  color: var(--color-base-white);
  box-shadow: inset -3px 0 0 var(--color-brand-primary-fill-base);
}

.main {
  padding: var(--space8);
  max-width: var(--dimension-lg);
  width: 100%;
}

.page-header {
  margin-bottom: var(--space6);
}

/* ---------- Typography ---------- */

h1 {
  font: var(--typography-heading-h1semibold);
  font-size: calc(1.5rem + 2px);
  margin: 0 0 var(--space2);
}

h2 {
  font: var(--typography-heading-h2semibold);
  font-size: calc(1.25rem + 2px);
  margin: 0 0 var(--space4);
  padding-bottom: var(--space3);
  border-bottom: 1px solid var(--color-neutral200);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(10, 18, 27);
}

.main h1,
.main h2,
.main h4,
.main h5,
.main h6 {
  font-family: var(--font-family-heading);
}

.main h3 {
  font: var(--typography-heading-h3semibold);
  font-family: var(--font-family-heading);
  font-size: calc(1.125rem + 2px);
}

/* Only the “Recommended set-up:” line — not feature-list h3s inside nested divs. */
#getting-started > h3 {
  margin-bottom: var(--space4);
}

p {
  margin: 0 0 var(--space4);
  line-height: var(--line-height-normal);
}

ol,
ul {
  margin: 0 0 var(--space4);
  padding-left: var(--space6);
}

li {
  margin-bottom: var(--space2);
  line-height: var(--line-height-normal);
}

.main ul li::marker,
.main ol li::marker {
  color: var(--color-sky400);
}

.feature-list-groups {
  margin: 0 0 var(--space4);
}

.feature-list__group-title {
  margin: 0 0 var(--space3);
}

.feature-list__group-title:not(:first-child) {
  margin-top: var(--space6);
}

.feature-list {
  list-style: none;
  margin: 0 0 var(--space5);
  padding: 0;
}

.feature-list-groups .feature-list:last-child {
  margin-bottom: 0;
}

.feature-list__item {
  display: flex;
  gap: var(--space3);
  align-items: flex-start;
  margin-bottom: var(--space2);
  line-height: var(--line-height-normal);
}

/* Fixed frame + scaled bitmap: toolbar PNGs often have generous padding so
   bumping only width/height barely changes the visible glyph. Zoom + clip
   makes size changes obvious and fills the slot. */
.feature-list__icon-wrap {
  flex: 0 0 var(--base-size9);
  width: var(--base-size9);
  height: var(--base-size9);
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-list__icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.45);
}

.feature-list__icon-wrap--placeholder {
  border: 1px dashed var(--color-neutral300);
  background: var(--color-neutral50);
}

.feature-list__placeholder-glyph {
  font: var(--typography-text-md-regular);
  color: var(--color-neutral400);
  line-height: 1;
}

code {
  font-family: var(--font-family-code);
  font-size: 0.9em;
  background: var(--color-neutral100);
  border: 1px solid var(--color-neutral200);
  padding: 0.125rem var(--space1);
  border-radius: var(--radius-sm);
}

.badge {
  display: inline-block;
  font: var(--typography-label-sm-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--color-base-white);
  background: var(--color-status-warning-strong-bg);
  padding: var(--space1) var(--space3);
  border-radius: var(--radius-full);
  margin-left: var(--space2);
  vertical-align: middle;
}

/* ---------- Sections / cards ---------- */

.section {
  background: var(--color-base-white);
  padding: var(--space6) var(--space8);
  margin-bottom: var(--space6);
  border-radius: var(--radius4xl);
  border: 1px solid var(--color-neutral100);
  scroll-margin-top: var(--space6);
}

/* Guarantee enough scroll room below the final section so that every nav
   anchor can scroll its target to the top of the viewport, even on tall
   screens where all sections would otherwise fit without scrolling. */
.main > .section:last-of-type {
  min-height: calc(100vh - var(--space8) * 2 - var(--space6));
}

.section__lead {
  font: var(--typography-text-lg-regular);
  color: var(--color-text-fg-on-light);
}

/* ---------- Buttons ----------
 * Variants override the local --btn-* custom properties rather than
 * duplicating the full rule block, so the base .btn owns all interaction
 * logic (hover/active/disabled) in one place.
 */

.btn {
  --btn-bg: var(--color-brand-primary-fill-base);
  --btn-bg-hover: var(--color-brand-primary-fill-hover);
  --btn-bg-pressed: var(--color-brand-primary-fill-pressed);
  --btn-bg-disabled: var(--color-brand-primary-fill-disabled);
  --btn-fg: var(--color-brand-primary-fg);
  --btn-fg-disabled: var(--color-text-disabled);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space2);
  padding: var(--space3) var(--space5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: var(--typography-label-md-medium);
  cursor: pointer;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
.btn:hover  { background: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-pressed); transform: translateY(1px); }

/* Stronger than global :focus-visible ring on solid / gradient fills (WCAG 2.4.7). */
.btn:focus-visible {
  outline: 2px solid rgb(10, 18, 27);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--btn-bg-disabled);
  color: var(--btn-fg-disabled);
  cursor: not-allowed;
}

.btn--secondary {
  --btn-bg: var(--color-accent-purple-strong-bg);
  --btn-bg-hover: var(--color-accent-purple-strong-hover);
  --btn-bg-pressed: var(--color-accent-purple-strong-pressed);
  --btn-fg: var(--color-accent-purple-strong-fg);
}

/*
 * Marketing pill CTA (e.g. glance.cx partners / cobrowse): vertical blue
 * gradient, dark label, full radius — see reference “Become a Partner” style.
 */
.btn--gradient {
  --btn-bg: linear-gradient(180deg, #32b5f4 0%, #0691e4 100%);
  --btn-bg-hover: linear-gradient(180deg, #3ebeff 0%, #0b9cee 100%);
  --btn-bg-pressed: linear-gradient(180deg, #2aa8e8 0%, #0580cc 100%);
  --btn-bg-disabled: var(--color-neutral200);
  --btn-fg: rgb(10, 18, 27);
  /* Disabled + light gray bg must meet 4.5:1 (neutral500 on neutral200 does not). */
  --btn-fg-disabled: var(--color-neutral700);
  border: 0;
  border-radius: var(--radius-full);
  padding: var(--space3) var(--space5);
  font: var(--font-weight-medium) var(--font-size400) / 1.3 var(--font-family-heading);
}

.btn--success {
  --btn-bg: var(--color-status-success-strong-bg);
  --btn-bg-hover: var(--color-status-success-strong-hover);
  --btn-bg-pressed: var(--color-status-success-strong-pressed);
  --btn-fg: var(--color-status-success-strong-fg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space3);
  margin: 0 0 var(--space5);
}

/* ---------- Forms ---------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space2);
  margin-bottom: var(--space4);
}

.form-field__label {
  font: var(--typography-label-md-medium);
  color: var(--color-neutral800);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: var(--space2) var(--space3);
  font: var(--typography-text-md-regular);
  color: var(--color-text-fg-on-light);
  background: var(--color-base-white);
  border: 1px solid var(--color-neutral300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover {
  border-color: var(--color-neutral400);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--color-brand-primary-fill-base);
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 127, 218, 0.2);
}

/* ---------- Masked field box ---------- */

.mask-box {
  border: 1px dashed var(--color-brand-destructive-fill-base);
  background: var(--color-red50);
  padding: var(--space4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space4);
}

.mask-box .form-field {
  margin-bottom: 0;
}

.mask-box__tag {
  display: inline-block;
  font: var(--typography-label-md-medium);
  color: var(--color-red700);
  background: var(--color-red100);
  padding: 0.125rem var(--space2);
  border-radius: var(--radius-sm);
  margin-right: var(--space2);
}

.input--sm {
  max-width: 6rem;
}

/* ---------- Session status ---------- */

.session-status {
  margin-top: var(--space4);
  padding: var(--space3) var(--space4);
  border-radius: var(--radius-md);
  font: var(--typography-text-sm-medium);
  color: var(--color-neutral700);
  background: var(--color-neutral100);
  min-height: 1.5rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 48rem) {
  .page {
    grid-template-columns: 1fr;
  }

  /* Stack content; keep sidebar nav layout identical to wide view (column,
     link padding, current-page inset bar). Only position/height differ so
     the main column is not stuck below a full-viewport sticky rail. */
  .sidebar {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sidebar__logo {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-inline: var(--space4);
  }

  .sidebar__logo img {
    margin-inline: auto;
  }

  .sidebar__nav {
    width: 100%;
    max-width: var(--sidebar-width);
    margin-inline: auto;
    align-items: stretch;
  }

  .sidebar__title {
    text-align: center;
    padding-inline: var(--space4);
  }

  .sidebar__link {
    text-align: center;
  }

  .main {
    padding: var(--space5) var(--space4);
  }

  .section {
    padding: var(--space5);
  }
}

/* ---------- Reduced motion ---------- */

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

  .btn:active { transform: none; }
  .skip-link { transition: none; }
}