/* Shared UI geometry. Load after feature styles so feature color remains intact. */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --text-page-title: clamp(2rem, 4vw, 2.8rem);
    --text-section-title: 1.25rem;
    --text-body: 1rem;
    --text-compact: 0.875rem;
    --text-helper: 0.8125rem;
    --text-meta: 0.6875rem;
    --control-default: 44px;
    --control-compact: 38px;
    --control-small: 32px;
    --radius-control: 8px;
    --radius-card: 10px;
    --radius-panel: 12px;
    --radius-pill: 999px;
    --panel-padding: 24px;
    --panel-padding-compact: 16px;
    --overlay-width: 480px;
    --dialog-width: 640px;
}

.page-heading h1 { font-size: var(--text-page-title); }
.panel { border-radius: var(--radius-panel); padding: var(--panel-padding); }
.minute-card,
.member-card,
.stat-card { border-radius: var(--radius-card); }

.button {
    min-height: var(--control-default);
    border-radius: var(--radius-control);
    padding: 10px 16px;
    line-height: 24px;
}

.button-compact {
    min-height: var(--control-compact);
    padding: 8px 12px;
    font-size: var(--text-compact);
    line-height: 20px;
}

.button-small,
.button-icon {
    min-height: var(--control-small);
    padding: 5px 10px;
    font-size: var(--text-helper);
    line-height: 20px;
}

.button-icon {
    width: var(--control-small);
    min-width: var(--control-small);
    padding-right: 0;
    padding-left: 0;
}

.button-text {
    min-height: 0;
    border: 0;
    padding: 4px;
    background: transparent;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
select {
    min-height: var(--control-default);
    padding: 9px 12px;
}

.density-compact input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
.density-compact select {
    min-height: var(--control-compact);
    padding: 6px 10px;
    font-size: var(--text-compact);
}

.tabs-segmented {
    min-height: var(--control-compact);
    border-radius: var(--radius-control);
}

.ui-state {
    display: grid;
    gap: var(--space-2);
    align-content: center;
    justify-items: center;
    min-width: 0;
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-panel);
    padding: var(--space-8) var(--space-6);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    text-align: center;
}

.ui-state--page { min-height: 280px; }
.ui-state--panel { min-height: 180px; }
.ui-state--list { min-height: 120px; }
.ui-state--inline {
    min-height: 0;
    justify-items: start;
    border-style: solid;
    padding: var(--space-4);
    text-align: left;
}

.ui-state__title { color: var(--text); font-size: var(--text-body); }
.ui-state__description { margin: 0; color: var(--muted); font-size: var(--text-compact); }
.ui-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.ui-state--inline .ui-state__actions { justify-content: flex-start; }
.ui-state--error { border-color: rgba(255, 123, 114, 0.42); }

.ui-skeleton {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.09);
}

.ui-skeleton::after {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    animation: ui-skeleton-shimmer 1.25s ease-in-out infinite;
}

.ui-skeleton--row { height: 52px; }
.ui-skeleton--short { width: 62%; }

@keyframes ui-skeleton-shimmer {
    from { transform: translateX(-120%); }
    to { transform: translateX(240%); }
}

.ui-overlay-backdrop { background: rgba(2, 10, 30, 0.72); backdrop-filter: blur(2px); }
.ui-drawer {
    width: min(var(--overlay-width), 100vw);
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}
.ui-overlay-header {
    min-height: 72px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid var(--border);
}
.ui-overlay-body { min-height: 0; padding: var(--space-6); overflow-y: auto; }
.ui-overlay-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
}
.ui-overlay-close { width: var(--control-small); min-width: var(--control-small); height: var(--control-small); padding: 0; }
.ui-dialog { width: min(var(--dialog-width), calc(100% - 32px)); max-height: calc(100% - 32px); border-radius: var(--radius-panel); }

/* Create Minutes: keep hidden radio controls from contributing 100%-wide overflow. */
.status-option { position: relative; }
.status-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.form-grid > *,
.minute-document-grid > *,
.attendance-row > *,
.report-row > *,
.business-row > * { min-width: 0; }
.sticky-actions {
    position: static;
    border-top: 1px solid var(--border);
    padding: var(--space-6) 0 0;
    background: transparent;
}

/* Core refinements. */
.dashboard-pulse-grid { align-items: start; }
.login-message { min-height: 20px; }
.login-panel input,
.login-panel .button { min-height: var(--control-default); }
.login-panel .button { font-size: var(--text-compact); letter-spacing: 0.06em; }
.login-panel label { font-size: var(--text-helper); letter-spacing: 0.08em; }
#global-search-input {
    box-sizing: border-box;
    width: 100%;
    padding-right: 12px;
    padding-left: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.68)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
}
.global-search-icon {
    display: none;
}
.nav-toggle {
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    border-color: rgba(126, 196, 255, 0.64);
    background: rgba(126, 196, 255, 0.13);
    box-shadow: 0 0 14px rgba(74, 163, 255, 0.28);
}
.feed-controls button,
.feed-actions button { min-height: var(--control-compact); padding: 8px 12px; font-size: var(--text-compact); }
.calendar-view-switch { min-height: var(--control-compact); }
.calendar-view-switch button { min-height: var(--control-compact); padding: 8px 12px; font-size: var(--text-compact); }
.calendar-event-drawer.ui-drawer { padding: 0; }
.calendar-event-drawer.ui-drawer .ui-overlay-body { display: grid; gap: var(--space-3); }
.calendar-event-drawer .ui-overlay-close { width: var(--control-small); min-width: var(--control-small); }
.document-domain-dialog.ui-dialog { width: min(var(--dialog-width), calc(100% - 32px)); height: auto; }
.document-domain-dialog .preview-body { height: auto; place-items: stretch; padding: var(--space-6); }

@media (max-width: 560px) {
    .panel { padding: var(--panel-padding-compact); }
    .ui-overlay-header,
    .ui-overlay-body { padding: var(--space-4); }
    .ui-overlay-footer { padding: var(--space-4); }
    .sticky-actions,
    .sticky-actions > div { width: 100%; }
    .sticky-actions > div { display: grid; grid-template-columns: 1fr; }
    .sticky-actions .button { width: 100%; text-align: center; }
    .report-row,
    .business-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-skeleton::after { animation: none; }
}