/* Vivulo Realty — auth pages (layouts/auth) and bare message pages (layouts/bare: 403, 404, reset-link errors).
   Loaded after base.css instead of public.css; everything lives in the components layer so base utilities still win. */
@layer components {

  /* === shell === */
  body.auth, body.bare { --v-toast-offset: 0px; background: var(--v-paper); }

  /* the skip link is .sr-only (utilities, !important); important rules in an earlier layer win over a later layer's */
  .skip-link:focus {
    position: fixed !important; z-index: 200; top: 8px; left: 8px; width: auto !important; height: auto !important;
    padding: 10px 16px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important;
    color: #fff; background: var(--v-navy-900); border-radius: var(--v-radius-md); font-weight: 600; text-decoration: none;
    outline: 2px solid var(--v-gold-300); outline-offset: 2px;
  }
  .on-navy :focus-visible { outline-color: var(--v-gold-300); }

  .auth-brand {
    display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px;
    color: var(--v-navy-900); text-decoration: none;
  }
  .auth-brand:hover { text-decoration: none; }
  .auth-brand__mark { width: 32px; height: 32px; border-radius: 8px; }
  .auth-brand__name {
    display: inline-flex; align-items: center; gap: 6px; line-height: 1;
    font-family: var(--v-font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  }
  .auth-brand__sub {
    align-self: flex-end; padding-bottom: 0.1em; font-family: var(--v-font-display); font-size: 0.8125rem;
    font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v-gold-800);
  }
  .auth-brand--light { color: #fff; }
  .auth-brand--light .auth-brand__sub { color: var(--v-gold-300); }

  /* === split screen: navy brand panel (≥ 900px) + form column === */
  .auth-shell { display: grid; min-height: 100dvh; }
  .auth-aside { display: none; }
  @media (min-width: 900px) {
    .auth-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .auth-aside {
      position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
      padding: 28px clamp(32px, 4vw, 56px) clamp(24px, 4vh, 40px) clamp(32px, 4vw, 56px);
      color: var(--v-ink-300); background: var(--v-navy-900);
    }
    .auth-aside .auth-brand { gap: 16px; }
    .auth-aside .auth-brand__mark { width: 52px; height: 52px; }
    .auth-aside .auth-brand__name { gap: 8px; font-size: 2.375rem; }
    .auth-aside .auth-brand__sub { font-size: 1.4375rem; }
  }
  .auth-aside__copy { margin-top: clamp(32px, 9vh, 96px); }
  .auth-aside__lead {
    max-width: 14ch; font-family: var(--v-font-display); font-size: clamp(2rem, 1.1rem + 1.7vw, 2.75rem); font-weight: 600;
    line-height: 1.1; letter-spacing: -0.015em; color: #fff; text-wrap: balance;
  }
  .auth-aside__text { max-width: 36ch; margin-top: 16px; font-size: 1rem; line-height: 1.6; color: var(--v-ink-300); }
  /* the photo sits in its own rounded card, inset from every edge of the panel */
  .auth-aside__media {
    position: relative; flex: 1 1 auto; min-height: 140px; max-height: 100%; margin-top: clamp(28px, 6vh, 56px);
    overflow: hidden; border-radius: var(--v-radius-lg);
  }
  .auth-aside__media img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: 35% 60%; background: var(--v-navy-800); filter: saturate(.88);
  }
  .auth-aside__media figcaption {
    position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    font-size: var(--v-text-xs); font-weight: 500; color: #fff; background: rgb(10 26 49 / .62); border-radius: var(--v-radius-full);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .auth-aside__media figcaption::before { content: ""; width: 14px; height: 1px; background: var(--v-gold-300); }

  .auth-main { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; padding-inline: 16px; }
  @media (min-width: 600px) { .auth-main { padding-inline: 32px; } }
  .auth-main__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
  @media (min-width: 900px) { .auth-main__bar { justify-content: flex-end; min-height: 76px; } }
  .auth-back {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px;
    font-size: var(--v-text-sm); font-weight: 500; color: var(--v-ink-600); text-decoration: none;
    transition: color var(--v-dur) var(--v-ease), background-color var(--v-dur) var(--v-ease);
  }
  .auth-back:hover { color: var(--v-navy-900); background: var(--v-navy-50); text-decoration: none; }
  .auth-main__body { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: 420px; margin-inline: auto; padding-block: 12px 32px; }
  @media (min-width: 600px) { .auth-main__body { justify-content: center; padding-block: 24px 48px; } }
  /* short confirmation states sit a little above the middle instead of hugging the top */
  .auth-main__body:has(.auth-done) { justify-content: center; padding-bottom: 12vh; }
  .auth-main__foot { padding: 12px 0 24px; text-align: center; font-size: var(--v-text-sm); color: var(--v-ink-500); }

  /* === form column === */
  .auth-card { display: grid; gap: 20px; }
  .auth-head { display: grid; gap: 8px; }
  .auth-head__icon, .auth-done__icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 12px;
    color: var(--v-gold-800); background: var(--v-gold-100);
  }
  .auth-done__icon { color: var(--v-success-700); background: var(--v-success-50); }
  .auth-head__icon .i, .auth-done__icon .i { width: 24px; height: 24px; }
  .auth-title {
    font-family: var(--v-font-display); font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem); font-weight: 600;
    line-height: 1.12; letter-spacing: -0.01em;
  }
  .auth-sub { font-size: 0.9375rem; line-height: 1.55; color: var(--v-ink-600); }
  .auth-done { display: grid; gap: 8px; justify-items: start; }

  .auth-alert { width: 100%; font-size: 0.9375rem; font-weight: 500; }

  .auth-form { display: grid; gap: 16px; }
  .auth-form > .v-btn { margin-top: 4px; }
  .auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-block: -6px; }
  .auth-row .v-check { font-size: 0.9375rem; }
  .auth-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 500; }

  .auth-pw { position: relative; }
  .auth-pw .v-input { padding-right: 48px; }
  .auth-pw__toggle {
    position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    color: var(--v-ink-500); background: transparent; border: 0; border-radius: 0 var(--v-radius-md) var(--v-radius-md) 0;
    transition: color var(--v-dur) var(--v-ease);
  }
  .auth-pw__toggle:hover { color: var(--v-navy-800); }
  .auth-pw__toggle:focus-visible { outline-offset: -4px; border-radius: var(--v-radius-md); }
  .auth-pw-hint { display: flex; align-items: center; gap: 6px; }
  .auth-pw-hint .i { color: var(--v-ink-400); transition: color var(--v-dur) var(--v-ease); }
  .auth-pw-hint.is-ok, .auth-pw-hint.is-ok .i { color: var(--v-success-700); }

  .auth-or { display: flex; align-items: center; gap: 12px; font-size: var(--v-text-sm); color: var(--v-ink-500); }
  .auth-or::before, .auth-or::after { content: ""; flex: 1 1 auto; border-top: var(--v-border); }
  .auth-google { gap: 12px; }
  .auth-google__g { width: 20px; height: 20px; flex: none; }
  .auth-switch { text-align: center; font-size: 0.9375rem; color: var(--v-ink-600); }

  /* === bare message pages === */
  .bare-shell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 100dvh; padding: 24px 16px; }
  .bare-card {
    width: 100%; max-width: 520px; padding: 32px 20px; background: var(--v-surface);
    border: var(--v-border); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-1);
  }
  @media (min-width: 600px) { .bare-card { padding: 44px 48px; } }
  .bare-shell .auth-main__foot { padding: 0; }
  .bare-msg { display: grid; justify-items: center; gap: 10px; text-align: center; }
  .bare-msg__icon {
    display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 14px;
    color: var(--v-gold-800); background: var(--v-gold-100);
  }
  .bare-msg__icon .i { width: 26px; height: 26px; }
  .bare-msg__title {
    font-family: var(--v-font-display); font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem); font-weight: 600;
    line-height: 1.15; letter-spacing: -0.01em;
  }
  .bare-msg__text { max-width: 42ch; color: var(--v-ink-600); }
  .bare-msg__reason { display: inline-flex; align-items: center; gap: 6px; font-size: var(--v-text-sm); font-weight: 500; color: var(--v-danger-700); }
  .bare-msg__actions { display: flex; flex-direction: column; justify-self: stretch; gap: 8px; margin-top: 14px; }
  @media (min-width: 600px) { .bare-msg__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; justify-self: center; } }
}