/* createmedia platform: the signed-out layout.
   One two-panel page for every screen a person sees before a dashboard opens: sign in, the
   sign-up chooser, the creator and brand sign-up steps, waiting for approval, not approved,
   suspended, and the gate of a site that has its own. shared/auth.js builds the markup; see the comment at its top.

   Left: a deep-forest panel with the gold mark, one Newsreader line and a specimen slip.
   Right: the paper panel with the eyebrow, title, lead, stepper, form and foot links.
   At 860px and below the forest panel becomes a compact band above the form, and the slip
   moves under the form. */

/* ───────────── breaking out of the app shell (the dashboards) ───────────── */

.shell .main:has(.auth) { padding: 0; }
.main-in:has(.auth) { max-width: none; margin: 0; }
.main-in:has(.auth) > .viewas { margin: 12px 16px; }

/* ───────────── the frame ───────────── */

.auth {
  --auth-side-bg: #0B2A1D;
  --auth-side-fg: #F3EEE3;
  --auth-side-muted: #A8BCAE;
  --auth-side-rule: rgba(243, 238, 227, .18);
  --auth-slip-bg: #FBF8F1;
  --auth-slip-fg: #0E1A14;
  --auth-slip-muted: #4A554D;
  --auth-slip-line: #D6CCB8;
  --auth-slip-rule: #0E1A14;
  --auth-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cg fill='none' stroke='%23F3EEE3' stroke-opacity='.06'%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(18.3 0)'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(36.7 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(9.2 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(27.5 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(45.8 0)'/%3E%3C/g%3E%3C/svg%3E");
  --auth-slip-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cg fill='none' stroke='%231E4D35' stroke-opacity='.07'%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(18.3 0)'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(36.7 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(9.2 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(27.5 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(45.8 0)'/%3E%3C/g%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  min-height: calc(100vh - var(--pv-h, 0px));
  background: var(--bg);
  color: var(--text);
}

/* a site's own gate: the night room, wherever the layout is mounted */
.auth[data-variant="owner"] {
  color-scheme: dark;
  --bg: #0A1712; --surface: #10231B; --surface-2: #173226; --line: #2C5446; --line-strong: #F3EEE3;
  --text: #F3EEE3; --muted: #A8BCAE; --rand-text: #FFC93C; --clay: #E7907A; --ok: #7FD3A2; --warn: #F2C25B;
  --clay-tint: rgba(231, 144, 122, .13); --ok-tint: rgba(127, 211, 162, .12); --warn-tint: rgba(242, 194, 91, .12);
  --info-tint: rgba(168, 188, 174, .12); --neutral-tint: rgba(243, 238, 227, .07);
  --link: #9ADBB8; --ring: #FFC93C; --btn-bg: #F3EEE3; --btn-bg-hover: #FFFFFF; --btn-fg: #0E1A14;
  --field-bg: #0C1D16; --field-line: #4E7B68; --check: var(--rand);
  --auth-side-bg: #06100C;
  --auth-side-rule: rgba(243, 238, 227, .14);
  --auth-slip-bg: #10231B;
  --auth-slip-fg: #F3EEE3;
  --auth-slip-muted: #A8BCAE;
  --auth-slip-line: #2C5446;
  --auth-slip-rule: #F3EEE3;
  --auth-slip-wave: var(--auth-wave);
}

/* ───────────── the forest panel ───────────── */

.auth-side {
  position: sticky; top: var(--pv-h, 0px); align-self: start;
  height: calc(100vh - var(--pv-h, 0px)); overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--auth-wave) 0 0 / 220px 60px, var(--auth-side-bg);
  color: var(--auth-side-fg);
  border-right: 1px solid var(--auth-side-rule);
}
.auth-side :focus-visible { outline-color: var(--rand); }

