/* ─────────────────────────────────────────────────────────────
   Starboard · Primitives CSS
   Separator, Label, AspectRatio, VisuallyHidden, ScrollArea, Kbd+
   ───────────────────────────────────────────────────────────── */
@import url('../../colors_and_type.css');

/* ─── Visually hidden (screen-reader only) ─── */
.ad-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Separator ─── */
.ad-sep { border: 0; background: var(--neutral-200); flex: 0 0 auto; }
.ad-sep--h { height: 1px; width: 100%; margin: var(--space-sm) 0; }
.ad-sep--v { width: 1px; align-self: stretch; margin: 0 var(--space-2xs); }
.ad-sep--strong { background: var(--neutral-300); }
.ad-sep--label {
  display: flex; align-items: center; gap: var(--space-2xs);
  background: none; margin: var(--space-sm) 0;
  font-size: var(--text-xs-size); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.ad-sep--label::before, .ad-sep--label::after {
  content: ""; flex: 1; height: 1px; background: var(--neutral-200);
}

/* ─── Label ─── */
.ad-label {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-family: var(--font-display);
  font-weight: 600; font-size: 13px;
  color: var(--fg-strong); line-height: 1.4;
}
.ad-label__req { color: var(--error-500); font-weight: 600; }
.ad-label__optional { color: var(--fg-muted); font-weight: 400; font-size: var(--text-xs-size); }
.ad-label.is-disabled { color: var(--neutral-500); }
.ad-label.is-dimmed { color: var(--fg-muted); transition: color var(--motion-focus-primary); }

/* ─── Aspect ratio ─── */
.ad-ratio { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-md); }
.ad-ratio > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ─── Scroll area ─── */
.ad-scroll {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}
.ad-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ad-scroll::-webkit-scrollbar-track { background: transparent; }
.ad-scroll::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.ad-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-400); }
.ad-scroll--shadow {
  /* edge shadows that appear only when scrollable content remains */
  background:
    linear-gradient(var(--bg-elevated) 30%, rgba(255,255,255,0)) top,
    linear-gradient(rgba(255,255,255,0), var(--bg-elevated) 70%) bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.08), transparent) top,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.08), transparent) bottom;
  background-repeat: no-repeat;
  background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.875rem, 100% 0.875rem;
  background-attachment: local, local, scroll, scroll;
}

/* ─── Kbd additions (modifier glyph spacing) ─── */
.ad-kbd-combo { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.ad-kbd-combo__plus { font-size: 10px; color: var(--neutral-500); }