/*
 * Sukud design system - utilities
 * Typography, layout primitives and helpers. Class selectors only, so
 * public pages can load them inside a design system island without the
 * reset in base.css.
 */

/* ---------- Typography ---------- */
.sk-display, .sk-h1, .sk-h2, .sk-h3 {
  font-family: var(--sk-font-display);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-display);
  font-optical-sizing: auto;
  text-wrap: balance;
}
.sk-display { font-size: var(--sk-display-xl); line-height: 1.05; font-weight: var(--sk-weight-black); }
.sk-h1 { font-size: var(--sk-display-md); line-height: var(--sk-leading-display-md); }
.sk-h2 { font-size: var(--sk-display-sm); line-height: var(--sk-leading-display-sm); }
.sk-h3 { font-size: var(--sk-text-2xl); line-height: var(--sk-leading-2xl); letter-spacing: -0.015em; }
.sk-h4 { font-size: var(--sk-text-lg); line-height: var(--sk-leading-lg); font-weight: var(--sk-weight-semibold); letter-spacing: var(--sk-tracking-tight); }
.sk-h5 { font-size: var(--sk-text-md); line-height: var(--sk-leading-md); font-weight: var(--sk-weight-semibold); }
.sk-eyebrow {
  font-size: var(--sk-text-2xs);
  line-height: var(--sk-leading-2xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-caps);
  text-transform: uppercase;
  color: var(--sk-fg-subtle);
}
.sk-lead { font-size: var(--sk-text-lg); line-height: var(--sk-leading-lg); color: var(--sk-fg-muted); text-wrap: pretty; }
.sk-body { font-size: var(--sk-text-md); line-height: 1.55; text-wrap: pretty; }
.sk-small { font-size: var(--sk-text-sm); line-height: var(--sk-leading-sm); }
.sk-tiny { font-size: var(--sk-text-xs); line-height: var(--sk-leading-xs); }
.sk-muted { color: var(--sk-fg-muted); }
.sk-subtle { color: var(--sk-fg-subtle); }
.sk-strong { font-weight: var(--sk-weight-semibold); color: var(--sk-fg); }
.sk-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.sk-mono { font-family: var(--sk-font-mono); font-size: 0.92em; }
.sk-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-tone-text { color: var(--t-text); }

.sk-link {
  color: var(--t-text);
  font-weight: var(--sk-weight-semibold);
  text-decoration: underline;
  text-decoration-color: rgb(var(--t-rgb) / 0.3);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--sk-dur-fast) var(--sk-ease-out), color var(--sk-dur-fast);
}
.sk-link:hover { text-decoration-color: currentColor; }

/* Inline code: model IDs, keys, file names. */
.sk-code { padding: 1px 6px; border-radius: 6px; background: var(--sk-surface-sunken); color: var(--sk-fg); font-family: var(--sk-font-mono); font-size: 0.86em; overflow-wrap: anywhere; }
.sk-prose { font-size: var(--sk-text-md); line-height: 1.65; color: var(--sk-fg); max-width: 68ch; }
.sk-prose > * + * { margin-top: 0.85em; }
.sk-prose h2, .sk-prose h3 { font-family: var(--sk-font-display); letter-spacing: -0.015em; margin-top: 1.4em; }
.sk-prose ul { list-style: disc; padding-left: 1.25em; }
.sk-prose ol { list-style: decimal; padding-left: 1.25em; }
.sk-prose a { color: var(--sk-brand-11); text-decoration: underline; text-underline-offset: 3px; }
.sk-prose code { font-family: var(--sk-font-mono); font-size: 0.88em; background: var(--sk-surface-sunken); border: 1px solid var(--sk-border-subtle); padding: 0.1em 0.35em; border-radius: 6px; }

/* ---------- Layout primitives ----------
 * Gap is owned by the container, never by children's margins. */
.sk-stack { display: flex; flex-direction: column; gap: var(--gap, var(--sk-space-4)); min-width: 0; }
.sk-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sk-space-2)); min-width: 0; }
.sk-row { display: flex; align-items: center; gap: var(--gap, var(--sk-space-3)); min-width: 0; }
/* Spacer or filler: takes the free space in any flex row. */
.sk-grow { flex: 1 1 auto; min-width: 0; }
.sk-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--gap, var(--sk-space-3)); min-width: 0; }
.sk-center { display: grid; place-items: center; }
.sk-grid {
  display: grid;
  gap: var(--gap, var(--sk-space-4));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr));
}
.sk-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr)); }
/* Main column + aside; stacks in containers under 900px. */
.sk-split { display: grid; gap: var(--gap, var(--sk-space-5)); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 900px) {
  .sk-split { grid-template-columns: minmax(0, 1fr) minmax(280px, var(--aside, 340px)); }
}
.sk-container { width: 100%; max-width: var(--max, var(--sk-content-max)); margin-inline: auto; padding-inline: var(--sk-gutter); }
.sk-cq { container-type: inline-size; }

.sk-gap-1 { --gap: var(--sk-space-1); }
.sk-gap-2 { --gap: var(--sk-space-2); }
.sk-gap-3 { --gap: var(--sk-space-3); }
.sk-gap-4 { --gap: var(--sk-space-4); }
.sk-gap-5 { --gap: var(--sk-space-5); }
.sk-gap-6 { --gap: var(--sk-space-6); }
.sk-gap-8 { --gap: var(--sk-space-8); }
.sk-gap-10 { --gap: var(--sk-space-10); }

.sk-visually-hidden, .sk-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.sk-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--sk-z-tooltip);
  padding: 8px 14px; border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-inverse); color: var(--sk-fg-inverse);
  font-weight: var(--sk-weight-semibold);
  transform: translateY(-160%);
  transition: transform var(--sk-dur-base) var(--sk-ease-out);
}
.sk-skip-link:focus-visible { transform: none; }

/* Responsive visibility, matching the system breakpoints:
 * sm 640 / md 768 / lg 1024 / xl 1280 */
@media (max-width: 639.98px) { .sk-hide-mobile { display: none !important; } }
@media (min-width: 640px) { .sk-only-mobile { display: none !important; } }
@media (max-width: 1023.98px) { .sk-hide-tablet-down { display: none !important; } }
@media (min-width: 1024px) { .sk-only-tablet-down { display: none !important; } }

@media print { .sk-skip-link { display: none !important; } }
.sk-glyph { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.2em; height: 1.2em; line-height: 1; }