.auth-band { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: clamp(22px, 2.6vw, 36px) clamp(22px, 3vw, 44px) 0; }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; color: inherit; text-decoration: none; }
.auth-brand svg { width: 36px; height: 36px; flex: none; }
.auth-brand .wm { font-size: 22px; }
.auth-tag { font: 400 11px/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--rand); text-align: right; }

.auth-specimen { margin-top: auto; display: grid; gap: clamp(20px, 3vh, 32px); padding: 32px clamp(22px, 3vw, 44px) clamp(22px, 2.6vw, 36px); }
.auth-line { max-width: 13ch; font: italic 400 clamp(34px, 3.5vw, 54px)/1.02 var(--f-serif); letter-spacing: -.015em; text-wrap: balance; }
.auth-aside { display: grid; gap: 14px; color: var(--auth-side-fg); }

/* the specimen slip: a paper stub on the forest */
.auth-slip { position: relative; max-width: 440px; padding: 16px 20px 14px; background: var(--auth-slip-wave) 0 0 / 220px 60px, var(--auth-slip-bg); color: var(--auth-slip-fg); border-top: 2px dashed var(--auth-slip-line); border-bottom: 2px dashed var(--auth-slip-line); border-radius: 2px; }
.auth[data-variant="owner"] .auth-slip { border-left: 1px solid var(--auth-slip-line); border-right: 1px solid var(--auth-slip-line); }
.auth-slip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding-bottom: 9px; border-bottom: 2px solid var(--auth-slip-rule); }
.auth-slip-title { font: 700 15.5px/1.2 var(--f-sans); letter-spacing: -.01em; }
.auth-slip-sub { font: 400 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--auth-slip-muted); }
.auth-slip-rows { display: grid; margin: 0; }
.auth-slip-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--auth-slip-line); }
.auth-slip-row dt { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--auth-slip-muted); }
.auth-slip-row dt small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; }
.auth-slip-row dd { flex: none; margin: 0; font: 800 21px/1 var(--f-sans); font-stretch: 80%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.auth-slip-row dd small { font: 500 12.5px/1 var(--f-sans); font-stretch: 100%; letter-spacing: 0; color: var(--auth-slip-muted); margin-left: 3px; }
.auth-slip-note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--auth-slip-muted); }

/* ───────────── the paper panel ───────────── */

.auth-main { display: grid; align-content: safe center; min-width: 0; padding: clamp(28px, 6vh, 72px) clamp(20px, 5vw, 80px); }
.auth-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: min(540px, 100%); margin: 0 auto; }
.auth--wide .auth-in { width: min(820px, 100%); }

