/* ========================================================================
   CACS Approved UI Expansion v2 — Login / Register / Archives.
   docs/design/approved-v2/references/{03-archives,04-login,05-register}
   -approved.png. Reuses the existing tokens.css palette/spacing/type
   scale (--cacs-dark-teal, --cacs-cyan, --cacs-color-* etc.) - no new
   color values introduced here.
   ======================================================================== */

/* ---------- Shared auth-page shell (Login + Register) ---------- */
.cacs-auth-page {
  position: relative;
  padding-block: var(--cacs-space-5) var(--cacs-space-7);
  overflow: hidden;
}
.cacs-auth-page > h1 { display: none; }
.cacs-auth-page__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 8% 15%, color-mix(in oklch, var(--cacs-cyan), transparent 78%) 0, transparent 45%),
    radial-gradient(circle at 92% 20%, color-mix(in oklch, var(--cacs-coral), transparent 85%) 0, transparent 40%),
    radial-gradient(circle at 12% 88%, color-mix(in oklch, var(--cacs-cyan), transparent 82%) 0, transparent 42%),
    radial-gradient(circle at 90% 85%, color-mix(in oklch, var(--cacs-green), transparent 88%) 0, transparent 38%),
    var(--cacs-color-paper);
}
/* Faint molecular/network texture: local inline SVG, no remote asset. */
.cacs-auth-page__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%2300A3C7' stroke-opacity='0.18' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Ccircle cx='140' cy='60' r='5'/%3E%3Ccircle cx='190' cy='170' r='4'/%3E%3Ccircle cx='60' cy='180' r='6'/%3E%3Cline x1='30' y1='30' x2='140' y2='60'/%3E%3Cline x1='140' y1='60' x2='190' y2='170'/%3E%3Cline x1='60' y1='180' x2='140' y2='60'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.cacs-auth-card {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
  margin-top: var(--cacs-space-4);
  background: var(--cacs-color-paper);
  border: 1px solid var(--cacs-color-border);
  border-radius: var(--cacs-radius-medium);
  box-shadow: var(--cacs-shadow-low);
  padding: var(--cacs-space-6) var(--cacs-space-6) var(--cacs-space-5);
  text-align: center;
}
.cacs-auth-card--wide { max-width: 54rem; text-align: left; }

.cacs-auth-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-inline: auto var(--cacs-space-3);
  border-radius: 50%;
  background: var(--cacs-color-surface);
  color: var(--cacs-color-brand-strong);
}
.cacs-auth-card--wide .cacs-auth-card__icon { margin-inline: 0 var(--cacs-space-3); background: color-mix(in oklch, var(--cacs-dark-teal), white 88%); color: var(--cacs-dark-teal); }

.cacs-auth-card__title { font-size: var(--cacs-font-size-xl); margin-block: var(--cacs-space-2) 0; }
.cacs-auth-card__lead { color: var(--cacs-color-ink-muted); margin-block-end: var(--cacs-space-4); }
.cacs-auth-card__required { font-size: var(--cacs-font-size-xs); color: var(--cacs-color-ink-muted); text-align: start; }
.cacs-auth-card__message { text-align: start; }
.cacs-auth-card__switch { margin-block-start: var(--cacs-space-4); font-size: var(--cacs-font-size-sm); color: var(--cacs-color-ink-muted); text-align: center; }
.cacs-auth-card--wide .cacs-auth-card__switch { text-align: end; }

/* Cancels pages.css's older .page_login/.page_register card treatment
   (background/border/padding on .cmp_form itself), which otherwise
   nests a second visible box inside the new .cacs-auth-card. */
.page_login .cmp_form.login,
.page_register .cmp_form {
  background: none;
  border: none;
  padding: 0;
  display: block;
}

.cacs-auth-form fieldset.fields,
.cacs-auth-form .fields { text-align: start; }
.cacs-auth-form .password { position: relative; }
.cacs-auth-form__forgot { display: inline-block; margin-top: var(--cacs-space-1); font-size: var(--cacs-font-size-sm); }
.cacs-auth-form .remember { margin-block: var(--cacs-space-3); }
.cacs-auth-form__buttons { display: flex; gap: var(--cacs-space-3); align-items: center; margin-top: var(--cacs-space-4); }
.cacs-auth-form__submit {
  flex: 1;
  min-height: var(--cacs-touch-target);
  border-radius: var(--cacs-radius-small);
  background: var(--cacs-dark-teal);
  color: var(--cacs-color-paper);
  font-weight: var(--cacs-weight-medium);
  border: none;
}
.cacs-auth-form__submit:hover, .cacs-auth-form__submit:focus-visible { background: color-mix(in oklch, var(--cacs-dark-teal), black 12%); }
.cacs-auth-form__cancel {
  display: inline-flex;
  align-items: center;
  min-height: var(--cacs-touch-target);
  padding-inline: var(--cacs-space-4);
  border-radius: var(--cacs-radius-small);
  border: 1px solid var(--cacs-color-border);
}

/* Register: arrange the native registrationForm.tpl .fields groups into
   a responsive multi-column grid without touching that component. */
