/* The sign-in page's sheet.

   Everything a pack might want to change is a custom property, because this is
   the only page an unauthenticated reader ever sees and "install the pack, get
   somebody else's login screen" is a poor first impression.

   Two families of variable, and the split matters:

   --accent and --accent-2 are the same names style.css uses, so a pack's
   theme.css tints this page and the conversation from one declaration.

   --login-* are this page's own. They are deliberately NOT --bg, --panel and
   --text: style.css is a dark sheet and this one is light with a
   prefers-color-scheme block, so sharing those names would mean any pack that
   themed the conversation's background rendered an unreadable sign-in form.
   --login-on-accent is likewise its own name rather than style.css's
   --accent-text, which means something else there: the accent lifted until it
   is readable *as* text, not the colour that goes *on* the accent.

   Values are defaults declared here rather than var() fallbacks so that a pack
   sheet appended after this one simply wins, in both colour schemes. */
:root {
  color-scheme: light dark;
  --login-bg: #ece9e2;
  --login-panel: #f8f6f0;
  --login-line: #b9b5aa;
  --login-field: #ffffff;
  --login-field-line: #a7a397;
  --login-text: #252523;
  --login-dim: #626057;
  --login-err: #8f302c;
  --login-shadow: 0 1.25rem 3rem #2929231f;
  --login-pad: 2.5rem;
  --login-font: ui-sans-serif, system-ui, sans-serif;
  --login-heading: 600 2rem ui-serif, Georgia, serif;
  /* The accent pair is deliberately outside the prefers-color-scheme block
     below, unlike every surface. A pack sets --accent once, in the theme.css
     it already wrote for the conversation; if the built-in sheet flipped the
     colour that goes on top of it per scheme, every such pack would render
     dark text on its own accent in dark mode and never find out, because the
     author does not browse in both. Keeping the pair atomic means a pack has
     one thing to override and only if its accent is pale. */
  --accent: #293b55;
  --accent-2: #5b7799;
  /* On the button. White on #c9402f is 4.9:1, so a pack inheriting a brand red
     here still reads; a pack picking a pale accent must say so. */
  --login-on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --login-bg: #171816;
    --login-panel: #22231f;
    --login-line: #454640;
    --login-field: #151613;
    --login-field-line: #5d5f58;
    --login-text: #eeeae0;
    --login-dim: #bbb8ae;
    --login-shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--login-bg);
  color: var(--login-text);
  font-family: var(--login-font);
}

main {
  width: min(26rem, calc(100% - 2rem));
  padding: var(--login-pad);
  border: 1px solid var(--login-line);
  background: var(--login-panel);
  box-shadow: var(--login-shadow);
  /* So a plate bled to the edges stops at the border rather than over it. */
  overflow: hidden;
}

/* The heading block owns the space before the form, so the tagline can be
   absent without leaving a gap of the wrong size behind it. */
.head { margin: 0 0 1.75rem; }
.product { margin: 0 0 .5rem; color: var(--login-dim); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font: var(--login-heading); }
.tagline { margin: .5rem 0 0; color: var(--login-dim); font-size: .9rem; }

/* The pack's badge, at the size this page wants rather than the header's. A
   CSS rule rather than an attribute, so a pack's SVG need not know which page
   it landed on.

   .mark is the plate the badge sits on, and it carries no appearance here on
   purpose: it is the hook a pack paints. Card padding is a variable so that a
   pack can cancel it and bleed the plate to the card's edges, which is the
   whole reason the wrapper exists rather than a margin on the badge. */
.mark { margin: 0 0 1.25rem; }
.emblem {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
}

form, label { display: grid; gap: .55rem; }
form { gap: 1.15rem; }
label { color: var(--login-dim); font-size: .9rem; }

input {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--login-field-line);
  border-radius: 0;
  background: var(--login-field);
  color: var(--login-text);
  font: inherit;
}
input:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; }

button {
  margin-top: .35rem;
  padding: .85rem 1rem;
  border: 0;
  background: var(--accent);
  color: var(--login-on-accent);
  font: 600 .95rem inherit;
  cursor: pointer;
}

.failure {
  padding: .75rem;
  border-left: 3px solid var(--login-err);
  background: #8f302c12;
  background: color-mix(in srgb, var(--login-err) 8%, transparent);
}

/* Montesa's red, used sparingly, with the tank-badge gold as a second accent.
   The base sheet is neutral black and greys; only the accents are the marque. */
:root {
  --accent: #c9402f;
  --accent-dim: #6e2118;
  --accent-text: #e04d3a;
  --accent-2: #d9a441;
}

/* The sign-in page, in the same room as the conversation.

   web/theme.css is loaded before this and already supplies the marque: the red
   on the button and the tank-badge gold on the focus ring. What is left is the
   surface, and the surface is the whole point of a separate sheet — the
   built-in sign-in page is a light card and the conversation is black, so
   arriving at one and then the other looks like two different products.

   These are declared for both colour schemes rather than inside a
   prefers-color-scheme block, deliberately: style.css is black whatever the
   machine prefers, and a sign-in page that is cream at ten in the morning and
   then hands over to a black interface has told the reader nothing true. */
:root {
  --login-bg: #0d0d0d;
  --login-panel: #161616;
  --login-line: #2e2e2e;
  --login-field: #0d0d0d;
  --login-field-line: #2e2e2e;
  --login-text: #e8e8e8;
  --login-dim: #909090;
  /* style.css's --err, and for its reason: an error and a marque should not be
     the same colour, which on this pack they very nearly are. */
  --login-err: #e8705f;
  --login-shadow: none;

  --login-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* style.css's --display, restated because that sheet is not loaded here.
     No webfont, for the same reason: condensed where the machine has it. */
  --login-heading: 600 2.1rem "DejaVu Sans Condensed", "Liberation Sans Narrow",
                   "Roboto Condensed", "Helvetica Neue Condensed", system-ui, sans-serif;
}

/* The badge is not floating on a card here: it is on the tank.

   The Impala's flank is a two-tone: a red upper, a narrow ivory lower, a gold
   pinstripe on the join, and the round badge sitting high on the red with the
   lining running under it. That is what this band is, bled to the card's edges
   so it reads as a painted panel rather than a decoration on one.

   Every colour is taken from web/logo.svg and web/theme.css rather than picked
   to taste, so the plate and the badge sitting on it are the same red and the
   same gold. Flat fills and one hairline of sheen: a gradient pretending to be
   curved sheet metal would look like a web page trying to look like a tank. */
.mark {
  margin: calc(var(--login-pad) * -1) calc(var(--login-pad) * -1) 1.75rem;
  padding: 1.6rem var(--login-pad);
  background:
    /* Light from above, barely. */
    linear-gradient(#ffffff1a, #0000 45%),
    linear-gradient(
      #bb2724 0 68%,        /* the badge's red, which is the tank's red */
      #d9a441 68% 69.6%,    /* the lining */
      #f7f1da 69.6% 97%,    /* the ivory flank */
      #241605 97% 100%      /* where the panel meets the black */
    );
}

/* Bigger here than the built-in setting: on the tank the badge is the object,
   not a mark beside a title. */
.emblem { width: 3.9rem; height: 3.9rem; }