/* Customer dashboard, added 2026-09-04.
 *
 * Every colour here is a token from base.css -- none are invented. The accent
 * grammar that governs the rest of the site governs this too:
 *
 *   --accent (coral)       ACTION ONLY, and at most ONE filled coral button
 *                          per viewport.
 *   --accent-voice (blue)  BRAND VOICE ONLY -- eyebrows and labels.
 *
 * A dashboard is where that rule is most tempting to break, because every row
 * looks like it wants a button. It does not: "Sign out" and the consent toggle
 * are text buttons (.account-link-btn) precisely so the single filled coral
 * button on any given screen stays unambiguous. tools/verify-v2.mjs enforces
 * this and has caught real violations before.
 */

.account-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* --- Top bar ------------------------------------------------------------ */

.account-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-surface);
}

.account-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.account-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: var(--s-2);
}

.account-nav-link {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.account-nav-link:hover { color: var(--text-primary); }

.account-nav-link.is-current {
  color: var(--text-primary);
  border-bottom-color: var(--accent-voice);
}

/* Slots for the Domains and Downloads screens, which do not exist yet.
   Rendered as dimmed non-links rather than dead hrefs, so the nav is honest
   about what currently works. */
.account-nav-link.is-pending {
  opacity: 0.45;
  cursor: default;
}

.account-signout { margin-left: auto; }

/* --- Main ---------------------------------------------------------------- */

.account-main {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.account-card {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--s-4);
}

.account-card-narrow { max-width: 460px; margin: 0 auto; width: 100%; }

.account-card h1,
.account-card h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  margin: 0 0 var(--s-2);
  line-height: 1.25;
}

.account-card h1 { font-size: 26px; }
.account-card h2 { font-size: 20px; }
.account-card p { margin: 0 0 var(--s-2); line-height: 1.6; }
.account-card p:last-child { margin-bottom: 0; }

/* Brand voice, never body copy. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-voice);
  margin: 0 0 var(--s-1) !important;
}

.account-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.account-meta { font-size: 14px; color: var(--text-muted); }
.account-muted { opacity: 0.8; }

/* In-paragraph links must be visible.
 *
 * The global reset (`.v2 a { color: inherit; text-decoration: none }`) is right
 * for nav items and card links, which are identifiable by position -- but
 * inside a sentence it leaves a link indistinguishable from the surrounding
 * text. legal.css already had to solve exactly this; same fix, same reasoning.
 * Coral is correct here because these genuinely are actions, which is what the
 * accent grammar reserves it for. */
.account-card p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Except a link styled as the one filled button, which is already unmistakable
   and must not also be underlined coral-on-coral. */
.account-card p a.btn-primary { color: #1a1109; text-decoration: none; }

/* A trailing note after the form needs air, or it reads as part of the button. */
.account-form + .account-meta { margin-top: var(--s-2); }

/* A neutral, informational note. Marine-tinted rather than coral: the coral
   version read as a warning. Anything that genuinely needs attention uses
   .account-error below instead. */
.account-note {
  padding: var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--accent-voice-soft);
  border: 1px solid var(--accent-voice-line);
}

.account-error {
  padding: var(--s-2);
  border-radius: var(--radius-sm);
  background: rgba(221, 120, 103, 0.12);
  border: 1px solid var(--accent-glow);
  color: var(--text-primary);
}

/* --- Domains ------------------------------------------------------------- */

.account-domains {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.account-domains li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.account-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  color: var(--text-muted);
}

/* --- Forms --------------------------------------------------------------- */

.account-form { display: flex; flex-direction: column; gap: var(--s-1); }

.account-form label { font-size: 14px; color: var(--text-muted); }

.account-form input[type="email"] {
  padding: 12px var(--s-2);
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: var(--bg-void);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
}

