/* ==========================================================================
   Three Hearts Connect — the sign-in screens
   ==========================================================================

   Load order, and it is load-bearing:

     <link rel="stylesheet" href="css/tokens.css">
     <link rel="stylesheet" href="css/base.css">
     <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/sign-in.css">     <- this file

   WHY A THIRD FILE. base.css says at the top of itself that it is the reset,
   the page furniture and the accessibility floor, and that "components arrive
   with the screens that need them". These are those components. Putting them
   in base.css would make every future page pay for the sign-in flow; putting
   them in a <style> block would break the one rule the document head keeps,
   which is that "what colour is that?" has exactly one answer.

   EVERY VALUE HERE COMES FROM A TOKEN. There is not one hex code, not one
   invented size and not one nudged colour in this file. The already-designed
   screens at my.threeheartssupport.co.uk/sign-in/ (deploy/preview/style.css)
   were written stand-alone with their own ad-hoc values; where those and the
   application's tokens disagree, the tokens win — so the radius is
   --radius-lg rather than 16px, the gap is --space-md rather than 1.35rem,
   and the inputs inherit base.css's control rules rather than restating them.
   The result is the same screen.

   THE PANELS AND NOTICES MOVED OUT AT M5. `.panel`, `.panel--tint`, `.phone`,
   `.notice` and `.notice--problem` were written here and are now in
   components.css, because the office screens need every one of them and two
   copies of "what a panel is" would drift. They are linked from base.html, so
   the sign-in screens still get them and render exactly as they did.

   THE LOCKUP MOVED OUT AT M9, for the same reason and a worse symptom.
   `.lockup`, `.lockup-mark`, `.wordmark`, `.wordmark-name` and `.wordmark-sub`
   were written here when the sign-in screens were the only screens that had a
   masthead. Five shells included `templates/_lockup.html` by then —
   signin/screen, signed_in, office/base, day/base and family/base — and only
   the first two load this file, so on every office, doorstep and family page
   the mark had no width rule at all. (Those last three lost their mastheads in
   D-096; the error pages draw the lockup now, and 500.html loads only base.css
   and components.css.) base.css's only svg rule is in §1, the reset, in the
   `img, picture, video, canvas, svg` group; it sets `max-width` and
   `height: auto` and no width, so the heart rendered at the replaced-element
   default of 300px square and pushed the page heading off the first screen.
   They are in components.css now, which base.html links for every page.

   What is left in this file is what is genuinely only the sign-in flow's: the
   full-height screen and the six-digit box.

   Reused by templates/signed_in.html, which needs `.signin-head` — the
   masthead's top padding — and nothing else from here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. The full-height screen
   --------------------------------------------------------------------------
   A sign-in screen is one short form on a tall phone. Left alone it sits in a
   clump at the top with the phone number floating under it in the middle of
   nowhere; the design puts that number at the bottom of the viewport. That
   needs a flex column the whole way down — <body>, then <main>, then the card
   — and a spacer that eats what is left.

   Scoped to `body.signin` (set by signin/screen.html) so no other page in the
   application inherits a display mode it did not ask for.
   -------------------------------------------------------------------------- */

body.signin {
  display: flex;
  flex-direction: column;
  /* base.css already sets min-height: 100svh on body. svh, not vh: on iOS
     Safari 100vh is taller than the visible area while the address bar is
     showing, which would push the phone number off the bottom of the very
     screen it is meant to be sitting on. */
}

.signin-head {
  padding-top: var(--space-md);
}

/* The landing page's masthead row. Since D-096 moved the way around to the
   tab bar at the foot of the page, it holds the lockup alone, as
   `templates/signin/screen.html`'s does; `space-between` and `wrap` are
   harmless with one child and kept for whatever joins it. */
.signin-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
}

/* main. Also carries .container, so the width and gutters are the ordinary
   ones and this only adds the growing. */
.signin-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.signin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1 1 auto;
}

/* aria-hidden in the template: it is furniture, and a screen reader landing on
   an empty <div> announces nothing useful. */
.signin-spacer {
  flex: 1 1 auto;
}

