/* as-utilities.css — Bootstrap-6-inspired utility patterns (TASK-AS-UTILITIES) */
.as-flex { display: flex; }
.as-flex-col { display: flex; flex-direction: column; }
.as-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.as-items-center { align-items: center; }
.as-justify-between { justify-content: space-between; }
.as-gap { gap: var(--space, 1rem); }
.as-mt-lg { margin-top: var(--space-lg, 1.5rem); }
.as-mb-md { margin-bottom: var(--space-md, 1rem); }
.as-text-sm { font-size: var(--font-sm, 0.875rem); color: var(--ink-soft); }

.as-nav-overflow {
  container-type: inline-size;
  display: flex;
  gap: var(--space, 1rem);
  overflow: hidden;
}
.as-nav-overflow > .as-nav-more { display: none; }
@container (max-width: 767px) {
  .as-nav-overflow > .as-nav-more { display: inline-flex; }
  .as-nav-overflow > .as-nav-primary { display: none; }
}

.as-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; }
.as-avatar-stack { display: inline-flex; }
.as-avatar-stack .as-avatar { margin-left: calc(var(--space, 1rem) * -0.35); border: 2px solid var(--bg); }
.as-avatar-status { position: relative; }
.as-avatar-status::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--green); border: 2px solid var(--bg); }
.as-avatar-status.is-verified::after { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-subtle); }

:root { --as-tint-brand: color-mix(in srgb, var(--brand) 12%, transparent); --as-tint-ink: color-mix(in srgb, var(--ink) 8%, transparent); }

.as-card { container-type: inline-size; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-md, 0.75rem); padding: var(--space, 1rem); }
@container (min-width: 768px) { .as-card { padding: calc(var(--space, 1rem) * 1.5); } }
.as-sidebar { container-type: inline-size; }
@container (min-width: 768px) { .as-sidebar { padding: var(--space-lg, 1.5rem); } }

details.as-faq { border: 1px solid var(--line); border-radius: var(--r-md, 0.75rem); padding: var(--space, 1rem); }
details.as-faq > summary { cursor: pointer; font-weight: var(--font-bold, 700); color: var(--ink); }
details.as-faq::details-content { padding-top: var(--space, 1rem); color: var(--ink-soft); }

.as-focusable:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm, 0.5rem); }