/* F0026 organisation, with the F0027 appearance preserved.
   App and component styles share the page layer in their original order.
   This layer styles only shared feedback and dialogs. relook.css follows the
   page styles in the page layer, preserving the existing cascade. */
@layer page, ui;

@layer ui {
    .ui-notice, .ui-feedback, .ui-dialog {
        box-sizing: border-box;
        padding: 16px;
        border: 1px solid rgba(29, 53, 87, 0.15);
        border-radius: 12px;
        background: var(--card-bg, #fff);
        color: var(--primary, #1d3557);
        font: inherit;
    }

    .ui-feedback:not(.is-visible) { display: none; }
    .ui-feedback.is-visible { display: block; }
    .ui-notice p, .ui-feedback p { margin: 0; }
    .ui-notice button, .ui-feedback [data-ui-recovery] { margin-top: 12px; }
    .ui-notice--error, .ui-feedback.is-error { color: #b42318; border-color: #b42318; }
    .ui-feedback.is-success { color: #1f7a4d; border-color: #1f7a4d; }
    .ui-field-error { color: #b42318; margin: 6px 0 0; font-size: 14px; }
    [data-ui-error-id][aria-invalid="true"] { border-color: #b42318; }

    .ui-dialog {
        width: min(600px, calc(100% - 32px));
        max-height: calc(100dvh - 32px);
        overflow: auto;
        padding: 24px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    }
    .ui-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
    .ui-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 24px; }
    .ui-dialog button, .ui-notice button, .ui-notice a {
        font: inherit;
        padding: 0.55rem 0.9rem;
        border-radius: 10px;
        cursor: pointer;
    }
    .ui-skip { position: fixed; z-index: 10000; top: 8px; left: 16px; transform: translateY(-200%); }
    .ui-skip:focus { transform: none; background: var(--card-bg, #fff); padding: 12px 20px; }
    .ui-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}