/* =====================================================================
   Sign in. Two columns: the form on the left, a photo panel on the
   right. Values from design/login.html, which is a React bundle — the
   markup is rebuilt in Alpine per UI_HANDOFF.md §0, matching its
   inline styles.
   ===================================================================== */

.auth{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:720px}

/* ---------- Form column ---------- */
.auth .form-col{display:flex;align-items:center;justify-content:flex-end;padding:56px 72px 72px 48px}
.auth form{width:100%;max-width:440px;display:flex;flex-direction:column;gap:22px}
.auth .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.auth h1{margin:8px 0 0;font-size:44px;line-height:1;letter-spacing:-.03em;font-weight:800}
.auth .lede{margin:14px 0 0;font-size:16px;line-height:1.55;color:#475569;text-wrap:pretty}

/* .banner lives in mesteel.css now. Its copy here was identical but
   scoped to .auth, and two copies of a rule is how they diverge. */

.auth .fields{display:flex;flex-direction:column;gap:8px}
.auth label.f{display:block;background:var(--bg);border-radius:12px;padding:12px 16px;border:1.5px solid transparent;position:relative}
.auth label.f:focus-within{border-color:var(--blue)}
.auth label.f > span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.auth label.f input{width:100%;border:0;background:none;font:inherit;font-size:16px;font-weight:700;margin-top:3px;color:var(--ink);outline:0;padding:0;min-height:24px}
/* Room for the eye, which is round and 40px wide. It used to read
   "Show"/"Hide" and needed 70. */
/* Field-level validation, so the message sits with the input it blames. */
.auth label.f.bad{border-color:var(--error, #DC2626)}
.auth .field-err{font-size:12.5px;font-weight:600;color:#B91C1C;padding:2px 4px}

.auth .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:#334155}
.auth .row label{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.auth .row input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);margin:0}
.auth .row a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}

.auth .submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font-weight:800;font-size:15px;border-radius:999px;padding:14px 18px;min-height:52px;cursor:pointer;border:0;font-family:inherit;background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(31,63,143,.3)}
.auth .submit:hover:not(:disabled){background:var(--navy)}
.auth .submit:disabled{opacity:.7;cursor:progress}

/* ---------- Register Now ----------
   The Sign in buttons twin: the SAME size and radius, in the site grey
   with navy text. It replaces three plan cards that put a price list
   under a sign-in form.

   An <a> and not a <button>, because it navigates — so the sizing has to
   be restated rather than inherited from `.submit`: `box-sizing` and
   `line-height` differ between the two elements, and a link given a
   buttons padding comes out several pixels shorter. `min-height` with
   `align-items:center` is what makes the two measure the same. */
.auth .reg-btn{display:inline-flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;min-height:52px;padding:14px 18px;
  border:1px solid var(--line);border-radius:999px;
  background:#F1F5F9;color:var(--navy);
  font-family:inherit;font-weight:800;font-size:15px;line-height:1;
  text-decoration:none}
.auth .reg-btn:hover{background:#E6EBF3;border-color:#C9D4E6;transform:none}
.auth .reg-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* The second way in, as a line of text rather than a second button: one
   of the two is the main road and two pills of equal weight would not
   say which. */
.auth .reg-alt{margin:12px 0 0;text-align:center;font-size:13.5px;font-weight:700}
.auth .reg-alt a{color:var(--blue)}
.auth .reg-alt a:hover{color:var(--navy);text-decoration:underline}
.auth .spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.auth .sep{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.auth .sep span.line{flex:1;height:1px;background:var(--line)}


/* Password rules for the set-a-new-password step. */
.auth .rules{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.auth .rules div{display:flex;gap:8px;align-items:center}
.auth .rules i{width:16px;height:16px;border-radius:50%;background:#E2E8F0;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;font-style:normal;flex:none}
.auth .rules div.met{color:var(--green)}
.auth .rules div.met i{background:var(--green)}

/* ---------- Visual column ---------- */
/* `var(--hero-img, …)` with the built-in picture as the FALLBACK: the page
   sets the property only when Admin has been given one, so a stylesheet
   that is served to a page which does not set it looks exactly as it did.
   See Modules\Web\Services\HeroImages. */
.auth .visual{position:relative;overflow:hidden;
  background:var(--hero-img,url(../img/hero-warehouse.jpg)) var(--hero-pos,center)/cover}
.auth .visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.55) 30%,rgba(255,255,255,.15) 100%)}
.auth .visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.9) 100%)}
.auth .visual-text{position:absolute;left:48px;right:72px;bottom:64px;display:flex;flex-direction:column;gap:18px;z-index:var(--z-content)}
.auth .panel{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;border-radius:22px;padding:24px 26px;box-shadow:0 12px 40px rgba(15,31,74,.18);max-width:520px}
.auth .panel p{margin:0;font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-.01em;text-wrap:pretty}
.auth .panel .stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.auth .panel .stats div{font-size:13.5px;line-height:1.35;color:#B8C4E6}
.auth .panel .stats b{display:block;font-size:22px;color:#fff;letter-spacing:-.02em}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth .form-col{padding:40px 24px 48px;justify-content:center}
  .auth .visual{min-height:420px}
  .auth .visual-text{left:24px;right:24px;bottom:32px}
}
@media (max-width:639px){
  .auth .form-col{padding:32px 16px 40px}
  .auth h1{font-size:36px}
  .auth .visual{min-height:360px}
  .auth .visual-text{left:16px;right:16px;bottom:24px}
  .auth .panel{padding:20px}
  .auth .panel p{font-size:16px}
}

/* ---------- /news-prices — the reader's plan ----------
   Two columns: what it is, and the way in. One screen, because this is a
   purchase made off the back of an article somebody could not finish, and a
   click between deciding and the form is where they leave. */
.np-wrap{padding:36px 0 56px;max-width:1040px}
.np-head{margin-bottom:26px;max-width:640px}
.np-head h1{font-size:36px;line-height:1.05;letter-spacing:-.03em;margin:8px 0 10px}
.np-sub{margin:0;font-size:16px;line-height:1.6;color:#475569}

.np-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;
  align-items:start}
.np-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.np-card h2{margin:0 0 12px;font-size:20px;font-weight:800}

/* The period switch, above the price. `.seg2` is the site component and
   this only places it — the tint, the pill and the pressed state are the
   components own, and a second definition of them is how two segmented
   toggles on one site come to differ. */
.np-seg{margin:0 0 12px}

.np-price{margin:0 0 6px;display:flex;align-items:baseline;gap:8px}
/* What yearly saves. Green because it is a saving, and it is the one line
   here that is an argument rather than a fact. */
.np-save{margin:0 0 14px;font-size:13.5px;font-weight:800;color:var(--sell-ink)}
.np-save-alt{margin:0 0 14px}
.np-price b{font-size:40px;letter-spacing:-.03em;line-height:1}
.np-price span{font-size:15px;color:var(--mute);font-weight:600}
.np-vat{margin:0 0 18px}

/* A tick per line, drawn with borders so it inherits currentColor and lines
   up on every platform — the same reasoning as the picker's checkboxes. */
.np-list{list-style:none;margin:0 0 18px;padding:0;display:flex;
  flex-direction:column;gap:10px}
.np-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.5}
.np-list li:before{content:"";position:absolute;left:4px;top:4px;width:6px;height:11px;
  border:solid var(--sell);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* The field shell.

   `.fld` lives in dashboard.css and this page does not load it, so the
   inputs first rendered as bare browser boxes and the country combo as
   nothing at all. That is the third time in this round: a component
   reused on a new page needs its styles to travel with it, and the
   combo partial says so in its own docblock. Restated here rather than
   moved, because dashboard.css sizes it for a dense settings grid and
   this is a sign-up form. */
.np-buy .fld{display:block;background:var(--bg);border-radius:14px;
  padding:12px 16px;margin-bottom:14px}
.np-buy .fld:focus-within{box-shadow:0 0 0 2px var(--blue)}
.np-buy .fld > span{display:block;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.np-buy .fld > span.fine{text-transform:none;letter-spacing:normal;
  font-weight:500;font-size:12px;line-height:1.5;margin-top:5px}
.np-buy .fld input{width:100%;border:0;background:none;font:inherit;
  font-size:16px;font-weight:700;margin-top:3px;color:var(--ink);outline:0;padding:0}
.np-buy .fld input::placeholder{color:var(--faint);font-weight:500}
/* The combo in this shell — padded 16px, like the directory\u0027s. */
.np-buy .fld.combo{--chev-inset:16px}
.np-buy .fld .lbl{display:block;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.np-buy .fld .combo-row{margin-top:3px}
.np-buy .fld .combo-row input{margin-top:0}
.np-buy .fld.combo.is-open{box-shadow:0 0 0 2px var(--blue),0 0 0 5px rgba(31,63,143,.12)}
.np-acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
.np-vatline{background:var(--blue-10);border-radius:10px;padding:10px 12px;margin:0 0 14px}

.np-more{margin:4px 0 14px;border-top:1px solid var(--line);padding-top:12px}
.np-more summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--blue);
  list-style:none}
.np-more summary::-webkit-details-marker{display:none}
.np-more summary:before{content:"+ ";font-weight:800}
.np-more[open] summary:before{content:"– "}
.np-more .fine{margin:10px 0 12px}

/* Off-screen, not display:none: both obvious ways to hide a field are what a
   form-filler checks before deciding one is real. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

@media (max-width:860px){
  .np-cols{grid-template-columns:1fr}
  /* The form first on a phone: somebody who has already decided should not
     have to scroll past the sales copy to reach it. */
  .np-buy{order:-1}
  .np-head h1{font-size:30px}
}