/* ═══════════════════════════════════════════════════════════════
   AUTH — login + cadastro   (.au- namespace)
   These pages deliberately do NOT extend base.html: a logged-out
   visitor has no use for the app navbar, the premium modal,
   ai-chat.js, the nudge scripts or chart-colors.js. Only csrf.js
   and scripts.js (the flash toasts) come across.
   ═══════════════════════════════════════════════════════════════ */
.au-page{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;
    background:linear-gradient(150deg,#00120B 0%,#002417 45%,#001a10 100%)}
.au-grid{position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:88px 88px;
    -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 100%);
            mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 100%)}

/* ── top bar: logo, and exactly one way back ── */
.au-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
    gap:24px;padding:26px 40px}
.au-brand{display:flex;align-items:center;text-decoration:none}
.au-brand img{height:34px;width:auto;display:block}
.au-back{font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--fx-muted);
    text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:color .25s ease}
.au-back i{width:16px;height:1px;background:currentColor;display:block;transition:width .3s var(--fx-ease)}
.au-back:hover{color:var(--fx-ink)}
.au-back:hover i{width:24px}

/* ── split ── */
.au-split{position:relative;z-index:2;flex:1;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;
    max-width:1080px;width:100%;margin:0 auto;padding:20px 40px 64px}

.au-form-col{max-width:412px;width:100%}
.au-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.22em;font-weight:600;
    color:var(--fx-muted);margin-bottom:16px}
.au-h1{font-size:38px;font-weight:200;letter-spacing:-.03em;line-height:1.14;margin:0 0 12px;color:var(--fx-ink)}
.au-h1 em{font-style:normal;color:var(--fx-green-lift)}
.au-sub{font-size:14px;font-weight:300;line-height:1.8;color:var(--fx-muted);margin:0 0 34px}

/* fields — .form-label / .form-input already live in dark_base (the workshop
   modal uses them); these are the auth-only additions. */
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.au-pw{position:relative}
.au-pw .form-input{padding-right:46px}
.au-pw-btn{position:absolute;top:13px;right:12px;background:none;border:0;cursor:pointer;padding:2px;
    color:var(--fx-muted);line-height:0;transition:color .2s ease}
.au-pw-btn:hover{color:var(--fx-ink)}
.au-pw-btn svg{display:block}

.au-check{display:flex;align-items:flex-start;gap:11px;margin:0 0 14px}
.au-check input{appearance:none;-webkit-appearance:none;flex:0 0 17px;width:17px;height:17px;margin:2px 0 0;
    border:1px solid var(--fx-line);border-radius:5px;background:rgba(0,0,0,.3);cursor:pointer;
    position:relative;transition:all .2s ease}
.au-check input:checked{background:var(--fx-green-lift);border-color:var(--fx-green-lift)}
.au-check input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
    border:solid #02220f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.au-check input:focus-visible{outline:2px solid var(--fx-amber);outline-offset:2px}
.au-check label{font-size:12.5px;font-weight:300;line-height:1.6;color:var(--fx-muted);cursor:pointer}
.au-check a{color:var(--fx-amber);text-decoration:none;border-bottom:1px solid rgba(255,183,77,.35)}
.au-check a:hover{border-bottom-color:var(--fx-amber)}

.au-submit{width:100%;margin-top:10px;font-size:13px;font-weight:600;padding:15px 26px;border-radius:10px;
    border:1px solid var(--fx-amber);background:var(--fx-amber);color:#02220f;cursor:pointer;
    font-family:inherit;transition:all .3s ease}