.auth-head { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1.5px solid var(--line-strong); }
.auth-eyebrow { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.auth-title { font: 800 clamp(30px, 3.2vw, 44px)/1.02 var(--f-sans); font-stretch: 80%; letter-spacing: -.022em; text-wrap: balance; }
.auth-title:focus { outline: none; }
.auth-lead { max-width: 56ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.auth-lead b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* the stepper: every step keeps its number, only the current one is named */
.auth-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.auth-steps .stepper li:not([aria-current="step"]) .step-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.auth-steps .stepper li:not(:last-child)::after { width: 12px; margin: 0 2px; }
/* six numbered steps and one name are a few pixels too wide for a 390px phone at that spacing, and
   the last number dropped to a line of its own behind a loose connector: closer together on a phone */
@media (max-width: 480px) {
  .auth-steps .stepper { column-gap: 2px; }
  .auth-steps .stepper li { gap: 6px; }
  .auth-steps .stepper li:not(:last-child)::after { width: 8px; margin: 0; }
}
.auth-steps-count { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.auth-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.auth-body .form-actions .btn { min-height: 46px; padding: 0 20px; font-size: 15.5px; }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.auth-actions .btn { min-height: 46px; }
.auth-inline { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.auth-inline .linkish, .auth-foot .linkish { padding: 0; background: none; border: 0; color: var(--link); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; min-height: 28px; }
.auth-inline .linkish:hover, .auth-foot .linkish:hover { text-decoration-thickness: 2px; }

.auth-foot { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.auth-foot p { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 28px; }
.auth-foot a { font-weight: 600; }

/* a quiet note under a form */
.auth-note { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.auth-note-tag { flex: none; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; font: 400 10.5px/1.5 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); background: var(--surface); }

/* a dashed panel with a mono label */
.auth-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px dashed var(--field-line); border-radius: var(--radius); background: var(--surface); }
.auth-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.auth-panel-label { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text); }
.auth-panel-tag { font: 400 10.5px/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.auth-panel-text { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* the one-time code field */
.auth-code .input { max-width: 240px; font: 500 22px/1.2 var(--f-mono); letter-spacing: .3em; }

/* the sign-up chooser: two large choices */
.auth-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.auth-choice { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; min-width: 0; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--text); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .16s, background-color .16s; }
.auth-choice:hover { border-color: var(--text); background: #FFFDF8; }
.auth-choice-k { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.auth-choice-title { font: 800 28px/1.02 var(--f-sans); font-stretch: 80%; letter-spacing: -.02em; }
.auth-choice-list { display: grid; align-content: start; gap: 0; }
.auth-choice-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.auth-choice-list li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-choice-rule { padding: 10px 12px; background: var(--surface-2); border-radius: 4px; font-size: 13px; line-height: 1.45; }
.auth-choice-rule span { display: block; margin-bottom: 3px; font: 400 10.5px/1.4 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.auth-choice-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-fg); font: 600 15px/1.1 var(--f-sans); }
.auth-choice-go .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.auth-choice:hover .auth-choice-go { background: var(--btn-bg-hover); }
.auth-choice:hover .auth-choice-go .icon { transform: translateX(3px); }

/* the "you are signed in" card */
.auth-who { display: grid; gap: 3px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--veld); border-radius: var(--radius); }
.auth-who b { font: 700 18px/1.25 var(--f-sans); letter-spacing: -.01em; }
.auth-who span { font: 400 12px/1.4 var(--f-mono); color: var(--muted); letter-spacing: .02em; overflow-wrap: anywhere; }

/* ───────────── tablets ───────────── */

@media (max-width: 1100px) {
  .auth { grid-template-columns: minmax(320px, 36%) minmax(0, 1fr); }
  .auth--wide .auth-choices { grid-template-columns: minmax(0, 1fr); }
}

/* ───────────── phones: a compact forest band, the form, then the slip ───────────── */

@media (max-width: 860px) {
  .auth { display: flex; flex-direction: column; min-height: 0; }
  .auth-side { display: contents; }
  .auth-band { order: 0; padding: 10px 16px; background: var(--auth-side-bg); color: var(--auth-side-fg); border-bottom: 1px solid var(--auth-side-rule); }
  .auth-brand svg { width: 28px; height: 28px; }
  .auth-brand .wm { font-size: 18px; }
  .auth-tag { font-size: 10.5px; }
  .auth-main { order: 1; display: block; padding: 24px 16px 32px; }
  .auth-in { gap: 20px; }
  .auth-specimen { order: 2; margin-top: 0; gap: 16px; padding: 24px 16px 28px; background: var(--auth-wave) 0 0 / 220px 60px, var(--auth-side-bg); color: var(--auth-side-fg); }
  .auth-line { max-width: none; font-size: 28px; }
  .auth-slip { max-width: none; }
  .auth-title { font-size: 30px; }
  .auth-lead { font-size: 15.5px; }
  .auth-choices, .auth--wide .auth-choices { grid-template-columns: minmax(0, 1fr); }
  .auth-choice-title { font-size: 26px; }
  .auth-body .form-actions .btn, .auth-actions .btn { flex: 1 1 auto; }
  .auth-code .input { max-width: 100%; }
  .dev-code .btn { flex: 1 1 auto; white-space: normal; text-align: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-choice, .auth-choice-go .icon { transition: none; }
}