/* Sign-in view (#/signin) — the Phase 3 restyle (FRONTEND_ARCHITECTURE_PLAN.md
 * §3.4, task T15): a centered card 400 px wide on the page background.
 *
 * This file layers ON TOP of the shared shells in styles.css (.signin-wrap,
 * .card, .field, .btn, .form-error, .form-ok) and the SegmentedControl
 * component (.tabs / .tab, components/segmented-control.css); it only adds
 * or restyles what the approved design asks for — the card proportions, the
 * inline logo mark, the boxed mode control, the links row and the access
 * note.
 *
 * Colour, type, spacing, radius and motion come from tokens.css custom
 * properties only: no hex, no rgb()/rgba()/hsl()/hsla(), no named colour
 * (transparent / currentColor / inherit excepted), and no raw length that a
 * token already carries. The 400 px card width is the one design-locked
 * literal (it is not a token).
 *
 * Loading: views/signin.js appends <link rel="stylesheet" href="…signin.css">
 * to the document head at mount (idempotent), because index.html links only
 * styles.css and the component sheets until the Phase 4 shell task.
 */

/* The card: 400 px, one column, 24 px padding, 20 px rhythm. */
.signin-card {
  max-width: 400px;
  padding: var(--space-6);
  gap: var(--space-5);
  border-radius: var(--radius-md);
}

.signin-card--narrow { max-width: 400px; }

/* Logo mark — inline SVG painted by class so both themes come from tokens. */
.signin-brand {
  display: flex;
  align-items: center;
}
.signin-mark { display: block; }
.signin-mark .mark-ring {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2px;
}
.signin-mark .mark-bar { fill: var(--muted); opacity: 0.45; }
.signin-mark .mark-bar-accent { fill: var(--accent); opacity: 1; }

/* Heading (locked copy: per-tab title on the form, fixed title on the
   not-allowed screen). */
.signin-title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.signin-sub {
  margin: calc(-1 * var(--space-3)) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
  line-height: 1.55;
}

/* Mode control: the shared strip (.tabs / .tab) restyled as a boxed
   segmented control inside the card. Selection reads as a raised segment,
   not the shared underline. */
.signin-card .tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.signin-card .tab {
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.signin-card .tab:hover {
  color: var(--text);
  background: var(--panel-hover);
}
.signin-card .tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Fields: shared .field label style; slightly larger inputs for the card.
   scroll-margin-block (§3.7) keeps the focused field clear of the keyboard
   edge when views/signin.js scrolls it into the visual viewport. */
.signin-fields {
  gap: var(--space-3);
}
.signin-fields input {
  font-size: var(--fs-body);
  padding: var(--space-2) var(--space-3);
  scroll-margin-block: var(--space-5) var(--space-2);
}

/* Inline error / info lines keep one line of height so the card does not
   jump when a message appears or clears. */
.signin-error,
.signin-info {
  min-height: calc(var(--fs-label) * 1.5);
}

/* One full-width primary action. */
.signin-submit {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  scroll-margin-block: var(--space-5) var(--space-2);
}

/* Links row: 'Forgot password?' (an in-card action, so a button) and
   'Back to home' (navigation, so a real anchor) share one link style. */
.signin-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.signin-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-label);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Hover keeps --accent: --accent-2 falls to ~3.54:1 on the light card and
   12 px link text must stay ≥ 4.5:1 in both themes (--accent is 4.75:1 on
   --surface in light, 6.48:1 in dark). The thicker underline carries the
   hover state instead of a lighter colour. */
.signin-link:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}
.signin-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Access note (locked copy) and the adapter hint line under it. */
.signin-note {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-label);
  line-height: 1.55;
  color: var(--text-muted);
}
.signin-hint {
  margin: 0;
  padding-top: var(--space-1);
  font-size: var(--fs-label);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- phones (MOBILE_PLAN.md §3.7) -------------------------------------------
   Below 768 the inputs are 16 px and 44 px tall (no iOS focus zoom), the
   submit keeps its full width at the 44 px hit height, the mode control is in
   fill mode, and the not-allowed screen's actions stack full width. */

@media (max-width: 767.98px) {
  /* --fs-section is the 16 px type token: the input floor that stops iOS
     zooming the page on focus (§2.10). The desktop size above is unchanged. */
  .signin-fields input {
    font-size: var(--fs-section);
    min-height: var(--hit-min);
  }

  .signin-submit {
    min-height: var(--hit-min);
  }

  /* Fill mode: the two-cell grid above already splits the row evenly; this
     pins the 44 px cell height (P6's .tab rule applies too). */
  .signin-card .tab {
    min-height: var(--hit-min);
  }

  /* The links row is text, but 'Forgot password?' and 'Back to home' are a
     button and an anchor and take the same 44 px target as every other
     control (§4.5 hit probe measures the box, not the glyphs). */
  .signin-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit-min);
  }

  /* The not-allowed screen's actions (and the adapter Retry row) stack. */
  .signin-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .signin-actions .btn {
    width: 100%;
    min-height: var(--hit-min);
  }
}

/* Below 480 the card is full width with --space-4 padding. */
@media (max-width: 479.98px) {
  .signin-card {
    max-width: none;
    padding: var(--space-4);
    gap: var(--space-4);
  }
}