/* Flask application adapter. Public author themes retain their authored choices.
   All new page components use the same wf tokens as the React Mantine theme. */
body[data-wf-application] {
    font-family: var(--wf-font-interface);
    color: var(--wf-color-ink);
    background: var(--wf-color-paper);
}
[data-wf-application] h1, [data-wf-application] h2, [data-wf-application] h3 {
    font-family: var(--wf-font-literary);
    color: var(--wf-color-ink);
}
[data-wf-application] :is(header, aside, .bg-white) { background-color: var(--wf-color-panel); }
[data-wf-application] :is(.bg-gray-50, .bg-gray-100) { background-color: var(--wf-color-paper); }
[data-wf-application] :is(.text-gray-700, .text-gray-800, .text-gray-900) { color: var(--wf-color-ink); }
[data-wf-application] :is(.text-gray-500, .text-gray-600) { color: var(--wf-color-muted); }
[data-wf-application] :is(.sidebar-link.active, .sidebar-link:hover) { color: var(--wf-color-accent); background: var(--wf-color-selection); }
[data-wf-application] .sidebar-link.active i { color: var(--wf-color-accent); }
[data-wf-application] :is(a, button):is(.bg-indigo-600, .bg-blue-600) { background: var(--wf-color-accent); color: var(--wf-color-on-accent); border-radius: var(--wf-radius-control); }
[data-wf-application] :is(a, button):is(.bg-indigo-600, .bg-blue-600):hover { background: var(--wf-color-accent-hover); }
[data-wf-application] :is(.text-indigo-600, .text-blue-600, a.underline) { color: var(--wf-color-accent); }
[data-wf-application] :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
    border-color: var(--wf-color-border); border-radius: var(--wf-radius-control); color: var(--wf-color-ink); background: var(--wf-color-panel);
}
[data-wf-application] :is(input[type=checkbox], input[type=radio]) { accent-color: var(--wf-color-accent); color: var(--wf-color-accent); }
[data-wf-application] :is(button, a, input, textarea, select):focus-visible { outline: var(--wf-control-focus-width) solid var(--wf-color-accent); outline-offset: 3px; }
.wf-surface { background: var(--wf-color-panel); color: var(--wf-color-ink); border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-panel); }
.wf-button { display: inline-flex; justify-content: center; align-items: center; min-height: var(--wf-control-height); padding: var(--wf-space-sm) var(--wf-space-md); border: 1px solid var(--wf-color-accent); border-radius: var(--wf-radius-control); background: var(--wf-color-accent); color: var(--wf-color-on-accent); font: inherit; cursor: pointer; }
.wf-button:hover { background: var(--wf-color-accent-hover); }
.wf-button:focus-visible { outline: var(--wf-control-focus-width) solid var(--wf-color-accent); outline-offset: 3px; }
.wf-button:disabled { background: var(--wf-color-border); border-color: var(--wf-color-border); color: var(--wf-color-muted); cursor: not-allowed; }
@media (pointer: coarse) { .wf-button { min-height: var(--wf-control-touch); } }

/* Shared form primitives. Opt in through render_field(presentation='shared'). */
[data-wf-application] .wf-button { color: var(--wf-color-on-accent); text-decoration: none; }
[data-wf-application] .wf-button-secondary { background: var(--wf-color-panel); border-color: var(--wf-color-border); color: var(--wf-color-ink); }
[data-wf-application] .wf-button-secondary:hover { background: var(--wf-color-selection); border-color: var(--wf-color-accent); }
.wf-form { display: grid; gap: var(--wf-space-lg); }
.wf-field { min-width: 0; }
.wf-field-label { display: block; margin-bottom: var(--wf-space-sm); font-weight: 600; }
[data-wf-application] .wf-control { display: block; width: 100%; min-height: var(--wf-control-touch); padding: var(--wf-space-sm) var(--wf-space-md); border: 1px solid var(--wf-color-border); font: inherit; box-shadow: none; }
[data-wf-application] .wf-control:focus { border-color: var(--wf-color-accent); box-shadow: none; outline: var(--wf-control-focus-width) solid var(--wf-color-accent); outline-offset: 3px; }
[data-wf-application] .wf-control[aria-invalid=true] { border-color: var(--wf-color-danger); }
.wf-control::placeholder { color: var(--wf-color-muted); opacity: 1; }
.wf-field-help, .wf-field-errors { margin-top: var(--wf-space-sm); font-size: .875rem; }
.wf-field-help { color: var(--wf-color-muted); }
.wf-field-errors { color: var(--wf-color-danger); list-style: none; padding: 0; }
.wf-field-errors:empty { display: none; }
.wf-form-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wf-space-sm) var(--wf-space-md); font-size: .875rem; }
.wf-check { display: inline-flex; align-items: center; gap: var(--wf-space-sm); min-height: var(--wf-control-touch); cursor: pointer; }
.wf-form-divider { display: flex; align-items: center; gap: var(--wf-space-md); margin: var(--wf-space-lg) 0; color: var(--wf-color-muted); font-size: .875rem; }
.wf-form-divider::before, .wf-form-divider::after { content: ''; flex: 1; height: 1px; background: var(--wf-color-border); }