.au-submit:hover:not(:disabled){background:#FFC978;border-color:#FFC978}
.au-submit:disabled{opacity:.42;cursor:not-allowed}
.au-submit:focus-visible{outline:2px solid var(--fx-amber);outline-offset:3px}

.au-alt{font-size:12.5px;font-weight:300;color:var(--fx-muted);margin:26px 0 0;text-align:center}
.au-alt a{color:var(--fx-ink);text-decoration:none;border-bottom:1px solid var(--fx-line)}
.au-alt a:hover{border-bottom-color:var(--fx-ink)}
.au-msg{font-size:12px;font-weight:300;line-height:1.6;color:var(--fx-muted);margin:10px 0 0}
.au-forgot{font-size:12px;font-weight:400;color:var(--fx-muted);text-decoration:none;
    border-bottom:1px solid transparent;transition:all .2s ease}
.au-forgot:hover{color:var(--fx-amber);border-bottom-color:rgba(255,183,77,.4)}

/* ── the panel beside the form ── */
.au-aside{max-width:400px}
.au-aside-l{font-size:10px;text-transform:uppercase;letter-spacing:.22em;font-weight:600;
    color:var(--fx-muted);margin-bottom:22px;display:flex;align-items:center;gap:13px}
.au-aside-l::before{content:'';width:26px;height:1px;background:rgba(255,183,77,.4);display:block}
.au-aside-t{font-size:25px;font-weight:200;letter-spacing:-.025em;line-height:1.3;color:var(--fx-ink);margin:0 0 26px}
.au-aside-t em{font-style:normal;color:var(--fx-amber)}
.au-list{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.au-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
    padding:15px 0;border-top:1px solid var(--fx-line-soft);font-size:13.5px;font-weight:300;
    line-height:1.7;color:var(--fx-muted)}
.au-list li:last-child{border-bottom:1px solid var(--fx-line-soft)}
.au-list b{display:block;font-weight:400;color:var(--fx-ink);font-size:14px;margin-bottom:2px}
.au-tick{width:16px;height:16px;border-radius:50%;margin-top:3px;
    border:1px solid rgba(23,185,128,.45);background:rgba(23,185,128,.10);position:relative}
.au-tick::after{content:'';position:absolute;left:5px;top:3px;width:4px;height:7px;
    border:solid var(--fx-green-lift);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.au-note{font-size:12.5px;font-weight:300;line-height:1.8;color:var(--fx-muted);margin:24px 0 0}
.au-note strong{font-weight:400;color:var(--fx-ink)}

/* the DOAR mark, for the login side where there is nothing to sell */

@media(max-width:991.98px){
    .au-split{grid-template-columns:1fr;gap:48px;padding:8px 32px 56px;align-items:start}
    .au-form-col{max-width:none}
    .au-aside{max-width:none;order:2}
    .au-h1{font-size:32px}
}
@media(max-width:575.98px){
    .au-top{padding:20px 22px}
    .au-split{padding:4px 22px 44px}
    .au-h1{font-size:27px}
    .au-row{grid-template-columns:1fr}
}

/* ── OTP ── */
.au-otp{font-size:26px;font-weight:200;letter-spacing:.34em;text-align:center;
    font-variant-numeric:tabular-nums;padding:16px 14px}
.au-otp::-webkit-outer-spin-button,.au-otp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.au-otp{-moz-appearance:textfield;appearance:textfield}
.au-linkbtn{background:none;border:0;padding:0 0 0 6px;font-family:inherit;font-size:12.5px;
    font-weight:500;color:var(--fx-amber);cursor:pointer;text-decoration:underline;
    text-underline-offset:3px}
.au-linkbtn:disabled{opacity:.45;cursor:not-allowed}
.au-resend-status{margin-left:8px;font-size:12px;color:var(--fx-muted)}

/* ── flash toasts (base.html used to supply these) ── */
#flash-container{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:1200;
    display:flex;flex-direction:column;gap:10px;width:min(440px,calc(100% - 40px))}
#flash-container .alert{border-radius:11px;padding:13px 16px;font-size:13px;font-weight:300;
    line-height:1.6;border:1px solid var(--fx-line);background:#08200F;color:var(--fx-ink);
    box-shadow:0 14px 34px rgba(0,0,0,.45)}
#flash-container .alert-success{border-color:rgba(23,185,128,.4);background:rgba(8,32,15,.98)}
#flash-container .alert-danger,#flash-container .alert-error{border-color:rgba(226,109,90,.45)}
#flash-container .alert-warning{border-color:rgba(255,183,77,.45)}
#flash-container .btn-close{filter:invert(1) grayscale(1);opacity:.5}

