/* Per-page CSS for the participant code entry (/enter-code) (TO DO FL-042).
 *
 * Moved verbatim out of the <style> block in templates/enter_code.html on 7
 * October 2026. The fleet's CSS gates read stylesheets only, and a <style>
 * block in a template wins by load order over every sheet linked before it:
 * the trap that let the fleet's nav bars drift in July. The template links
 * this sheet at the exact position its block held (in the page's own <head>,
 * after backdrop.css and before participant-shell.css), so every rule meets
 * the same rules in the same order and wins the same cascade fights. Only
 * the indentation changed in the move. The sheet belongs to this tool alone
 * and is not listed in phronon_common/shared_assets.py.
 */

.skip-link { position: absolute; left: -9999px; top: 0; background: #0F1B2D; color: #fff; padding: .5rem 1rem; z-index: 1000; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Ground, card and field colours now come from backdrop.css (body.od-code)
   so this step matches the entrance it follows. Only the geometry stays
   here. */
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.form-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.1);
             padding: 2.5rem 2rem; width: 100%; max-width: 420px; }
h1 { font-size: 1.4rem; font-weight: 800; color: #232323; margin-bottom: .4rem; }
.hint { color: #666; font-size: .88rem; margin-bottom: 1.5rem; }
.field { margin-bottom: 1rem; }
label { display: block; font-size: .8rem; font-weight: 600; color: #666; text-transform: uppercase;
        letter-spacing: .03em; margin-bottom: .4rem; }
input[type="text"] { width: 100%; padding: .6rem .75rem; border: 1.5px solid #d4d4d4; border-radius: 6px;
                     font-size: 1.1rem; font-family: "SF Mono", "Fira Code", monospace; letter-spacing: .15em;
                     text-align: center; text-transform: uppercase; }
input:focus { outline: none; border-color: #232323; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.btn-full { width: 100%; padding: .75rem 1.1rem; background: #232323; color: #fff; border: none;
            border-radius: 6px; font-weight: 700; font-size: .95rem; cursor: pointer; margin-top: .5rem; }
.btn-full:hover { background: #0f0f0f; }
.alert-error { background: #fdecea; color: #c0392b; padding: .7rem 1rem; border-radius: 6px;
               margin-bottom: 1rem; font-size: .875rem; border-left: 3px solid #c0392b; }
.back-link { display: inline-block; margin-top: 1.25rem; color: #666; text-decoration: none; font-size: .85rem; }
.back-link:hover { color: #232323; text-decoration: underline; }