/* ---------------------------------------------------------------------------
 * dr-account.css — the shell for every page a customer sees OUTSIDE the app:
 * set-password, checkout-complete, login, no-site, not-entitled.
 *
 * WHY THIS FILE EXISTS (2026-09-23). checkout.php moved onto Deal Radar's own
 * palette on 2026-09-19, but the five pages either side of it kept the #0f1115
 * background and #6d5efc purple that appear nowhere else in the product. So a
 * customer paid on a page that looked like Deal Radar and was then handed a
 * page that did not — the set-password link is the first thing a new customer
 * opens after a $2,000 charge, and it looked like a different vendor's form.
 * Five copies of one inline stylesheet is how they drifted; one file is how
 * they stay together.
 *
 * The tokens are checkout.php's, which are deal-radar-app.html's :root
 * verbatim, and the CTA is site/pricing/'s .btn-gold green. Change a token
 * here and in checkout.php together. Do not reintroduce the purple.
 * ------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --shell-bg:#24262A; --shell-deep:#1C1E21; --shell-inset:#2D2F34;
  --shell-border:#383B40; --shell-text:#E8E6E3; --shell-muted:#9A9892;
  --accent:#2E6F9E; --accent-soft:#5FB8E8; --accent-tint:rgba(46,111,158,.14);
  --good:#2FA56A;
  --cta:linear-gradient(180deg,#4FD264 0%,#1B9440 52%,#0B6B2B 100%);
  --cta-ink:#03200F;
}
* { box-sizing:border-box; }

body { margin:0; min-height:100vh; display:grid; place-items:center;
       grid-template-columns:minmax(0, 1fr);  /* else the track sizes to the longest line and overflows a phone */
       padding:2.5rem 1rem; background:var(--shell-deep); color:var(--shell-text);
       font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
       -webkit-font-smoothing:antialiased; }

.card { width:min(27rem, 100%); }

/* The wordmark, not the bare mark: a lone icon over a form reads as a
   generic template, the name reads as the product you just bought. */
.brand { display:block; text-align:center; margin:0 0 1.5rem; }
.brand img { height:40px; width:auto; }

.panel { background:var(--shell-bg); border:1px solid var(--shell-border);
         border-radius:16px; padding:2rem 1.75rem;
         box-shadow:0 12px 32px rgba(0,0,0,.28); }

h1 { font-size:1.35rem; margin:0 0 .5rem; letter-spacing:-.015em; font-weight:650;
     line-height:1.3; }
p { margin:0 0 1.5rem; color:var(--shell-muted); }
p.sub { font-size:.94rem; }
p strong, .mail { color:var(--shell-text); font-weight:600; }
p a { color:var(--accent-soft); }

label { display:block; font-size:.8rem; color:var(--shell-muted); margin:0 0 .35rem;
        font-weight:560; }
input[type=email], input[type=password], input[type=text] {
  width:100%; padding:.75rem .85rem; margin:0 0 1rem;
  border:1px solid var(--shell-border); border-radius:10px;
  background:var(--shell-deep); color:var(--shell-text); font:inherit; }
input:focus { outline:2px solid var(--accent-soft); outline-offset:1px;
              border-color:var(--accent); }
.hint { margin:-.55rem 0 1.25rem; font-size:.78rem; color:var(--shell-muted); }

/* One primary action per page, and it is always the green one. A link that
   does the page's job is a button (.btn); a link that is an alternative is
   text (.note a). */
button, a.btn { display:flex; align-items:center; justify-content:center;
  width:100%; min-height:46px; padding:.8rem 1.4rem;
  border:1px solid rgba(7,64,31,.42); border-radius:10px;
  background:var(--cta); color:var(--cta-ink); text-decoration:none;
  font:inherit; font-weight:700; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.38) inset, 0 1px 2px rgba(4,40,16,.25); }
button:hover, a.btn:hover { filter:brightness(1.05); }
button:focus-visible, a.btn:focus-visible { outline:2px solid var(--accent-soft);
                                            outline-offset:2px; }

/* The one sanctioned second button: "Continue with Google" on login.php
   (2026-10-03). Google's dark-theme variant drawn in the shell's own tokens —
   inset fill, hairline border, the full-colour G — so it reads as part of this
   card and the green Sign in stays the one loud thing on the page. The first
   revision was Google's white variant, which on this background was a glaring
   slab louder than the primary action. */
a.btn.btn-google { gap:.7rem; background:var(--shell-inset); color:var(--shell-text);
  border:1px solid #4A4D53; box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  font-weight:600; letter-spacing:.005em;
  transition:background-color .15s ease, border-color .15s ease; }
a.btn.btn-google:hover { filter:none; background:#34373C; border-color:#5C6066; }
a.btn.btn-google:active { background:#2A2C30; }
a.btn.btn-google svg { width:18px; height:18px; flex:none; }
.or { display:flex; align-items:center; gap:.75rem; margin:1.4rem 0 1.2rem;
      font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
      color:#7C7E84; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--shell-border); }

.err { margin:0 0 1.25rem; padding:.75rem .85rem; border-radius:10px;
       background:rgba(226,87,76,.12); border:1px solid rgba(226,87,76,.45);
       color:#FFB4BF; font-size:.88rem; }
.err a { color:#FFD0D7; }

.note { margin:1.25rem 0 0; font-size:.8rem; color:var(--shell-muted); text-align:center; }
.note a { color:var(--accent-soft); text-decoration:none; }
.note a:hover { text-decoration:underline; }

.foot { margin:1.5rem 0 0; font-size:.76rem; color:#6E7076; text-align:center; }

@media (max-width:640px) {
  body { padding:1.5rem .9rem; place-items:start center; }
  .panel { padding:1.5rem 1.2rem; }
  h1 { font-size:1.24rem; }
  button, a.btn { min-height:48px; }
}