/* lazysite engine chrome - SM352.
 *
 * These rules were inline <style> blocks in the engine's own output: the
 * fallback page chrome and the SM098 multi-step form progressive-enhancement
 * rules. They are here because a Content-Security-Policy worth setting cannot
 * coexist with the engine inlining style on every page - t/lint/56 holds the
 * inventory, and this file is the first two entries leaving it.
 *
 * BUNDLED rather than split per feature, deliberately. Two files was the
 * operator's call, and it is the right one: a rule that only matters on a page
 * with a multi-step form costs nothing to carry, while a second request costs
 * a round trip on every page that has one.
 *
 * Cached hard and busted by ?v=<version> - the same convention every other
 * shipped asset uses.
 */

/* --- fallback page chrome ------------------------------------------------
 * Used when no layout is bound.
 *
 * SM1250: SCOPED TO THE FALLBACK'S OWN <body class="lazysite-fallback">. This
 * file is also linked by a page carrying a multi-step form, under whatever
 * layout the site has, and these rules were bare element selectors - so on a
 * themed site every page with a stepped form took the system font, an 800px
 * column and #333 text, the link coming after the theme's stylesheet and
 * winning at equal specificity. Only the fallback template sets the class, so
 * a layout's page loads this file for the form rules below and nothing else. */
