/* HyperCurio — HC-200 to HC-208: the auth screens.
 *
 * From "HyperCurio — Welcome & Sign-in.pdf", pages 2-4 (portrait), 7-9 (landscape) and 12-14
 * (desktop). Three screens, three layouts, and the layouts are not the same page reflowed:
 *
 *   portrait   one column. A "Back / Ask" bar, then heading, subhead, the provider buttons,
 *              "or use email", the fields, and the cross-link at the bottom.
 *   landscape  TWO columns. Heading, subhead and the cross-link move to the LEFT; the whole form
 *              including the provider buttons moves to the RIGHT.
 *   desktop    two columns again, but the left one is no longer the heading. It becomes a
 *              marketing panel: the product headline, a visual, and three benefit lines. The
 *              heading moves INTO the form column, and the cross-link moves up into the top bar.
 *
 * So the same four pieces of text sit in three different containers depending on width. Each is
 * written once and moved, never duplicated.
 *
 * This is a design preview. Nothing here submits anywhere and no field is wired to an account;
 * see the note at the top of hc-auth.html.
 */

.au-body { background: var(--hc-bg); min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- top bar
   Portrait and landscape get "Back" plus Ask. Desktop drops Back and carries the cross-link
   instead, which is the opposite of the portrait layout where the cross-link is at the bottom. */
.au-top { display: flex; align-items: center; gap: var(--hc-3); padding: var(--hc-3) var(--hc-pad); }
@media (min-width: 1024px) { .au-top { padding-block: var(--hc-4); border-bottom: 1px solid var(--hc-border); } }
.au-back { display: inline-flex; align-items: center; gap: var(--hc-2); min-height: 44px; color: var(--hc-text); text-decoration: none; font-size: 14px; font-weight: 700; }
@media (min-width: 1024px) { .au-back { display: none; } }
.au-top .hc-brand { display: none; }
/* The wordmark appears from landscape up; portrait uses the space for Back and Ask alone. */
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .au-top .hc-brand { display: inline-flex; } }
.au-top-right { margin-left: auto; display: flex; align-items: center; gap: var(--hc-3); }
.au-top-link { display: none; color: var(--hc-text-muted); font-size: 14px; }
@media (min-width: 1024px) { .au-top-link { display: inline; } }
.au-top-link a { color: var(--hc-accent); text-decoration: none; font-weight: 700; }

/* ---------------------------------------------------------------- the two-column frame */
.au-wrap { flex: 1 0 auto; width: 100%; max-width: var(--hc-max); margin-inline: auto; padding: var(--hc-4) var(--hc-pad) var(--hc-12); }
.au-grid { display: grid; gap: var(--hc-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) and (max-width: 1023px), (max-height: 499px) and (orientation: landscape) {
  .au-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--hc-8); align-items: start; }
}
@media (min-width: 1024px) {
  .au-grid { grid-template-columns: minmax(0, 1fr) 480px; gap: var(--hc-16); align-items: center; padding-block: var(--hc-12); }
}

/* ---------------------------------------------------------------- the left column
   Portrait: nothing (the heading sits in the form column instead).
   Landscape: the heading, subhead and cross-link.
   Desktop: the marketing panel. */
.au-aside { display: none; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .au-aside { display: block; } }
.au-pitch { display: none; }
@media (min-width: 1024px) { .au-pitch { display: block; } }
.au-pitch h2 { font-family: var(--hc-font-display); font-size: var(--hc-h2); line-height: 1.15; }
.au-visual {
  margin-top: var(--hc-6); width: 100%; min-height: 220px;
  border: 1px dashed var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--hc-text-muted); font-size: 13px; padding: var(--hc-5);
}
.au-benefits { list-style: none; margin: var(--hc-6) 0 0; padding: 0; display: grid; gap: var(--hc-4); }
.au-benefits li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--hc-3); align-items: start; color: var(--hc-text-muted); font-size: 15px; }
.au-benefits svg { color: var(--hc-accent); }

/* The heading block. It is in the LEFT column on landscape and in the FORM column everywhere
   else, so it is written once and the two slots take turns holding it. */