/* The platform host uses the same paper, ink and status colors as the workspace. */
.wf-platform { display: flex; flex-direction: column; min-height: 100vh; }
.wf-platform > main { flex-grow: 1; }
:where(.wf-platform) a { color: var(--wf-color-accent); }
:where(.wf-platform) a:hover { color: var(--wf-color-accent-hover); }
.wf-platform-header { border-bottom: 1px solid var(--wf-color-border); }
.wf-platform .wf-platform-brand { color: var(--wf-color-ink); font-family: var(--wf-font-literary); font-size: 1.5rem; font-weight: 700; }
.wf-platform-header #mobile-menu-button { min-width: var(--wf-control-touch); min-height: var(--wf-control-touch); }
.wf-platform .wf-platform-footer { background: var(--wf-color-panel); color: var(--wf-color-muted); border-top: 1px solid var(--wf-color-border); }
.wf-platform-footer :is(p, a, .text-gray-500) { color: var(--wf-color-muted); }
.wf-platform-footer hr { border-color: var(--wf-color-border); }
.wf-platform .flash-message { padding: var(--wf-space-md); margin-bottom: var(--wf-space-md); border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-control); font-size: .875rem; }
.wf-platform .flash-error { background: var(--wf-color-danger-surface); color: var(--wf-color-danger); border-color: var(--wf-color-danger-border); }
.wf-platform .flash-success { background: var(--wf-color-success-surface); color: var(--wf-color-success); border-color: var(--wf-color-success-border); }
.wf-platform .flash-warning { background: var(--wf-color-warning-surface); color: var(--wf-color-warning); border-color: var(--wf-color-warning-border); }
.wf-platform .flash-info { background: var(--wf-color-info-surface); color: var(--wf-color-info); }

/* Account composition; controls and surfaces above remain reusable across Flask. */
.wf-auth { width: min(100%, calc(var(--wf-reading-measure) * .65)); margin: 0 auto; padding: calc(var(--wf-space-xl) * 2) var(--wf-space-md) var(--wf-space-xl); }
.wf-auth-intro { text-align: center; margin-bottom: var(--wf-space-xl); }
.wf-auth .wf-eyebrow { color: var(--wf-color-accent); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; margin-bottom: var(--wf-space-sm); }
.wf-auth h1 { font-size: clamp(2rem, 5vw, var(--wf-reading-heading)); line-height: 1.15; margin-bottom: var(--wf-space-md); }
.wf-auth-description { color: var(--wf-color-muted); line-height: var(--wf-reading-line-height); }
.wf-auth-card { padding: var(--wf-space-xl); box-shadow: var(--wf-shadow-panel); }
.wf-auth-provider { width: 100%; }
.wf-auth-links { text-align: center; margin-top: var(--wf-space-lg); font-size: .875rem; color: var(--wf-color-muted); }
.wf-auth :is(.wf-auth-links, .wf-form-row) a { text-decoration: underline; text-underline-offset: .2em; }
.wf-auth-page .flash-message { max-width: calc(var(--wf-reading-measure) * .65); margin-inline: auto; }
@media (max-width: 600px) {
    .wf-platform .wf-platform-brand { font-size: 1.125rem; }
    .wf-auth { padding-top: var(--wf-space-xl); }
    .wf-auth-card { padding: var(--wf-space-lg); }
}

/* Shared catalogue heading and type navigation. */
[data-wf-application] .wf-catalogue-selector { position: relative; }
[data-wf-application] .wf-catalogue-heading { display: inline-flex; align-items: center; gap: var(--wf-space-md); max-width: 100%; min-height: var(--wf-control-touch); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; }
[data-wf-application] .wf-catalogue-heading svg { flex: none; width: .55em; height: .55em; color: var(--wf-color-muted); }
[data-wf-application] .wf-catalogue-heading[aria-expanded=true] svg { transform: rotate(180deg); }
[data-wf-application] .wf-catalogue-options { position: absolute; z-index: 35; top: calc(100% + var(--wf-space-sm)); left: 0; width: min(20rem, 100%); max-height: min(28rem, 55dvh); overflow-y: auto; overscroll-behavior: contain; padding: var(--wf-space-sm); box-shadow: var(--wf-shadow-panel); }
[data-wf-application] .wf-catalogue-options a { display: flex; align-items: center; gap: var(--wf-space-md); min-height: var(--wf-control-touch); padding: var(--wf-space-sm) var(--wf-space-md); border-radius: var(--wf-radius-control); color: var(--wf-color-ink); text-decoration: none; font: 1rem/1.5 var(--wf-font-interface); }
[data-wf-application] .wf-catalogue-options a:hover, [data-wf-application] .wf-catalogue-options a[aria-current] { color: var(--wf-color-accent); background: var(--wf-color-selection); }
[data-wf-application] .wf-catalogue-current { margin-left: auto; }