/* Portal utilities — a deliberately small, pt- prefixed vocabulary on the --pt-* tokens.
   Loaded last so a utility wins over a component default. Reach for a component
   class in styles.css before adding a utility here; a cluster that repeats three
   times is a component, not a utility. */

/* ---------- Layout ---------- */
.pt-flex            { display: flex; }
.pt-flex-col        { flex-direction: column; }
.pt-flex-wrap       { flex-wrap: wrap; }
.pt-items-center    { align-items: center; }
.pt-justify-center  { justify-content: center; }
.pt-justify-between { justify-content: space-between; }
.pt-flex-1          { flex: 1 1 0%; min-width: 0; }
.pt-w-full          { width: 100%; }
.pt-mx-auto         { margin-left: auto; margin-right: auto; }
.pt-hidden          { display: none; }
/* Phones only: the shell header drops its secondary action below 640px */
@media (max-width: 639px) {
    .pt-hidden-mobile { display: none; }
}

/* ---------- Spacing (index = multiple of 4px: 1=4px 2=8px 4=16px 6=24px 8=32px) ---------- */
.pt-gap-1 { gap: var(--pt-space-1); }
.pt-gap-2 { gap: var(--pt-space-2); }
.pt-gap-4 { gap: var(--pt-space-4); }
.pt-gap-6 { gap: var(--pt-space-6); }

/* Vertical rhythm between direct children (the old space-y-*) */
.pt-stack-2 > * + * { margin-top: var(--pt-space-2); }
.pt-stack-4 > * + * { margin-top: var(--pt-space-4); }
.pt-stack-6 > * + * { margin-top: var(--pt-space-6); }

.pt-mt-1 { margin-top: var(--pt-space-1); }
.pt-mt-2 { margin-top: var(--pt-space-2); }
.pt-mt-4 { margin-top: var(--pt-space-4); }
.pt-mt-6 { margin-top: var(--pt-space-6); }
.pt-mt-8 { margin-top: var(--pt-space-8); }
.pt-mb-1 { margin-bottom: var(--pt-space-1); }
/* Inline icon before a text run inside a button span (where .btn gap cannot reach) */
.pt-mr-2 { margin-right: var(--pt-space-2); }

/* ---------- Type ---------- */
.pt-text-xs { font-size: var(--pt-text-xs); }
.pt-text-sm { font-size: var(--pt-text-sm); }
.pt-text-lg { font-size: var(--pt-text-lg); }
.pt-text-xl { font-size: var(--pt-text-xl); }
.pt-text-center { text-align: center; }
.pt-text-left   { text-align: left; }
.pt-text-muted   { color: var(--pt-fg-muted); }
.pt-text-accent  { color: var(--pt-rocket-flame); }
.pt-text-success { color: var(--pt-galactic-seafoam); }
.pt-font-medium { font-weight: 500; }
.pt-caps { text-transform: uppercase; letter-spacing: 0.05em; }
/* Comfortable line length for a centered paragraph */
.pt-measure { max-width: 448px; margin-left: auto; margin-right: auto; }
/* Text that carries a title tooltip */
.pt-abbr { cursor: help; text-decoration: underline dotted; }