.au-head h1 { font-family: var(--hc-font-display); font-size: var(--hc-h2); line-height: 1.15; }
.au-head p { color: var(--hc-text-muted); font-size: 15px; margin-top: var(--hc-3); }
.au-cross { margin-top: var(--hc-5); font-size: 14px; color: var(--hc-text-muted); }
.au-cross a { color: var(--hc-accent); text-decoration: none; font-weight: 700; }
/* On desktop the cross-link lives in the top bar, so the in-page copy goes. On landscape it is
   in the left column under the subhead. On portrait it is the last thing on the page. */
@media (min-width: 1024px) { .au-form .au-cross { display: block; } }

/* ---------------------------------------------------------------- the form column */
.au-card { display: grid; gap: var(--hc-4); }
@media (min-width: 1024px) {
  .au-card { padding: var(--hc-8); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); }
}
.au-providers { display: grid; gap: var(--hc-3); }
/* Landscape sets them side by side, which is how the document draws that band. */
@media (min-width: 600px) and (max-width: 1023px), (max-height: 499px) and (orientation: landscape) {
  .au-providers { grid-template-columns: 1fr 1fr; }
  .au-providers .au-passkey { grid-column: 1 / -1; }
}
.au-provider {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-3);
  width: 100%; min-height: 52px; padding-inline: var(--hc-4);
  border: 1.5px solid var(--hc-border); border-radius: var(--hc-radius-control);
  background: var(--hc-surface-2); color: var(--hc-text);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.au-provider:hover { border-color: var(--hc-text-muted); }

.au-or { display: flex; align-items: center; gap: var(--hc-3); color: var(--hc-text-muted); font-size: 13px; }
.au-or::before, .au-or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--hc-border); }

/* A password field with its Show control inside the box, as the document has it. The button is a
   real button with a live label, not an icon that toggles silently. */
.au-pw { position: relative; }
.au-pw .hc-input { padding-right: 72px; }
.au-show {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 40px; padding-inline: var(--hc-3);
  background: none; border: 0; border-radius: 10px;
  color: var(--hc-accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.au-show:hover { background: var(--hc-surface-2); }
.au-label-row { display: flex; align-items: baseline; gap: var(--hc-3); }
.au-label-row a { margin-left: auto; color: var(--hc-accent); text-decoration: none; font-size: 14px; }
.au-legal { color: var(--hc-text-muted); font-size: 13px; }
.au-legal a { color: var(--hc-accent); text-decoration: none; }
.au-note { color: var(--hc-text-muted); font-size: 13px; padding: var(--hc-4); border-radius: var(--hc-radius-control); background: var(--hc-surface-1); }

/* HC-208: the strength meter. Four segments rather than a word alone, and the word is still
   there, because colour on its own is not a message. */
.au-strength { display: grid; gap: var(--hc-2); }
.au-bars { display: flex; gap: var(--hc-1); }
.au-bars span { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--hc-border); }
.au-bars span[data-on="1"] { background: var(--hc-accent); }
.au-strength-word { font-size: 13px; color: var(--hc-text-muted); }

/* The preview banner. This page looks exactly like a real sign-in, so it says plainly that it
   is not one and that nothing is sent. Without it a reviewer could reasonably type a real
   password into it. */
.au-preview {
  display: flex; gap: var(--hc-3); align-items: flex-start;
  margin: 0 var(--hc-pad) var(--hc-4);
  padding: var(--hc-3) var(--hc-4);
  border: 1px solid var(--hc-accent); border-radius: var(--hc-radius-control);
  background: var(--hc-surface-1); color: var(--hc-text); font-size: 13px;
}
.au-preview svg { flex: 0 0 auto; color: var(--hc-accent); }

/* Journey (13 Oct): the lens in place of the illustrator's brief, and the invite-only sign-up screen. */
.au-visual--lens { border-style: solid; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--hc-accent) 20%, transparent), transparent 62%), var(--hc-surface-1); }
.au-visual--lens img { width: 120px; height: 120px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--hc-accent) 55%, transparent)); }
.au-invite { color: var(--hc-text-muted); font-size: 15px; line-height: 1.55; margin: 0 0 var(--hc-5); }
.au-card .au-invite ~ .hc-btn { width: 100%; justify-content: center; }
.au-card .au-invite ~ .hc-btn + .hc-btn { margin-top: var(--hc-3); }
.au-brief { display: none; }