/* Command Navy — Sign-in / Create-account / Account (Phase 2).
 * Linked only by planner/login.html, planner/register.html and
 * planner/account.html (all on base_navy.html). public_pages.css stays
 * untouched for the system pages that still load it.
 * Class prefix `nxa-`.
 */

/* --- Auth (sign-in / create-account: one product decision rendered twice) --- */

.nxa-auth {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-block: 44px 64px;
}
.nxa-auth-col { width: min(100%, 420px); display: grid; gap: 14px; }

.nxa-panel {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-band);
  padding: 22px 24px;
}

.nxa-brand-row { display: flex; align-items: center; gap: 10px; margin-block-end: 4px; }
.nxa-title { font: 700 17px var(--nx-font-display); color: var(--nx-text); margin: 0; }
.nxa-lead { margin: 6px 0 0; color: var(--nx-support); font-size: var(--text-xs); line-height: 1.7; }
/* A SECTION HEADING INSIDE THE PANEL. `.nxa-subtitle` was used by
   verify_email.html and defined NOWHERE, so both its headings fell back to the
   browser's default h2 — 1.5em bold, which is larger than `.nxa-title` above
   it. The panel's own title was being out-shouted by a subsection of itself.
   Sized under the title, spaced away from the paragraph before it. */
.nxa-subtitle {
  font: 700 13px var(--nx-font-display);
  color: var(--nx-text);
  margin: 18px 0 0;
}
/* The block a subtitle heads. A plain grouping element; it exists so the
   heading, its explanation and its action read as one thing. */
.nxa-section { display: block; }

.nxa-form { display: grid; gap: 12px; margin-block-start: 14px; }
.nxa-form label {
  display: grid;
  gap: 5px;
  color: var(--nx-support);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
/* The fields are the kit's `.nx-input`; this rule keeps the auth column's own
   full width and floor on them. */
.nxa-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--nx-touch);
  padding: 11px 12px;
  border: 1px solid var(--nx-border-2);
  border-radius: 8px;
  background: var(--nx-inset);
  color: var(--nx-text);
  font: 400 13.5px var(--nx-font-body);
}
.nxa-form input:focus-visible { outline: none; border: 1.5px solid var(--nx-focus); }
.nxa-form input[aria-invalid="true"] { border: 1.5px solid var(--nx-red); }
.nxa-form .field-help { color: var(--nx-muted); font-size: var(--size-tab); line-height: 1.55; font-weight: var(--weight-regular); }

/* The ivory primary — the signature action. */
.nxa-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--nx-touch);
  padding: 12px 0;
  border: 0;
  border-radius: 8px;
  background: var(--nx-text);
  color: var(--nx-canvas);
  font: 600 14px var(--nx-font-body);
  cursor: pointer;
}
.nxa-submit:hover { background: var(--nx-ivory-hover); }

/* Wrong credentials: the form back, with a plain explanation. */
/* The inline rail (A5) on the two auth pages: `.nx-error` draws the rail; this
   name keeps the heading and the list inside it. */
.nxa-alert {
  margin-block-end: 4px;
  padding: 10px 13px;
  border: 1px solid var(--nx-red-line);
  border-inline-start: 3px solid var(--nx-red);
  border-radius: var(--nx-radius);
  background: var(--nx-red-tint);
  color: var(--nx-red-text);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.nxa-alert strong { display: block; color: var(--nx-red-text); margin-block-end: 2px; }
.nxa-alert ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; }

.nxa-switch { margin: 12px 0 0; color: var(--nx-muted); font-size: var(--text-xs); line-height: 1.7; }
/* The one link under the form ("create one" / "sign in") measured 66×16 at
   375: an inline link is a line of text, not a target. It takes the floor on
   both axes and stays inline with its sentence. */
.nxa-switch a { display: inline-flex; align-items: center; min-block-size: var(--nx-touch); min-inline-size: var(--nx-touch); }
.nxa-note { margin: 0; color: var(--nx-faint); font-size: var(--size-tab); line-height: 1.7; }

/* --- Account & access -------------------------------------------------------- */

.nxa-account { width: min(100%, 920px); box-sizing: border-box; margin-inline: auto; padding-block: 26px 60px; display: grid; gap: 14px; }
.nxa-account-title { font: 700 22px/1.35 var(--nx-font-display); color: var(--nx-text); margin: 0; }