body.lazysite-fallback { font-family: system-ui, sans-serif; max-width: 800px;
       margin: 2rem auto; padding: 0 1rem; color: #333; }
.lazysite-fallback .site-bar { display: flex; align-items: center; gap: 0.75rem;
            padding: 0.5rem 0; font-size: 0.85rem; flex-wrap: wrap; }
.lazysite-fallback .site-bar a { color: #0066cc; text-decoration: none; font-weight: 600; }
.lazysite-fallback .site-bar a:hover { text-decoration: underline; }
.lazysite-fallback .site-bar .edit-btn { font-size: 0.8rem; padding: 0.15rem 0.5rem;
       border: 1px solid #ccc; border-radius: 3px; background: #f9f9f9;
       color: #555; text-decoration: none; cursor: pointer; font-weight: 400; }
.lazysite-fallback .site-bar .edit-btn:hover { background: #eee; color: #333; }
.lazysite-fallback .site-bar form { display: flex; gap: 0.3rem; }
.lazysite-fallback .site-bar input[type="search"] { padding: 0.2rem 0.4rem; font-size: 0.8rem;
       border: 1px solid #ccc; border-radius: 3px; width: 140px; }
.lazysite-fallback .site-bar button { padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; }
.lazysite-fallback hr.site-rule { border: none; border-top: 1px solid #eee; margin: 0 0 1.5rem; }
.lazysite-fallback .nav-link { margin-right: 1rem; color: #0066cc; text-decoration: none; }
.lazysite-fallback .nav-link:hover { text-decoration: underline; }
.lazysite-fallback .nav-child { margin-right: 0.75rem; font-size: 0.85rem; }
.lazysite-fallback .nav-link[aria-current="page"] { font-weight: 600; }
.lazysite-fallback .nav-group {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    padding: 0.5rem 0 0.2rem;
    margin-right: 0.75rem;
    display: inline-block;
}
.lazysite-fallback h1 { border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
.lazysite-fallback pre { background: #f5f5f5; padding: 1rem; overflow-x: auto; }
.lazysite-fallback code { background: #f5f5f5; padding: 0.2em 0.4em; }
.lazysite-fallback footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #eee;
         font-size: 0.85rem; color: #888; }
.lazysite-fallback a { color: #0066cc; }

/* --- native forms, fallback only ------------------------------------------
 * SM1251: the default look of a `::: form` on a site with no layout. These
 * were an inline <style> at the top of the starter /contact.md, which came
 * after any theme's stylesheet and beat its form rules on that one page. Under
 * the fallback class they apply where nothing else styles a form, and a theme
 * is never overridden by them. */
.lazysite-fallback .lazysite-form {
    max-width: min(480px, 100%);
    margin: 1rem 0;
    box-sizing: border-box;
}
.lazysite-fallback .lazysite-form .form-field {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.6rem 0.75rem;
    align-items: start;
    margin-bottom: 0.6rem;
}
.lazysite-fallback .lazysite-form .form-field label {
    text-align: right;
    padding-top: 0.45rem;
}
.lazysite-fallback .lazysite-form input[type="text"],
.lazysite-fallback .lazysite-form input[type="email"],
.lazysite-fallback .lazysite-form input[type="tel"],
.lazysite-fallback .lazysite-form input[type="number"],
.lazysite-fallback .lazysite-form textarea,
.lazysite-fallback .lazysite-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font: inherit;
}
.lazysite-fallback .lazysite-form textarea {
    min-height: 6rem;
    resize: vertical;
}
.lazysite-fallback .lazysite-form input:focus,
.lazysite-fallback .lazysite-form textarea:focus,
.lazysite-fallback .lazysite-form select:focus {
    outline: 2px solid #0056b3;
    outline-offset: 0;
}
.lazysite-fallback .lazysite-form .required {
    color: #888;
    font-weight: normal;
}
.lazysite-fallback .lazysite-form .form-field.form-submit > button {
    grid-column: 2;
    padding: 0.45rem 1.25rem;
    font: inherit;
    cursor: pointer;
    border: 1px solid #0056b3;
    background: #0056b3;
    color: #fff;
    border-radius: 3px;
}
.lazysite-fallback .lazysite-form .form-field.form-submit > button:hover {
    background: #003d80;
    border-color: #003d80;
}
.lazysite-fallback .lazysite-form .form-status {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

/* --- the shipped sign-in and search pages, fallback only ------------------
 * SM1288: the inline <style> blocks of the starter /forgot.md and
 * /search-results.md, and of the engine's own login, forgot and claim pages
 * (lazysite/templates/system/), moved here for the reason SM1251 moved the
 * contact page's: a page's <style> comes after the theme's stylesheet and beat
 * its rules on that page. Under the fallback class they apply where no layout
 * renders; under a layout the theme styles these pages (and the :where() base
 * rules below give an unstyled theme readable forms). The login rules keep
 * their var(--theme-colours-*) references, which resolve to the fallbacks
 * here. */
.lazysite-fallback .reset-form,
.lazysite-fallback .claim-form {
    max-width: min(440px, 100%);
    margin: 1rem 0;
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.6rem 0.75rem;
    align-items: center;
}
.lazysite-fallback .claim-form { grid-template-columns: 8rem 1fr; }
.lazysite-fallback .reset-form label,
.lazysite-fallback .claim-form label { text-align: right; }
.lazysite-fallback .reset-form input[type="text"],
.lazysite-fallback .claim-form input[type="password"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font: inherit;
}
.lazysite-fallback .claim-form input:focus { outline: 2px solid #0056b3; outline-offset: 0; }
.lazysite-fallback .reset-form .reset-submit,
.lazysite-fallback .claim-form .claim-submit { grid-column: 2; }
.lazysite-fallback .reset-form button,
.lazysite-fallback .claim-form button {
    padding: 0.45rem 1.25rem;
    font: inherit;
    cursor: pointer;
    border: 1px solid #0056b3;
    background: #0056b3;
    color: #fff;
    border-radius: 3px;
}
.lazysite-fallback .reset-form button:hover,
.lazysite-fallback .claim-form button:hover { background: #003d80; border-color: #003d80; }

/* Single-column stack (label above input). Deliberately NOT a 2-column grid:
   the login page is Markdown, which wraps the form's fields in <p>, so a grid
   that relies on label/input being separate grid items mis-aligns (password
   ends up beside the 2FA field). A block stack is immune to that wrapping. */
.lazysite-fallback .login-form {
    max-width: min(360px, 100%);
    margin: 1rem 0;
}
.lazysite-fallback .login-form label {
    display: block;
    font-weight: 600;
    margin: 0.7rem 0 0.2rem;
}
.lazysite-fallback .login-form input[type="text"],
.lazysite-fallback .login-form input[type="password"] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--theme-colours-border, #ccc);
    border-radius: 3px;
    background: var(--theme-colours-surface, #fff);
    color: var(--theme-colours-text, inherit);
    font: inherit;
}
.lazysite-fallback .login-context {
    background: var(--theme-colours-surface, #f0f4ff);
    border-left: 3px solid var(--theme-colours-accent, #0066cc);
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    max-width: min(480px, 100%);
    box-sizing: border-box;
}
.lazysite-fallback .login-form input:focus { outline: 2px solid var(--theme-colours-accent, #0056b3); outline-offset: 0; }
.lazysite-fallback .login-form .login-submit { margin-top: 1rem; }
.lazysite-fallback .login-form button {
    padding: 0.45rem 1.25rem;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--theme-colours-accent, #0056b3);
    background: var(--theme-colours-accent, #0056b3);
    color: var(--theme-colours-on-accent, #fff);
    border-radius: 3px;
}
/* brightness shift adapts to any accent, no second hardcoded colour needed */
.lazysite-fallback .login-form button:hover { filter: brightness(0.92); }
.lazysite-fallback .auth-error {
    color: #b00;
    background: #fee;
    border: 1px solid #fcc;
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    max-width: 440px;
    box-sizing: border-box;
    margin: 1rem 0;
}
.lazysite-fallback .demo-creds code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: var(--theme-colours-surface, #f0f0f0);
    padding: 0.1em 0.4em;
    border-radius: 3px;
}
/* SM052: .login-context-url replaces a <code> wrapper that was eating the TT
   expression inside it. render_content's code-block protection regex treats
   <code>...</code> as literal and skips TT evaluation. This span looks the
   same but isn't caught. */
.lazysite-fallback .login-context-url {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: var(--theme-colours-surface, #f0f0f0);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    word-break: break-all;
}

.lazysite-fallback .search-result { border-bottom: 1px solid #eee; padding: 1rem 0; margin-bottom: 0.5rem; }
.lazysite-fallback .search-result h2 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.lazysite-fallback .search-result h2 a { text-decoration: none; }
.lazysite-fallback .search-result h2 a:hover { text-decoration: underline; }
.lazysite-fallback .search-subtitle { color: #666; margin: 0.2rem 0; font-size: 0.95rem; }
.lazysite-fallback .search-excerpt { margin: 0.4rem 0; font-size: 0.9rem; line-height: 1.5; }
.lazysite-fallback .search-tags { margin: 0.3rem 0; }
.lazysite-fallback .search-tag { display: inline-block; background: #f0f0f0; border-radius: 3px;
       padding: 0.1rem 0.4rem; font-size: 0.8rem; margin-right: 0.3rem; }
.lazysite-fallback .search-date { color: #888; font-size: 0.8rem; }
.lazysite-fallback mark { background: #fff3cd; padding: 0.1em 0; }
.lazysite-fallback #search-status { color: #666; margin: 0.5rem 0; font-size: 0.9rem; }

/* --- native-form base, any page with a form --------------------------------
 * SM1289 (ruling 30): the least a form needs to be usable under a theme that
 * says nothing about forms - spacing, full-width fields, readable buttons, the
 * step fieldsets, error text. EVERY SELECTOR HERE IS ONE :where(), so each rule
 * has zero specificity and any theme rule about the same element wins; the
 * engine links this file first in the head, so a theme's own zero-specificity
 * rule (`*`) wins by order too. No colour beyond currentColor and inherit: a
 * theme never has to undo one. The fallback rules above are more specific and
 * win here as well. t/unit/processor/166 holds every selector to :where(). */
:where(.lazysite-form, .login-form, .claim-form, .reset-form) { max-width: 40rem; }
:where(.lazysite-form .form-field) { margin: 0 0 0.75rem; }
:where(.lazysite-form .form-field > label, .login-form label, .claim-form label, .reset-form label) {
    display: block;
    margin: 0 0 0.25rem;
}
:where(.lazysite-form, .login-form, .claim-form, .reset-form)
    :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"],
        [type="button"], .form-option-qty), textarea, select) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0.5rem;
    font: inherit;
    color: inherit;
}
:where(.lazysite-form textarea) { min-height: 6rem; resize: vertical; }
:where(.lazysite-form .form-options) { display: flex; flex-direction: column; gap: 0.35rem; }
:where(.lazysite-form .form-option) { display: flex; align-items: center; gap: 0.5rem; }
:where(.lazysite-form button, .login-form button, .claim-form button, .reset-form button) {
    padding: 0.45rem 1.1rem;
    font: inherit;
    cursor: pointer;
}
:where(.lazysite-form .form-submit, .login-form .login-submit) { margin-top: 1rem; }
:where(.lazysite-form .lsf-step) { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
:where(.lazysite-form .lsf-step > legend) { font-weight: 600; padding: 0; margin: 0 0 0.5rem; }
:where(.form-status) { margin: 0.5rem 0; }
:where(.form-status-error, .auth-error, .login-context) {
    border-left: 3px solid currentColor;
    padding: 0.4rem 0.75rem;
}
:where(.form-status-error, .auth-error) { font-weight: 600; }
:where(.login-context-url) { font-family: ui-monospace, monospace; word-break: break-all; }

/* --- SM098 multi-step forms ----------------------------------------------
 * Progressive enhancement: WITHOUT the JS-added `lsf-js` class every step
 * shows and the nav is hidden, so a visitor with no JavaScript gets one long
 * usable form rather than a dead one. That is why these rules are not in the
 * script that needs them. */
.lazysite-form[data-multistep] .lsf-nav{display:none}
.lazysite-form.lsf-js[data-multistep] .lsf-step:not(.lsf-active){display:none}
.lazysite-form.lsf-js[data-multistep] .lsf-nav{display:flex;gap:.5rem;margin-top:1rem}
.lazysite-form[data-multistep] .lsf-progress{font-size:.9em;opacity:.75;margin-bottom:.75rem}