/* ── terms / privacy modals ── */
.au-modal .modal-content{background:#08200F;border:1px solid var(--fx-line);border-radius:16px;color:var(--fx-ink)}
.au-modal .modal-header,.au-modal .modal-footer{border-color:var(--fx-line-soft)}
.au-modal .modal-title{font-size:19px;font-weight:300;letter-spacing:-.015em}
.au-modal .modal-body{font-size:13.5px;font-weight:300;line-height:1.85;color:var(--fx-muted);
    max-height:62vh;overflow-y:auto}
.au-modal .modal-body h1,.au-modal .modal-body h2,.au-modal .modal-body h3,
.au-modal .modal-body h4,.au-modal .modal-body strong{color:var(--fx-ink);font-weight:400}
.au-modal .modal-body a{color:var(--fx-amber)}
.au-modal .btn-close{filter:invert(1) grayscale(1);opacity:.55}

/* ── forgot-password feedback line. The old page set style.color inline
      (orange/blue/green/red); the state now rides on a data attribute so the
      colours stay in CSS and on tokens. ── */
.au-page{--au-red:#E26D5A}
.au-msg:empty{display:none;margin:0}
.au-msg[data-state="warn"]{color:var(--fx-amber)}
.au-msg[data-state="busy"]{color:var(--fx-muted)}
.au-msg[data-state="ok"]{color:var(--fx-green-lift)}
.au-msg[data-state="err"]{color:var(--au-red)}

/* ── the terms/privacy partials were written for the light app: they carry
      .text-muted, .alert-warning and Bootstrap tables, all of which resolve to
      dark ink on a dark modal. Re-point them inside .au-modal only, so the
      partials stay untouched and every other page that includes them is
      unaffected. .text-muted lands at .48 (4.56:1 over the modal) — one clear
      step below body text without dropping under 4.5:1. ── */
.au-modal{--au-dim:rgba(242,247,244,.48)}
.au-modal .modal-body .text-muted{color:var(--au-dim)!important}
.au-modal .modal-body h4{font-size:16px;margin:26px 0 10px}
.au-modal .modal-body ul{padding-left:20px}
.au-modal .modal-body li{margin-bottom:7px}
.au-modal .modal-body .alert{border-radius:11px;padding:13px 15px;font-size:13px;
    background:rgba(255,183,77,.07);border:1px solid rgba(255,183,77,.3);color:var(--fx-ink)}
.au-modal .modal-body .table{--bs-table-color:var(--fx-muted);--bs-table-bg:transparent;
    --bs-table-border-color:var(--fx-line-soft);color:var(--fx-muted);font-size:12.5px}
.au-modal .modal-body .table th{color:var(--fx-ink);font-weight:500}
.au-modal .modal-body .small,.au-modal .modal-body small{font-size:12.5px}

/* ── Chrome paints autofilled fields rgb(232,240,254) with dark ink and there
      is no way to set that background directly — it lives in a UA layer above
      author styles. The one lever that works is an inset box-shadow large
      enough to cover the field, plus -webkit-text-fill-color for the ink. The
      long transition delay keeps Chrome from flashing its own colour on focus
      and blur. Applies to any .form-input, so the workshop modal gets it too. ── */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active{
    -webkit-box-shadow:0 0 0 1000px #041710 inset;
            box-shadow:0 0 0 1000px #041710 inset;
    -webkit-text-fill-color:var(--fx-ink);
    caret-color:var(--fx-ink);
    -webkit-transition:background-color 9999s ease-in-out 0s;
            transition:background-color 9999s ease-in-out 0s}

/* ── the login panel is brand only. Anyone can be signing in — someone who
      finished the diagnóstico yesterday, someone who has been running the
      acompanhamento for a year — so it makes no claim about where the person
      is in the method, and the DOAR row is gone with it. Larger type because
      nothing follows it and two lines have to hold the column. ── */
.au-quiet .au-aside-t{font-size:34px;line-height:1.18;margin:0}
@media(max-width:991.98px){
    .au-quiet .au-aside-t{font-size:27px}
}