/* Fathom login scheme — one layout for every Fathom system, each with its own
   accent, mark and background motif.
   Canonical copy: brand/login.css in the Fathom repo. Systems carry a vendored
   copy under static/fathom/ (tools/sync_brand.py) - edit here, then sync.
   No inline styles needed (all systems run a strict CSP: style-src 'self').

   <div class="fx-login fx-<system>">          system: meridian sextant lantern trawl atlas dprk
     <main class="fx-shell">
       <section class="fx-hero"> img.fx-mark  p.fx-eyebrow  h1.fx-name  p.fx-tagline </section>
       <section class="fx-card"> h2  p.fx-sub  .fx-flash  a.fx-btn.fx-primary.fx-sso
                                 details.fx-local > summary + form.fx-form </section>
     </main>
     <footer class="fx-foot"> .fx-family (all marks, .is-self)  span  span </footer>
   </div>                                                                              */

.fx-login {
  --fx-accent: #9db3c8;
  --fx-accent-ink: #0b1117;
  --fx-text: #e6edf3;
  --fx-muted: #8d9aa7;
  --fx-dim: #5f6c78;
  --fx-line: rgba(255, 255, 255, .08);
  --fx-panel: rgba(13, 19, 25, .78);
  --fx-field: rgba(4, 8, 12, .55);
  --fx-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", system-ui, sans-serif;
  --fx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #070b0f; color: var(--fx-text);
  font: 14px/1.5 var(--fx-font); color-scheme: dark;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
.fx-login *, .fx-login *::before, .fx-login *::after { box-sizing: border-box; }

/* per-system identity */
.fx-meridian { --fx-accent: #9cc6c2; --fx-accent-ink: #0f2523; }
.fx-sextant  { --fx-accent: #e85d04; --fx-accent-ink: #1f0c00; }
.fx-lantern  { --fx-accent: #f0e07a; --fx-accent-ink: #1b1a08; }
.fx-trawl    { --fx-accent: #3fb7c4; --fx-accent-ink: #061c1f; }
.fx-atlas    { --fx-accent: #b69cff; --fx-accent-ink: #160d33; }
.fx-dprk     { --fx-accent: #f0647a; --fx-accent-ink: #2a0910; }
.fx-fathom-id{ --fx-accent: #7aa7ff; --fx-accent-ink: #0a1430; }

/* background: depth gradient + accent glow + system motif */
.fx-login::before, .fx-login::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.fx-login::before {
  background:
    radial-gradient(70vmax 55vmax at 12% 8%, color-mix(in srgb, var(--fx-accent) 17%, transparent), transparent 62%),
    radial-gradient(60vmax 45vmax at 100% 100%, color-mix(in srgb, var(--fx-accent) 7%, transparent), transparent 65%),
    linear-gradient(180deg, #0b1218 0%, #070b0f 100%);
}
.fx-login::after { background: center / cover no-repeat; opacity: .17;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%); }
.fx-meridian::after { background-image: url("motifs/meridian.svg"); }
.fx-sextant::after  { background-image: url("motifs/sextant.svg"); }
.fx-lantern::after  { background-image: url("motifs/lantern.svg"); opacity: .28; }
.fx-trawl::after    { background-image: url("motifs/trawl.svg"); opacity: .13; }
.fx-atlas::after    { background-image: url("motifs/atlas.svg"); opacity: .2; }
.fx-dprk::after     { background-image: url("motifs/dprk.svg"); opacity: .2; }
.fx-fathom-id::after{ background-image: url("motifs/fathom-id.svg"); }

/* layout */
.fx-shell { flex: 1; width: min(1080px, 100%); margin: 0 auto; padding: 56px 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 72px; align-items: center; }

.fx-hero { min-width: 0; }
.fx-mark { display: block; width: 84px; height: 84px; margin: 0 0 30px; border-radius: 21px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 18%, transparent),
              0 18px 50px -10px color-mix(in srgb, var(--fx-accent) 45%, transparent); }
.fx-eyebrow { margin: 0; font: 600 11px/1 var(--fx-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fx-accent); }
.fx-name { margin: 14px 0 18px; font-size: clamp(44px, 6.4vw, 72px); font-weight: 700; line-height: .95;
  letter-spacing: -.035em; color: var(--fx-text); }
.fx-name span { color: var(--fx-accent); }
.fx-tagline { margin: 0; max-width: 430px; font-size: 16px; line-height: 1.6; color: var(--fx-muted); }
.fx-hero .fx-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-hero .fx-points li { font: 500 11px/1 var(--fx-mono); letter-spacing: .04em; color: var(--fx-muted);
  border: 1px solid var(--fx-line); border-radius: 999px; padding: 7px 11px; background: rgba(255,255,255,.02); }

/* card */
.fx-card { position: relative; overflow: hidden; padding: 34px 32px 30px; border-radius: 18px;
  background: var(--fx-panel); border: 1px solid var(--fx-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04); }
.fx-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fx-accent) 30%, var(--fx-accent) 70%, transparent); }
.fx-card h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.01em; color: var(--fx-text); }
.fx-sub { margin: 6px 0 24px; font-size: 13px; color: var(--fx-muted); }

/* buttons */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--fx-line);
  background: rgba(255,255,255,.04); color: var(--fx-text); font: 600 14px/1 var(--fx-font);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.fx-btn:hover { border-color: color-mix(in srgb, var(--fx-accent) 55%, transparent); background: rgba(255,255,255,.07); text-decoration: none; }
.fx-btn:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 3px; }
.fx-primary { background: var(--fx-accent); border-color: transparent; color: var(--fx-accent-ink);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--fx-accent) 70%, transparent); }
.fx-primary:hover { background: color-mix(in srgb, var(--fx-accent) 86%, #fff); border-color: transparent; transform: translateY(-1px); }
.fx-sso img { width: 24px; height: 24px; border-radius: 6px; }
.fx-sso-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--fx-dim); }

