/* Palette tokens copied from site/styles.css's :root block (2026-09-27).
   Not cross-linked to the other deploy target on purpose — site/ and app/
   ship separately (docs/plans/auth-signin.md, Risks). Keep in sync by hand
   if the main site's palette changes. */
:root {
  --midnight: #0F1C2E;
  --slate: #5B6675;
  --mist: #F6F7F8;
  --white: #FFFFFF;
  --line: #D9DDE3;
  --brass: #9C7A3C;
  --status-amber: #B7791F;

  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
}
/* issue 103 UI languages: Arabic pages use IBM Plex Sans Arabic (the boot block loads it only for lang="ar"). */
:root[lang="ar"] { --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mist);
  color: var(--midnight);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.wordmark {
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  color: var(--midnight);
  display: inline-block;
  margin-block-end: 24px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-block-end: 24px;
}

.tab {
  font-family: inherit;
  font-size: 15px;
  background: none;
  border: none;
  padding: 10px 4px;
  margin-inline-end: 24px;
  color: var(--slate);
  cursor: pointer;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}

.tab.is-active {
  color: var(--midnight);
  border-block-end-color: var(--brass);
}

.panel[hidden] {
  display: none;
}

h1 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 6px;
}

.subtitle {
  color: var(--slate);
  font-size: 14px;
  margin: 0 0 24px;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-block-end: 6px;
}

input[type="email"],
input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-block-end: 16px;
  background: var(--white);
  color: var(--midnight);
}

input[type="email"]:focus,
input[type="password"]:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.button {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}

.button-primary {
  background: var(--brass);
  color: var(--white);
}

.button-primary:hover {
  background: #86692f;
}

.button-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "Forgot your password?" (Dan, 2026-10-30): under the password field, the
   same --brass accent as .consent-note a; shown on the Sign in tab only. */
.forgot-link {
  display: block;
  font-size: 14px;
  color: var(--brass);
  margin-block: -8px 16px;
}

.forgot-link[hidden] {
  display: none;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--slate);
  font-size: 13px;
  margin-block: 20px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

#google-button-container {
  display: flex;
  justify-content: center;
}

.error {
  color: var(--status-amber);
  font-size: 14px;
  margin: 0 0 16px;
}

.error[hidden] {
  display: none;
}

.google-disabled-note {
  color: var(--slate);
  font-size: 13px;
  text-align: center;
}

/* Consent line (docs/plans/google-oauth-verification-build.md, Phase 1) —
   same shape/tokens as .google-disabled-note just above: muted secondary
   text, centered, no new colour. The link reuses --brass (already this
   page's one accent colour, used on .button-primary/.tab) rather than a
   browser-default blue, since this page defines no other anchor colour to
   fall back to. */
.consent-note {
  color: var(--slate);
  font-size: 13px;
  text-align: center;
  margin: 12px 0 0;
}

.consent-note a {
  color: var(--brass);
}

/* ==========================================================================
   Language switcher (#114, design 4.0, 2026-10-24)
   Append verbatim to app/public/collecxo-ui.css, app/public/app.css and
   app/public/signin.css. Every var() has a fallback (app.css and signin.css use
   other token names). Logical properties only.

   Markup (rendered by lang-switch.js into the mount):
   <ul class="lang-switch" aria-label="Language" data-i18n-aria-label="shell.lang.label"
       data-explain="…shell.explain.langSwitch…">
     <li><span class="lang-opt" aria-current="true" lang="en" translate="no">English</span></li>
     <li><button type="button" class="lang-opt" lang="ar" dir="rtl" translate="no">العربية</button></li>
   </ul>
   - Each language is written in its own language (endonym), never translated.
   - The current language is a span with aria-current="true" (not a button).
   - The others are real buttons: Tab reaches them, Enter/Space switches.
   - Fewer than two languages: render nothing (plan 3.1).

   Placement (outside .nav / .app-nav, so it shows before /me and under 760 px):
   - .topbar pages:   <div class="topbar-inner"> wordmark · nav · [mount] · Menu button </div>
   - .app-nav pages:  <div class="app-header-inner"> wordmark · nav · [mount] </div>
   - signin.html:     <div class="lang-corner" data-lang-switch="public"></div> as the first child of <body>
   - survey/interview: the .brand line becomes a div (a <ul> cannot sit inside <p>):
       <div class="brand brand-row"><span translate="no">Collecxo</span><span data-lang-switch="public"></span></div>
   ========================================================================== */

.lang-switch { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none;
  flex: none; font-size: var(--fs-sm, 13px); line-height: 1; }
.lang-switch li { display: flex; }
.lang-opt { font: inherit; display: inline-flex; align-items: center; min-block-size: 32px;
  padding-block: 0; padding-inline: var(--s-2, 8px); border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--muted, #5B6675); cursor: pointer; white-space: nowrap; text-decoration: none; }
.lang-opt[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font, system-ui, sans-serif); font-size: 14px; }
button.lang-opt:hover { color: var(--ink, #0F1C2E); background: var(--bg, #F5F6F8); }
button.lang-opt:focus-visible { outline: 2px solid var(--accent, #9C7A3C); outline-offset: 2px; }
.lang-opt[aria-current="true"] { color: var(--ink, #0F1C2E); font-weight: 600; cursor: default;
  background: var(--bg, #F5F6F8); border-color: var(--line, #E3E6EB); }
/* Busy while the switch saves and reloads. */
.lang-switch[aria-busy="true"] .lang-opt { opacity: .6; pointer-events: none; }

/* In the bars: a little space from the nav. */
.topbar-inner > .lang-switch, .app-header-inner > .lang-switch,
.topbar-inner > [data-lang-switch], .app-header-inner > [data-lang-switch] { margin-inline-start: var(--s-3, 12px); }
/* Under 760 px the nav collapses; the switcher stays next to the Menu button. */
@media (max-width: 760px) {
  .topbar-inner > [data-lang-switch] { margin-inline-start: auto; margin-inline-end: var(--s-2, 8px); }
}

/* Sign-in page: top inline-end corner of the page, above the card. */
.lang-corner { display: flex; justify-content: flex-end; padding: var(--s-3, 12px) var(--s-4, 16px) 0; }

/* Survey / interview: the brand line becomes a row. */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3, 12px); }

/* ---- RTL fixes found for #114 (4.4) --------------------------------------
   translateX is physical; the switch thumb must go to the inline end in RTL.
   For app.css (.switch 18px, .switch.hdr 16px) and collecxo-ui.css (.switch.hdr 16px;
   .switch 18px is already in onboarding.css). */
[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-18px); }
[dir="rtl"] .switch.hdr input:checked + .track::after { transform: translateX(-16px); }
/* .acct-btn used physical padding (3px 8px 3px 3px); the avatar side must follow the direction.
   Replace the padding in collecxo-ui.css:518 with: */
.acct-btn { padding-block: 3px; padding-inline: 3px 8px; }

/* Language switcher placement glue (dev, #114 4.3; layout only, for design review).
   body centres the card in a flex row; the corner goes above the card instead of
   beside it, and spans the row so its list sits at the inline end. This file has
   no global [hidden] rule and .lang-corner sets display, so hidden is restated. */
body { flex-direction: column; }
.lang-corner { align-self: stretch; }
.lang-corner[hidden] { display: none; }