.nxa-rows { display: grid; gap: 8px; }
.nxa-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 11px 14px;
  min-height: var(--nx-touch);
}
.nxa-row-kicker {
  display: block;
  color: var(--nx-muted);
  font-family: var(--nx-font-mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[dir="rtl"] .nxa-row-kicker { letter-spacing: 0; }
.nxa-row-main { min-width: 0; }
.nxa-row-value { color: var(--nx-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-block-start: 2px; overflow-wrap: anywhere; }
.nxa-row-value small { color: var(--nx-muted); font-weight: var(--weight-regular); }

/* 44px, NOT 38: the touch floor has no exceptions (owner ruling, 2026-09-06),
   and these are the row actions on /account, /billing/sponsor and
   /billing/return — Open, Sign out, Subscribe, Manage, Sponsor, the two ways
   back. */
.nxa-row-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nx-touch);
  padding: 8px 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--nx-outline);
  border-radius: 8px;
  background: none;
  color: var(--nx-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.nxa-row-action:hover { border-color: var(--nx-muted); color: var(--nx-text); }
/* Sign out: destructive family, quiet outline form. */
.nxa-row-action--signout { border-color: var(--nx-red-line-2); color: var(--nx-red-text); }
.nxa-row-action--signout:hover { border-color: var(--nx-red); color: var(--nx-red-text); }

/* Product access: factual rows from the access service. Since 2026-08-24 this
 * block can also carry a subscribe/manage action, so it is no longer "no
 * pricing, no upsell" — but no PRICE is ever rendered here: the payment
 * provider owns the catalogue, and a number mirrored into this product is a
 * second price that goes stale without anyone noticing. */
.nxa-access {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}
.nxa-access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nxa-access-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--nx-body); min-height: 30px; }
.nxa-access-state { font-weight: var(--weight-semibold); white-space: nowrap; }
.nxa-access-state.is-open { color: var(--nx-olive-text); }
.nxa-access-state.is-closed { color: var(--nx-muted); }
.nxa-access-note { margin: 0; color: var(--nx-faint); font-size: var(--size-tab); line-height: 1.7; }

/* The subscription line. Same row grammar as the identity/language rows above,
 * so a paid product does not get louder furniture than the rest of the account.
 * The state and the action sit on one line and wrap together under 560px, where
 * `.nxa-row`'s flex-wrap already applies. */
.nxa-billing { display: grid; gap: 6px; }
.nxa-billing-state { color: var(--nx-body); font-weight: var(--weight-regular); }
.nxa-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.nxa-billing-actions form { margin: 0; }
/* The billing action is the row action, re-declared as a button so a POST form
 * (which is what a state change must be) looks identical to the links beside
 * it. Everything visual comes from .nxa-row-action; only the reset is here. */
.nxa-billing-actions button.nxa-row-action { font-family: inherit; }

@media (max-width: 560px) {
  .nxa-auth { padding-block: 24px 40px; }
  .nxa-row { flex-wrap: wrap; }
}

/* --- The password field: a toggle, and a place to say why it is refused -----
 *
 * The toggle is positioned against the wrapper rather than added to the flow,
 * so the input keeps its full width and the layout of three existing forms does
 * not move. `inset-inline-end` and not `right`: this form renders in Arabic.
 */
/* The input's own row. The toggle is positioned against THIS, not against the
   field wrapper: the wrapper also holds the label above and the hint below, and
   an offset measured from its top is a guess about how tall the label is --
   wrong the moment the label wraps, which German and Arabic both do at narrow
   widths. */
.nxa-password-box {
  position: relative;
  display: flex;
}

.nxa-password-box .nx-input {
  /* Room for the toggle, on whichever side the reading direction puts it. */
  padding-inline-end: 3.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nxa-password-toggle {
  position: absolute;
  inset-inline-end: 0.5rem;
  /* Centred on the input, at whatever height the input turns out to be. */
  top: 50%;
  transform: translateY(-50%);
  min-height: var(--nx-touch, 44px);
  min-width: var(--nx-touch, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border: 1px solid var(--nx-border-2, #223240);
  border-radius: var(--nx-radius-sm, 6px);
  background: var(--nx-surface, #17242e);
  color: var(--nx-text-2, #a9bcc6);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.nxa-password-toggle:hover {
  color: var(--nx-text, #f2f5f6);
}

.nxa-password-toggle[aria-pressed="true"] {
  color: var(--nx-text, #f2f5f6);
  border-color: var(--nx-orange, #e0842c);
}

.nxa-password-toggle:focus-visible {
  outline: 2px solid var(--nx-focus, #4cc3e0);
  outline-offset: 2px;
}

/* `small` is inline, so the requirement and the message ran together into one
   paragraph. Each gets its own line. */
.nxa-password .nxa-password-hint,
.nxa-password .nxa-password-live {
  display: block;
}

/* Empty until something is wrong, and it reserves no height while empty, so a
   form does not jump when a message appears. */
.nxa-password .nxa-password-live:empty {
  display: none;
}

/* SCOPED UNDER `.nxa-password` FOR THE SPECIFICITY, not for the tidiness.
   `.nxa-form .field-help` above sets the muted colour at 0,2,0 and the message
   carries both classes, so a bare `.nxa-password-live` lost and the error
   rendered in the same grey as the requirement -- measured as
   rgb(154,170,180) where it should be #e2766f. */
.nxa-password .nxa-password-live {
  color: var(--nx-red-text);
}

/* While the field is answering, the message stands in for the requirement --
   they say the same thing, and both at once is one sentence printed twice. */
.nxa-password.is-answering .nxa-password-hint {
  display: none;
}