/* local (break-glass) form */
.fx-local { margin-top: 22px; border-top: 1px solid var(--fx-line); padding-top: 16px; }
.fx-local > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fx-muted); user-select: none; }
.fx-local > summary::-webkit-details-marker { display: none; }
.fx-local > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.fx-local[open] > summary::before { transform: rotate(45deg); }
.fx-local > summary:hover { color: var(--fx-text); }
.fx-local[open] > .fx-form { margin-top: 16px; }
.fx-local.fx-plain { margin-top: 0; padding-top: 0; border-top: 0; }
.fx-local.fx-plain > .fx-form { margin-top: 0; }

.fx-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.fx-field { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 12px; font-weight: 500; color: var(--fx-muted); }
.fx-field input { width: 100%; height: 44px; margin: 0; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1); background: var(--fx-field); color: var(--fx-text);
  font: 400 14px/1 var(--fx-font); transition: border-color .15s, box-shadow .15s; }
.fx-field input:focus { outline: none; border-color: var(--fx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 22%, transparent); }
.fx-field small { font-weight: 400; color: var(--fx-dim); }
.fx-form .fx-btn { margin-top: 6px; }
.fx-pw { position: relative; }
.fx-pw input { padding-right: 64px; }
.fx-pw button { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 7px;
  background: rgba(255,255,255,.06); color: var(--fx-muted); font: 500 11px var(--fx-font); cursor: pointer; }
.fx-caps { display: none; font-size: 11px; color: #e9b45f; }
.fx-caps.on, .fx-caps.show { display: block; }

/* messages */
.fx-flash { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  border: 1px solid rgba(236,127,127,.35); background: rgba(236,127,127,.08); color: #f3b4b4; }
.fx-flash.fx-ok { border-color: rgba(143,211,168,.35); background: rgba(143,211,168,.08); color: #b9e6c9; }
.fx-flash.fx-warn { border-color: rgba(233,180,95,.35); background: rgba(233,180,95,.08); color: #f0cf93; }
.fx-flash:empty { display: none; }

/* environment badge (Meridian deployment tier) */
.fx-env { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--fx-line); background: rgba(255,255,255,.02); font-size: 12px; color: var(--fx-muted); }
.fx-env b { flex: none; font: 600 10px/1 var(--fx-mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 7px; border-radius: 5px; background: #222b33; color: #e0e6eb; }
.fx-env.tier-prod  b { background: #3a1e20; color: #ffd9d9; }
.fx-env.tier-stage b { background: #3a3020; color: #fbe8c4; }
.fx-env.tier-dev   b { background: #1d2c3a; color: #d5e7f7; }
.fx-env p { margin: 0; }

/* footer: the Fathom family */
.fx-foot { display: flex; align-items: center; gap: 20px; padding: 18px 32px; border-top: 1px solid var(--fx-line);
  font: 500 11px/1.4 var(--fx-mono); letter-spacing: .04em; color: var(--fx-dim); }
.fx-foot > :last-child { margin-left: auto; text-align: right; }
.fx-family { display: flex; align-items: center; gap: 7px; }
.fx-family img { width: 20px; height: 20px; border-radius: 5px; opacity: .38; filter: saturate(.4); transition: opacity .15s, filter .15s; }
.fx-family img.is-self { opacity: 1; filter: none; width: 24px; height: 24px; border-radius: 6px; }
.fx-family a:hover img, .fx-family img:hover { opacity: .9; filter: none; }
.fx-foot b { color: var(--fx-muted); font-weight: 600; }

@media (max-width: 860px) {
  .fx-shell { grid-template-columns: 1fr; gap: 34px; padding: 40px 20px 32px; max-width: 480px; }
  .fx-mark { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 22px; }
  .fx-name { font-size: 46px; }
  .fx-tagline { font-size: 15px; }
  .fx-hero .fx-points { display: none; }
  .fx-card { padding: 28px 22px 24px; }
  .fx-foot { flex-wrap: wrap; justify-content: center; padding: 16px 20px; gap: 10px 16px; }
  .fx-foot > :last-child { margin-left: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .fx-login * { transition: none !important; } }