/* Shared Flokktid surfaces and controls. Layout helpers may refine size and placement. */
@layer components {
    .card {
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background: var(--surface);
    }

    .button-primary {
        border-radius: var(--radius-control);
        background: var(--primary);
        color: var(--on-primary);
        font-weight: 600;
    }

    .button-primary:hover { background: var(--primary-hover); }

    .form-control {
        min-height: 3rem;
        border: 1px solid var(--control-border);
        border-radius: var(--radius-control);
        padding: 0.75rem 1rem;
        background: var(--surface);
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .calendar-week-number {
        color: var(--muted);
        font-size: 0.875rem;
        font-variant-numeric: tabular-nums;
        text-align: center;
    }

    .calendar-month-grid {
        min-width: 22rem;
        grid-template-columns: 2.75rem repeat(7, minmax(0, 1fr));
    }
}