/* The front door.
   ==========================================================================
   ITS OWN STYLESHEET BECAUSE IT IS THE ONE STAFF PAGE WITH NO SIDEBAR. Every
   other screen extends base.html and inherits the chrome; this one cannot,
   because the chrome is a navigation bar full of links that all bounce back
   here. So it carries the brand itself: the serape, the wordmark, and
   nothing else.

   Sized for one field. A sign-in page that fills a monitor makes somebody
   hunt for the only thing on it. */

.signin-body {
  margin: 0;
  min-height: 100vh;
  background: var(--parchment);
  color: var(--cocoa);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;

  /* UNDOING app.css's OWN body RULE, and it has to be said explicitly.
     That file sets `body { display: flex }` because every other page is a
     sidebar beside a column of content. This page has no sidebar, so
     inheriting the flex container turned <main> into a flex item that
     shrank to its content: the sheet came out 50px wide and the page
     scrolled sideways. A layout that is only correct because of a class
     this page does not carry is one worth overriding out loud. */
  display: block;
}

.signin {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Take the stripe off, so the sheet is centred in what is left rather
     than pushed a serape's worth below centre. Read from the token app.css
     declares rather than repeating the number here. */
  min-height: calc(100vh - var(--serape-h));
  padding: 40px 20px 72px;
}

.signin-sheet {
  width: 100%;
  max-width: 430px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: 40px 38px 34px;
}

/* ── the mark ─────────────────────────────────────────────────────────── */

/* Sized here AND on the tag. The attributes reserve the box before the
   image arrives, so the sheet does not jump; this is what actually draws
   it. --r-card rather than a bare radius, because the logo is a printed
   poster with its own square corners and the sheet it sits on is rounded. */
.signin-logo {
  display: block;
  width: 60px;
  height: 84px;
  margin: 0 0 16px;
  border-radius: var(--r-card);
}

.signin-mark {
  margin: 0 0 2px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--charcoal);
}
.signin-mark em { font-style: italic; color: var(--terracotta-deep); }

.signin-kind {
  margin: 0 0 30px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cocoa-soft-ink);
}

/* ── what it is asking ────────────────────────────────────────────────── */

.signin-head {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--charcoal);
}

.signin-say {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cocoa);
}

/* ── the field ────────────────────────────────────────────────────────── */

.signin-form { margin: 0 0 20px; }

.signin-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cocoa-soft-ink);
}

.signin-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background: var(--cream);
  color: var(--cocoa);
  font-family: var(--body);
  font-size: 16px;   /* 16px or iOS zooms the page on focus */
  line-height: 1.4;
}
.signin-input:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
  background: var(--white);
}
.signin-input::placeholder { color: var(--cocoa-soft); }

.signin-go {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--terracotta);
  border-radius: var(--r-card);
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
}
.signin-go:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
}
.signin-go:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 2px;
}

/* ── the small print, and the refusals ────────────────────────────────── */

.signin-fine {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cocoa-soft-ink);
}
.signin-fine a { color: var(--terracotta-deep); }

/* Only one refusal ever explains itself - see auth.why_refused() - so this
   has room for a sentence rather than three words. */
.signin-trouble {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--attention);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--attention-tint);
  color: var(--attention-ink);
  font-size: 14px;
  line-height: 1.55;
}

/* ── no accounts yet ──────────────────────────────────────────────────── */
/* The state where the guard stands down and the board is open to anybody
   who knows the address. It gets the alert colour deliberately: this is not
   a neutral empty state, it is the one configuration nobody should leave a
   deployed board sitting in. */

.signin-how { margin-bottom: 8px; }

.signin-cmd {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background: var(--cream);
  overflow-x: auto;
}
.signin-cmd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--cocoa);
  white-space: nowrap;
}

@media (max-width: 460px) {
  .signin-sheet { padding: 30px 24px 26px; }
  .signin-head { font-size: 24px; }
}


/* ── the development link ───────────────────────────────────────────────
   Shown only where config.is_dev() is true. Coloured like a warning rather
   than like a feature: if this box ever appears on a deployed board, it
   should be the first thing anybody notices, not something that blends in. */

.signin-dev-label {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--attention-ink);
}

.signin-dev {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px dashed var(--attention);
  border-radius: var(--r-card);
  background: var(--attention-tint);
  /* A token is long and has no spaces; it has to wrap or it widens the
     sheet and pushes the page sideways. */
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
}
.signin-dev a { color: var(--attention-ink); }