.account-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* The one filled coral button per screen. */
.btn-primary {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 12px var(--s-3);
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: #1a1109;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn-primary:hover { filter: brightness(1.08); }

/* A text button, NOT a second coral one -- see the note at the top of this
   file. Used for Sign out and the consent toggle. */
.account-link-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 6px;
  font: inherit;
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.account-link-btn:hover { color: var(--text-primary); }

.account-consent { margin-top: var(--s-3); }

/* --- Footer -------------------------------------------------------------- */

.account-foot {
  padding: var(--s-3);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
}

.account-foot a { color: var(--text-muted); }

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 600px) {
  .account-bar { flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
  .account-nav { margin-left: 0; order: 3; width: 100%; }
  .account-signout { margin-left: auto; }
  .account-main { padding: var(--s-3) var(--s-2); }
  .account-card { padding: var(--s-3); }
  .account-key { font-size: 16px; }
}

/* Domains screen, added 2026-09-04.
   Remove controls are text buttons, not filled ones: coral stays action-only
   and the single filled button per card is Add. */
.domains-flash            { margin: 0 0 18px; padding: 10px 14px; border-radius: 8px;
                            font-size: 15px; }
.domains-flash.is-ok      { background: rgba(63, 140, 255, .12); color: var(--accent-voice); }
.domains-flash.is-error   { background: rgba(232, 57, 63, .10);  color: #e8393f; }

.domains-list             { list-style: none; margin: 14px 0 0; padding: 0; }
.domains-item             { border-top: 1px solid var(--hairline); padding: 12px 0; }
.domains-row              { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.domains-name             { font-weight: 600; word-break: break-all; }
.domains-remove           { margin-left: auto; }
.domains-copy             { margin: 8px 0 0 20px; padding-left: 12px;
                            border-left: 2px solid var(--hairline); }

/* Sized to sit flush beside .btn-primary: 11px padding plus a 1px border
   equals the button's 12px padding and no border, and the font size is matched
   too, so the two boxes come out the same height rather than nearly so. */
.domains-input            { flex: 1 1 220px; min-width: 0; padding: 11px 12px;
                            border: 1px solid var(--hairline);
                            border-radius: var(--radius-btn);
                            font: inherit; font-size: 15px;
                            color: inherit; background: transparent; }

/* .btn-primary carries margin-top: 8px for stacked forms. In a centred flex
   row that margin is centred with the box, so half of it shows as the button
   sitting 4px below the field beside it. */
.domains-add .btn-primary { margin-top: 0; }
.domains-add              { display: flex; gap: 10px; align-items: center;
                            flex-wrap: wrap; margin-top: 16px; }
.domains-add-copy         { display: flex; gap: 10px; align-items: center; }
.domains-stage-offer      { margin: 6px 0 0 20px; }

/* Secondary actions -- Remove, and revealing the staging field.
   Deliberately NOT coral: these repeat once per site, and coral repeated six
   times makes REMOVING the loudest thing on a page whose primary action is
   adding. Coral stays on the one filled Add button. */
.domains-quiet-btn        { background: none; border: 0; padding: 0; margin: 0;
                            font: inherit; font-size: 14px;
                            color: var(--text-muted); cursor: pointer; }
.domains-quiet-btn:hover  { color: var(--text-primary); text-decoration: underline; }

.domains-confirm          { padding: 12px 14px; border-radius: 10px;
                            background: rgba(232, 57, 63, .06); }
.domains-confirm p        { margin: 0 0 8px; }
.domains-confirm-actions  { display: flex; gap: 16px; align-items: center; }

/* The Cancel link beside a confirm button. account.css had only the button
   variant, .account-link-btn, and a bare <a> here would inherit the card's body
   colour and read as plain text rather than a way out. */
.account-link             { color: var(--accent-voice); text-decoration: none; }
.account-link:hover       { text-decoration: underline; }

/* --- Downloads ------------------------------------------------------- */

/* The newest build the licence can actually take. Raised out of the list
   because it is the one thing most visitors came here to do. */
.dl-latest {
  margin: 18px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, rgba(255, 255, 255, 0.02));
}
.dl-latest h3 { margin: 0 0 6px; font-size: 18px; }
.dl-latest h3 .account-muted { font-size: 14px; font-weight: 400; margin-left: 8px; }
.dl-hash { font-size: 12px; word-break: break-all; margin: 8px 0 14px; }
.dl-hash code { font-size: 11px; }

/* Every download that is not the primary one. A quiet control, so the page
   keeps exactly one filled coral button -- see account-downloads.php. */
.dl-quiet-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.dl-quiet-btn:hover { border-color: var(--marine); }

.dl-list { list-style: none; margin: 14px 0 0; padding: 0; }
.dl-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.dl-version { font-weight: 600; min-width: 5em; }
.dl-list li > a { margin-left: auto; }

/* A release published after this licence's term. Shown rather than hidden: a
   download that vanishes reads as a purchase that vanished. */
.dl-list li.is-locked .dl-version,
.dl-list li.is-locked .account-muted { opacity: 0.55; }