/* app-forge base styles, generated from tokens/base.json and tools/lib/base-css.ts. Do not edit. */
@layer base, components;

:root {
    --ui-layout-gutter: clamp(1rem, 4vw, 2rem);
    --ui-layout-reading-max: 68ch;
    --ui-layout-touch-target: 2.75rem;
    --ui-layout-card-min: 18rem;
    --ui-breakpoint-sm: 40rem;
    --ui-breakpoint-md: 48rem;
    --ui-breakpoint-lg: 64rem;
    --ui-breakpoint-xl: 80rem;
    --ui-z-dropdown: 1000;
    --ui-z-sticky: 1100;
    --ui-z-drawer: 1200;
    --ui-z-dialog: 1300;
    --ui-z-toast: 1400;
    --ui-z-tooltip: 1500;
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    [hidden] { display: none !important; }

    body {
        margin: 0;
        background: var(--ui-canvas);
        color: var(--ui-fg);
        font-family: var(--ui-font-body);
        font-size: var(--ui-text-base);
        line-height: var(--ui-leading-body);
        -webkit-text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
    }

    /* Vertical rhythm: elements carry space below them, never above, so stacks stay predictable. */
    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 var(--ui-gap-label);
        font-family: var(--ui-font-heading);
        font-weight: var(--ui-heading-weight);
        line-height: var(--ui-leading-heading);
        letter-spacing: var(--ui-heading-tracking);
        color: var(--ui-heading-color);
        text-wrap: balance;
    }
    h1 { font-size: var(--ui-h1-size); }
    h2 { font-size: var(--ui-h2-size); }
    h3 { font-size: var(--ui-h3-size); }
    h4 { font-size: var(--ui-h4-size); }
    h5 { font-size: var(--ui-h5-size); }
    h6 {
        font-size: var(--ui-h6-size);
        text-transform: var(--ui-h6-transform);
        letter-spacing: var(--ui-h6-tracking);
        color: var(--ui-h6-color);
    }
    * + h2, * + h3 { margin-top: var(--ui-gap-block); }

    p, ul, ol, dl, figure, pre, table, blockquote { margin: 0 0 var(--ui-gap-text); }
    :is(p, ul, ol, dl, figure, pre, table, blockquote):last-child { margin-bottom: 0; }
    p { text-wrap: pretty; max-width: var(--ui-layout-reading-max); }
    small { font-size: var(--ui-text-sm); }
    strong, b { font-weight: 600; }
    ul, ol { padding-left: 1.25em; }
    li + li { margin-top: var(--ui-gap-label); }
    hr { border: 0; border-top: 1px solid var(--ui-line); margin: var(--ui-gap-section) 0; }
    img, svg, video { max-width: 100%; height: auto; }
    figcaption { margin-top: var(--ui-gap-label); font-size: var(--ui-text-sm); color: var(--ui-muted); }
    mark { background: var(--ui-warning-bg); color: var(--ui-warning); padding: 0 0.15em; border-radius: 2px; }

    a {
        color: var(--ui-accent);
        font-weight: var(--ui-link-weight);
        text-decoration-line: var(--ui-link-decoration);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
    }
    a:hover, a:focus-visible {
        color: var(--ui-link-hover-color);
        text-decoration-line: var(--ui-link-hover-decoration);
        text-decoration-thickness: var(--ui-link-hover-thickness);
        background: var(--ui-link-hover-bg);
        border-radius: 2px;
    }

    blockquote {
        margin-left: 0;
        margin-right: 0;
        padding: var(--ui-quote-pad);
        border: var(--ui-quote-border);
        border-left: var(--ui-quote-bar) solid var(--ui-quote-bar-color);
        border-radius: var(--ui-quote-radius);
        background: var(--ui-quote-bg);
        font-size: var(--ui-quote-size);
        font-style: var(--ui-quote-style);
    }
    blockquote footer, blockquote cite { display: block; margin-top: var(--ui-gap-label); font-size: var(--ui-text-sm); font-style: normal; color: var(--ui-muted); }

    code, kbd, samp, pre { font-family: var(--ui-font-mono); font-size: var(--ui-code-size); }
    :not(pre) > code { background: var(--ui-code-bg); padding: 0.1em 0.35em; border-radius: var(--ui-radius-sm); }
    kbd { border: 1px solid var(--ui-control); border-bottom-width: 2px; border-radius: var(--ui-radius-sm); padding: 0 0.35em; background: var(--ui-surface); }
    pre { background: var(--ui-code-bg); padding: var(--ui-pad-card); border-radius: var(--ui-radius-md); overflow-x: auto; line-height: 1.5; }

    table { width: 100%; border-collapse: collapse; font-size: var(--ui-text-sm); }
    caption { text-align: left; color: var(--ui-muted); padding-bottom: var(--ui-gap-label); }
    th, td { text-align: left; padding: var(--ui-pad-cell); border-bottom: 1px solid var(--ui-line); vertical-align: top; }
    thead th { background: var(--ui-table-head-bg); border-bottom-color: var(--ui-table-head-line); font-weight: 600; }
    tbody tr:nth-child(even) { background: var(--ui-table-stripe); }

    fieldset { margin: 0; padding: var(--ui-pad-card); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); min-width: 0; }
    legend { padding: 0 var(--ui-gap-label); font-weight: 600; font-family: var(--ui-font-heading); }

    :focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus); outline-offset: 2px; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer components {
    /* Layout: use these instead of one-off margins. */
    .ui-container { max-width: var(--ui-layout-content-max); margin-inline: auto; padding: var(--ui-pad-page); }
    .ui-stack { display: grid; gap: var(--ui-gap-block); align-content: start; }
    .ui-stack > * { margin: 0; }
    .ui-stack--tight { gap: var(--ui-gap-label); }
    .ui-stack--loose { gap: var(--ui-gap-section); }
    .ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-gap-inline); }
    .ui-grid { display: grid; gap: var(--ui-gap-block); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-layout-card-min)), 1fr)); }
    .ui-section + .ui-section { margin-top: var(--ui-gap-section); }
    .ui-form { display: grid; gap: var(--ui-gap-field); }
    .ui-form-row { display: grid; gap: var(--ui-gap-field); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
    .ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-gap-inline); margin-top: var(--ui-gap-actions); }
    .ui-form > .ui-actions, .ui-stack > .ui-actions { margin-top: calc(var(--ui-gap-actions) - var(--ui-gap-field)); }
    .ui-table-wrap { overflow-x: auto; }
    .ui-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    .ui-card { background: var(--ui-surface); border: 1px solid var(--ui-card-border); border-radius: var(--ui-radius-md); box-shadow: var(--ui-card-shadow); overflow: hidden; }
    .ui-card-head {
        display: flex; align-items: center; gap: var(--ui-gap-inline);
        padding: var(--ui-pad-card-head);
        font-weight: 600;
        border-bottom: 1px solid var(--ui-line);
        background: var(--ui-card-header-bg);
        box-shadow: inset var(--ui-card-header-bar) 0 0 var(--ui-accent);
    }
    .ui-card-body { padding: var(--ui-pad-card); }
    .ui-card-body > :last-child { margin-bottom: 0; }

    .ui-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-gap-inline);
        min-height: var(--ui-layout-touch-target);
        padding: var(--ui-pad-control);
        border: 1px solid transparent;
        border-radius: var(--ui-radius-button);
        font: inherit; font-size: var(--ui-text-sm);
        font-weight: var(--ui-button-weight);
        text-transform: var(--ui-button-transform);
        letter-spacing: var(--ui-button-tracking);
        cursor: pointer;
        transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease),
            box-shadow var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease);
    }
    .ui-btn:hover:not(:disabled) { box-shadow: var(--ui-button-hover-shadow); transform: var(--ui-button-hover-lift); }
    .ui-btn:active:not(:disabled) { transform: none; }
    .ui-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .ui-btn--primary { background: var(--ui-accent); color: var(--ui-on-accent); }
    .ui-btn--primary:hover:not(:disabled) { background: var(--ui-accent-hover); }
    .ui-btn--secondary { background: var(--ui-surface); color: var(--ui-fg); border-color: var(--ui-control); }
    .ui-btn--secondary:hover:not(:disabled) { background: var(--ui-hover); }
    .ui-btn--ghost { background: transparent; color: var(--ui-accent); }
    .ui-btn--ghost:hover:not(:disabled) { background: var(--ui-accent-soft); }
    .ui-btn--danger { background: var(--ui-surface); color: var(--ui-danger); border-color: currentColor; }
    .ui-btn--danger:hover:not(:disabled) { background: var(--ui-danger-bg); }

    .ui-field { display: grid; gap: var(--ui-gap-label); font-size: var(--ui-text-sm); font-weight: 600; align-content: start; }
    .ui-label { display: inline-flex; align-items: center; gap: 0.35rem; }
    .ui-hint { font-size: var(--ui-text-xs); font-weight: 400; color: var(--ui-muted); }
    .ui-input {
        font: inherit; font-weight: 400; font-size: max(16px, var(--ui-text-base));
        min-height: var(--ui-layout-touch-target);
        padding: var(--ui-pad-input);
        border: 1px solid var(--ui-control);
        border-radius: var(--ui-radius-sm);
        background: var(--ui-surface);
        color: var(--ui-fg);
        width: 100%;
    }
    .ui-input::placeholder { color: var(--ui-muted); }
    .ui-check { display: flex; align-items: center; gap: var(--ui-gap-inline); min-height: var(--ui-layout-touch-target); font-weight: 600; font-size: var(--ui-text-sm); }
    .ui-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--ui-accent); }

    /* Help: a subtle ⓘ beside a label or action. The tip opens on hover, keyboard focus and tap. */
    .ui-help { position: relative; display: inline-flex; color: var(--ui-muted); cursor: help; border: 0; background: none; padding: 0; font: inherit; border-radius: 50%; }
    .ui-help:hover { color: var(--ui-accent); }
    .ui-help .ui-icon { width: 15px; height: 15px; }
    .ui-tip {
        position: absolute; z-index: var(--ui-z-tooltip); left: 50%; bottom: calc(100% + 6px);
        transform: translateX(calc(-50% + var(--ui-tip-shift, 0px)));
        width: max-content; max-width: min(18rem, calc(100vw - 2rem));
        padding: 0.45rem 0.65rem; border-radius: var(--ui-radius-sm);
        background: var(--ui-fg); color: var(--ui-surface);
        font-size: var(--ui-text-xs); font-weight: 400; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0;
        box-shadow: var(--ui-shadow-pop);
        display: none; /* hidden tips take no space, so they never widen the page */
        pointer-events: none;
    }
    .ui-help:hover .ui-tip, .ui-help:focus .ui-tip, .ui-help:focus-within .ui-tip { display: block; }
    .ui-note { display: flex; gap: var(--ui-gap-inline); align-items: flex-start; padding: var(--ui-pad-card); border-radius: var(--ui-radius-md); background: var(--ui-info-bg); color: var(--ui-info); font-size: var(--ui-text-sm); }
    .ui-note > .ui-icon { margin-top: 0.15em; }
    .ui-note p { margin: 0; color: inherit; max-width: none; }

    .ui-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--ui-text-xs); font-weight: 600; padding: var(--ui-pad-badge); border-radius: var(--ui-radius-pill); }
    .ui-badge--success { color: var(--ui-success); background: var(--ui-success-bg); }
    .ui-badge--warning { color: var(--ui-warning); background: var(--ui-warning-bg); }
    .ui-badge--danger { color: var(--ui-danger); background: var(--ui-danger-bg); }
    .ui-badge--info { color: var(--ui-info); background: var(--ui-info-bg); }
    .ui-badge--neutral { color: var(--ui-neutral); background: var(--ui-neutral-bg); }
    .ui-badge--highlight { color: var(--ui-highlight); background: var(--ui-highlight-bg); }

    .ui-icon {
        width: var(--ui-icon-size); height: var(--ui-icon-size); flex: none;
        fill: none; stroke: currentColor; stroke-width: var(--ui-icon-stroke);
        stroke-linecap: round; stroke-linejoin: round;
        vertical-align: -0.15em;
    }
    .ui-badge .ui-icon { width: 0.875rem; height: 0.875rem; }
    .ui-heading-icon { display: var(--ui-heading-icon-display); color: var(--ui-icon-color); margin-right: 0.4em; vertical-align: -0.1em; }
    .ui-heading-icon .ui-icon { width: 0.9em; height: 0.9em; }
    .ui-muted { color: var(--ui-muted); }
}