/* Account, Manage, Access and Error pages on the V2 shell (#190). One file for the area, prefix ac-.
   Colours come from the layout-v2.css tokens, so dark mode is a token swap. The exception is the raster motif on the
   sign-in card (Views/Account/_AuthSidePartial.cshtml): its fills are data colours, like a map canvas. */

/* ---------- signed-out pages: one card centred on the work surface ---------- */
/* main has 16px + 40px vertical padding; the card sits in the middle of what is left */
.ac-auth { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--top) - 56px); padding: 8px 0; }

.ac-card { display: grid; grid-template-columns: 38% minmax(0, 1fr); width: 100%; max-width: 860px; background: var(--p-row); border: 1px solid var(--p-line-2); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 18px 40px -16px rgba(16, 24, 32, .22); }
/* recovery and confirmation pages: a narrower card with the graphite side as a band across the top */
.ac-card.ac-compact { grid-template-columns: minmax(0, 1fr); max-width: 460px; }

/* graphite side: the brand and an NDVI-like raster tile (pixels only) */
.ac-side { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 470px; padding: 26px 28px; background: var(--c-2); color: var(--c-text); }
.ac-compact .ac-side { min-height: 0; height: 84px; padding: 0 22px; justify-content: center; }
.ac-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--c-text); }
.ac-brand svg { width: 28px; height: 28px; flex: none; display: block; }
.ac-raster { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 56%; }
.ac-compact .ac-raster { top: 0; left: auto; width: 64%; height: 100%; }
.ac-raster rect { opacity: .95; }

/* sign-in page: the particles.js network behind the card (as the old login page had); the card stays clickable and
   the empty background still takes the hover and click effects */
.ac-particles { position: fixed; top: var(--top); left: 0; right: 0; bottom: 0; z-index: 0; }
.ac-particles canvas { display: block; }
.ac-auth.ac-over-particles { position: relative; z-index: 1; pointer-events: none; }
.ac-auth.ac-over-particles .ac-card { pointer-events: auto; }

/* form side */
.ac-body { display: flex; flex-direction: column; min-width: 0; padding: 30px 36px 20px; }
.ac-compact .ac-body { padding: 24px 28px 18px; }
.ac-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.ac-compact .ac-title { font-size: 19px; }
.ac-title > .fa { margin-right: 4px; }
.ac-ic-ok { color: var(--ok); }
.ac-ic-neg { color: var(--neg); }
.ac-ic-mute { color: var(--ink-3); }
.ac-lead { margin: 0 0 20px; color: var(--ink-3); }
.ac-body > p { color: var(--ink-2); }
.ac-auth .form-control, .ac-auth .form-select { min-height: 36px; font-size: .875rem; }
.v2 .btn.ac-submit { width: 100%; --bs-btn-padding-y: .5rem; --bs-btn-font-size: .875rem; --bs-btn-font-weight: 600; }
.ac-form { margin-bottom: 18px; }
.ac-check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; }
.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--p-line); color: var(--ink-3); font-size: 12px; }
.ac-foot a { font-weight: 600; text-decoration: none; }
.ac-foot a:hover { text-decoration: underline; }

/* CAPTCHA on the sign-in form: the server's 200x60 image, a refresh button, then the code */
.ac-captcha { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ac-captcha img { display: block; width: 150px; height: 45px; border: 1px solid var(--p-line-2); border-radius: 4px; background: #fff; }

/* ---------- form details shared by every page here: checkboxes and MVC validation output ---------- */
.ac-form .form-check-input { background-color: var(--p-row); border-color: var(--p-line-2); }
.ac-form .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.ac-form .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .2); }
.ac-form .field-validation-error { display: block; margin-top: 4px; color: var(--neg); font-size: 12px; }
.ac-form .field-validation-valid { display: none; }
.v2 .ac-form .form-control.input-validation-error, .v2 .ac-form .form-select.input-validation-error { border-color: var(--neg); }
.v2 .ac-form .form-control.input-validation-error:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--neg) 22%, transparent); }
.ac-form .validation-summary-valid { display: none; }
.ac-form .validation-summary-errors { margin-bottom: 14px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent); border-left: 3px solid var(--neg); border-radius: 4px; background: color-mix(in srgb, var(--neg) 7%, var(--p-row)); color: var(--ink); font-size: 13px; }
.ac-form .validation-summary-errors ul { margin: 0; padding-left: 16px; }

/* ---------- signed-in account pages (Manage, Register) ---------- */
.ac-page { max-width: 760px; }
.ac-narrow { max-width: 520px; }
.ac-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ac-status { display: flex; align-items: center; gap: 8px; }
/* settings rows: name, current state, action */
.ac-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--p-line); }
.ac-item:first-child { border-top: 0; }
.ac-k { font-weight: 600; color: var(--ink); }
.ac-k .fa { width: 16px; margin-right: 6px; color: var(--ink-3); text-align: center; }
.ac-v { color: var(--ink-2); }
.ac-v p { margin: 0; }
.ac-logins td { vertical-align: middle; }
.ac-logins form { margin: 0; }

/* ---------- Access and Error pages: a v2-empty message with a way back ---------- */
.ac-msg .ac-code { margin-bottom: 4px; color: var(--ink-3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-msg p + p { margin-top: 8px; }
.ac-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.ac-switch { max-width: 420px; margin: 22px auto 0; text-align: left; }
.ac-switch .form-label { color: var(--ink-2); }
.ac-debug { max-width: 860px; margin: 0 auto; }
.ac-debug .card-header { font-weight: 600; }
.ac-debug .card-header .fa { color: var(--ink-3); margin-right: 4px; }
.ac-debug h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ac-debug pre, .ac-debug .ac-url { margin: 0 0 12px; padding: 9px 12px; background: var(--p-1); border: 1px solid var(--p-line); border-radius: 4px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-debug pre:last-child, .ac-debug .ac-url:last-child { margin-bottom: 0; }
.ac-debug pre { max-height: 320px; overflow: auto; }
.ac-debug .ac-errmsg { border-left: 3px solid var(--warn); }

/* ---------- narrow screens ---------- */
@media (max-width: 767.98px) {
  .ac-auth { align-items: flex-start; min-height: 0; }
  .ac-card { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .ac-side { min-height: 0; height: 84px; padding: 0 22px; justify-content: center; }
  .ac-raster { top: 0; left: auto; width: 64%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
  .ac-compact .ac-raster { -webkit-mask-image: none; mask-image: none; }
  .ac-body { padding: 24px 22px 18px; }
  .ac-item { grid-template-columns: minmax(0, 1fr) auto; }
  .ac-item .ac-v { grid-column: 1 / -1; grid-row: 2; }
}