/* A <form> is a flex ITEM of the card, so its own children need spacing of
   their own or the label, the box and the button close up against each other.

   display: contents was the shorter way to do this and is not used: several
   screen readers stop exposing a <form> that has it, which on the one page in
   this application where the form IS the page is not a trade worth making. */
.signin-card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* base.css makes buttons inline-flex with a 44px minimum. In this column they
   are the primary action and run the full width, the way the design has them. */
.signin-card button,
.signin-card .button {
  width: 100%;
}


/* --------------------------------------------------------------------------
   2. The code box
   --------------------------------------------------------------------------
   ONE input, never six (D-015). Six break pasting, announce as six unlabelled
   fields, and punish a slipped finger.
   -------------------------------------------------------------------------- */

/* THE SELECTOR IS THE SHAPE IT IS ON PURPOSE, and it is ugly on purpose.

   `.input-code` on its own is (0,1,0). The rule it has to beat is base.css
   §6's control rule, `input:not([type="checkbox"]):not([type="radio"])
   :not([type="hidden"])`, which is (0,3,1) — an element plus three attribute
   selectors, because :not() contributes the specificity of its argument. So
   the two declarations that matter here, `font-size` and `padding-inline`,
   were both losing outright: the code box rendered at --size-body (18px) with
   base.css's --space-xs padding, not at the 24px this rule has claimed since
   M3. Being later in the cascade does not help — specificity is settled
   before source order is looked at.

   This is base.css's own selector with `.input-code` added to it, which makes
   it (0,4,1): the same element, narrowed by the class, and one class ahead.
   The three negations are inert on this input — it is type="text" — and they
   are written out anyway so that the rule this one overrides is readable from
   the rule doing the overriding. If base.css §6 is ever rewritten, grep for
   `input:not(` and both copies turn up together.

   REJECTED: `input.input-code` (0,1,1), `.field .input-code` (0,2,0) and
   `.signin-card input.input-code` (0,2,1) — all three still lose, and all
   three look like they win. Also rejected: relaxing base.css §6 with
   `:where()`, which would fix this in one character and quietly drop the 18px
   floor that stops iOS zooming the page on focus for every other control in
   the application. */
input.input-code:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  font-size: var(--size-lg);            /* 24px. Six digits, read at arm's length */
  font-weight: var(--weight-bold);
  text-align: center;
  letter-spacing: 0.35em;
  /* Letter-spacing is added AFTER the last character too, so centred text
     sits half a space to the left. The indent puts it back. */
  text-indent: 0.35em;
  /* base.css uses --space-xs inline, which at this size and tracking would
     let seven characters overflow the box on a 320px screen. */
  padding-inline: var(--space-2xs);
}

/* iOS Safari paints its own chrome over a text input — an inset shadow along
   the top edge and its own corner radius — so the field renders sunken and
   grey instead of the clean bordered box base.css asks for. It is the single
   biggest difference between a form that looks designed and one that looks
   default.

   Scoped here rather than added to base.css because base.css belongs to
   whoever owns the design system; this is flagged in the M3 report as
   something that probably wants to move up. */
.signin-card input,
.signin-card button,
.signin-card .button {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   3. Wider screens — one breakpoint, not a second design (D-015)
   --------------------------------------------------------------------------
   "The form does not stretch across a monitor: it becomes a centred card on
   the same cream ground, with the lockup in a header bar." Two real people
   need this — a daughter on a laptop, and Tanya doing her admin at a proper
   keyboard rather than on a phone.

   min-width only, like every other query in this project. Everything above
   this line is the 320-390px layout.
   -------------------------------------------------------------------------- */

@media (min-width: 46em) {
  .signin-card {
    max-width: 32rem;
    width: 100%;
    margin-inline: auto;
    background-color: var(--surface-raised);
    color: var(--text-body);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    /* Stops growing: on a desktop the card is as tall as its contents and
       sits under the header, rather than being stretched down the window with
       the phone number pinned to the bottom of a 1400px screen. */
    flex: 0 0 auto;
  }

  .signin-spacer {
    display: none;
  }

  .signin-head {
    padding-top: var(--space-lg);
  }
}