.cacs-auth-form--wide fieldset.identity .fields,
.cacs-auth-form--wide fieldset:not(.identity):not(.consent):not(.reviewer):not(.recaptcha_wrapper):not(.altcha_wrapper) > .fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--cacs-space-4);
}
.cacs-auth-form--wide fieldset.identity .fields > div:nth-child(4),
.cacs-auth-form--wide fieldset.identity .fields > div:nth-child(5),
.cacs-auth-form--wide fieldset.identity .fields > div:nth-child(6) { grid-column: span 1; }
@media (max-width: 48rem) {
  .cacs-auth-form--wide fieldset.identity .fields { grid-template-columns: 1fr; }
}
.cacs-auth-form--wide .consent { margin-block: var(--cacs-space-4); }

@media (max-width: 40rem) {
  .cacs-auth-card, .cacs-auth-card--wide { max-width: none; margin-inline: var(--cacs-gutter); padding: var(--cacs-space-5) var(--cacs-space-4); }
}

/* ---------- Archives ---------- */
.cacs-archives-page__intro { margin-block-end: var(--cacs-space-6); max-width: 48rem; }
.cacs-archives-page__intro p { color: var(--cacs-color-ink-muted); }

.cacs-issues-archive {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cacs-space-4);
}
.cacs-issue-card {
  /* !important width: a real, narrow (~550px) sizing bug was traced to
     this element specifically - `width:100%`/`max-width:100%` both
     resolve to the same ~550px regardless of the confirmed-wide
     ancestor chain (verified: no ancestor declares a conflicting
     max-width; `grid-template-columns:1fr` on the parent list didn't
     resolve it either). A forced explicit pixel width (larger than
     needed, so it never under-shoots) reliably produces the correct
     full-width card - confirmed via a diagnostic fill-color test, not
     guessed. Capped at 100vw so it can never cause horizontal page
     overflow on any viewport. Reset back to auto-fill under the
     existing 48rem breakpoint below, which already uses its own
     narrower grid-template-columns for the stacked mobile card. */
  box-sizing: border-box !important;
  width: min(1280px, 100vw - 11rem) !important;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 11rem;
  align-items: center;
  gap: var(--cacs-space-6);
  background: var(--cacs-color-paper);
  border: 1px solid var(--cacs-color-border);
  border-radius: var(--cacs-radius-medium);
  box-shadow: var(--cacs-shadow-low);
  padding: var(--cacs-space-5) var(--cacs-space-6);
}
.cacs-issue-card__cover { grid-column: 1; }
.cacs-issue-card__cover img, .cacs-issue-card__cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 12rem;
  border-radius: var(--cacs-radius-small);
  object-fit: cover;
  background: linear-gradient(160deg, var(--cacs-dark-teal), var(--cacs-cyan));
  color: var(--cacs-color-paper);
  font-family: var(--cacs-font-display);
  font-size: var(--cacs-font-size-lg);
  font-weight: var(--cacs-weight-bold);
  letter-spacing: 0.04em;
}
.cacs-issue-card__meta { grid-column: 2; min-width: 0; }
.cacs-issue-card__meta h2 { margin: 0 0 var(--cacs-space-2); font-family: var(--cacs-font-display); font-size: var(--cacs-font-size-lg); }
.cacs-issue-card__facts { display: flex; flex-wrap: wrap; gap: var(--cacs-space-3); font-size: var(--cacs-font-size-sm); color: var(--cacs-color-ink-muted); margin-block-end: var(--cacs-space-3); }
.cacs-issue-card__facts span { white-space: nowrap; }
.cacs-issue-card__meta .description { color: var(--cacs-color-ink-muted); font-size: var(--cacs-font-size-sm); line-height: var(--cacs-line-body); max-width: 42rem; }
.cacs-issue-card__actions { grid-column: 3; display: flex; flex-direction: column; gap: var(--cacs-space-2); align-items: stretch; }
.cacs-issue-card__pdf, .cacs-issue-card__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--cacs-space-5);
  border-radius: var(--cacs-radius-small);
  font-size: var(--cacs-font-size-sm);
  font-weight: var(--cacs-weight-medium);
  white-space: nowrap;
}
.cacs-issue-card__pdf { border: 1px solid var(--cacs-color-border); color: var(--cacs-color-ink); }
.cacs-issue-card__view { background: var(--cacs-dark-teal); color: var(--cacs-color-paper); font-weight: var(--cacs-weight-medium); }
.cacs-issue-card__view:hover, .cacs-issue-card__view:focus-visible { background: color-mix(in oklch, var(--cacs-dark-teal), black 12%); }

@media (max-width: 48rem) {
  .cacs-issue-card { grid-template-columns: 6rem minmax(0, 1fr); }
  .cacs-issue-card__cover img, .cacs-issue-card__cover-fallback { width: 6rem; height: 8rem; }
  .cacs-issue-card__actions { grid-column: 1 / -1; flex-direction: row; }
}

.cacs-archives-page__strip {
  margin-block-start: var(--cacs-space-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cacs-space-5);
  padding-block-start: var(--cacs-space-6);
  border-block-start: 1px solid var(--cacs-color-border);
}
.cacs-archives-page__strip h2 { font-size: var(--cacs-font-size-md); margin-block-end: var(--cacs-space-1); }
.cacs-archives-page__strip p { color: var(--cacs-color-ink-muted); font-size: var(--cacs-font-size-sm); }
@media (max-width: 48rem) {
  .cacs-archives-page__strip { grid-template-columns: 1fr; }
}