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

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

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-sky700);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
a:hover {
  color: var(--color-sky600);
}

/* 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);
  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: 13rem 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 {
  padding: 0 var(--space6) var(--space5);
  margin-bottom: var(--space3);
}

.sidebar__logo img {
  max-width: 8.75rem;
  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);
}

.page-header h1 {
  color: var(--color-navy600);
}

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

h1 {
  font: var(--typography-heading-h1semibold);
  color: var(--color-neutral900);
  margin: 0 0 var(--space2);
}

h2 {
  font: var(--typography-heading-h2semibold);
  color: var(--color-neutral900);
  margin: 0 0 var(--space4);
  padding-bottom: var(--space3);
  border-bottom: 1px solid var(--color-neutral200);
}

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);
}

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

.feature-list__group-title {
  font: var(--typography-heading-h3semibold);
  color: var(--color-neutral900);
  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: center;
  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 {
  color: var(--color-neutral700);
}

/* ---------- 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); }
.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);
}

.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: var(--space5) 0;
}

/* ---------- 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: 13rem;
    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; }
}