/* ==========================================================================
   Layout Primitives — CSS-only, Light-DOM custom elements

   Four attribute-selector-styled unknown tags that consume Phase 1 semantic
   spacing tokens. No JavaScript, no Shadow DOM.

   Gap attribute vocabulary (all four elements share this set):
     none      → 0
     tight     → --space-tight    (0.5rem)
     group     → --space-group    (0.75rem)
     form-row  → --space-form-row (1rem)
     block     → --space-block    (1.25rem)
     section   → --space-section  (2.5rem)

   Defaults differ per element (documented on each block below).
   ========================================================================== */

/* --------------------------------------------------------------------------
   <layout-stack>
   Vertical flex column. Default gap: form-row.
   -------------------------------------------------------------------------- */

layout-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-form-row);
}

/* --------------------------------------------------------------------------
   <layout-row>
   Horizontal flex row, wrapping, centered items. Default gap: group.
   -------------------------------------------------------------------------- */

layout-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-group);
    min-height: var(--space-6);
    width: 100%;
}

/* Align portrait and identity block to top of strip */
layout-row[align="start"] {
    align-items: flex-start;
}

/* --------------------------------------------------------------------------
   <layout-grid>
   Responsive auto-fit grid. Default gap: block.
   min="sm|md|lg" resolves via --grid-min-tiny/small/medium/large tokens (in main.css).
   The --grid-min custom property on the element itself is overridden by the
   [min] attribute rules, which set --grid-min to the appropriate token.
   -------------------------------------------------------------------------- */

layout-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(var(--grid-min, var(--grid-min-medium)), 1fr)
    );
    gap: var(--space-block);
    width: 100%;
}

/* --------------------------------------------------------------------------
   <layout-between>
   Horizontal flex row, space-between justify, wrapping. Default gap: group.
   -------------------------------------------------------------------------- */

layout-between {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-group);
    width: 100%;
}

/* --- Site logo: brand-mark + wordmark --- */
site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
}
site-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-md);
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1;
}
site-logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

/* --- Stat block: labeled numeric tile --- */
stat-block {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-group) var(--space-form-row);
    background: var(--color-bg-surface-bright);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-width: 84px;
}

stat-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

stat-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-text-muted);
}

/* Compact variant for inline usage */
stat-block[size="small"] {
    padding: var(--space-tight) var(--space-group);
    min-width: 64px;
}
stat-block[size="small"] stat-value {
    font-size: 1.125rem;
}

/* --- Page head: crumbs + kicker + h1 + meta (sub + actions) --- */
page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
    padding-bottom: var(--space-block);
}
page-crumbs {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
page-crumbs nav ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
}
page-crumbs li + li::before {
    content: "\203A";
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
}
page-crumbs a {
    color: var(--color-link);
}
page-crumbs span {
    color: var(--color-text-muted);
}

page-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-text-muted);
}
page-head h1 {
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    text-wrap: balance;
    text-align: left;
}
page-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);
}
page-sub {
    display: block;
    color: var(--color-text-secondary);
    max-width: var(--max-prose);
}
page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-group);
    align-items: center;
}

[gap="none"] {
    gap: 0;
}
[gap="tight"] {
    gap: var(--space-tight);
}
[gap="group"] {
    gap: var(--space-group);
}
[gap="form-row"] {
    gap: var(--space-form-row);
}
[gap="block"] {
    gap: var(--space-block);
}
[gap="section"] {
    gap: var(--space-section);
}

[rowgap="none"] {
    row-gap: 0;
}
[rowgap="tight"] {
    row-gap: var(--space-tight);
}
[rowgap="group"] {
    row-gap: var(--space-group);
}
[rowgap="form-row"] {
    row-gap: var(--space-form-row);
}
[rowgap="block"] {
    row-gap: var(--space-block);
}
[rowgap="section"] {
    row-gap: var(--space-section);
}

/* --- Surface attribute: orthogonal visual treatment --- */
[surface="raised"] {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
[surface="flat"] {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
[surface="sunken"] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* --- Pad attribute: orthogonal padding scale --- */
[pad="tight"] {
    padding: var(--space-tight);
}
[pad="group"] {
    padding: var(--space-group);
}
[pad="form-row"] {
    padding: var(--space-form-row);
}
[pad="block"] {
    padding: var(--space-block);
}
[pad="section"] {
    padding: var(--space-section);
}

[gridmin="tiny"] {
    --grid-min: var(--grid-min-tiny);
}

[gridmin="small"] {
    --grid-min: var(--grid-min-small);
}
[gridmin="medium"] {
    --grid-min: var(--grid-min-medium);
}
[gridmin="large"] {
    --grid-min: var(--grid-min-large);
}

@media (min-width: 48em) {
    page-meta {
        flex-direction: row;
        align-items: end;
        gap: var(--space-block);
    }
    page-sub {
        flex: 1 1 auto;
    }
    page-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

@media (max-width: 39.999em) {
    layout-stack {
        width: 100%;
    }

    layout-row {
        justify-content: center;
    }

    layout-between {
        grid-template-columns: 1fr;
    }
}