/* =========================================================
   JUICE — login + dashboard styles.
   Reuses the homepage/case tokens + chrome (nav, hero, footer)
   from /case/case.css. Everything here is namespaced .ax* so it
   can't touch the marketing or case pages.
   ========================================================= */

.ax-wrap { max-width: 1100px; margin: 4vw auto 0; padding: 0 4vw; }
.ax-wrap--narrow { max-width: 520px; }

/* ---------- shared card chrome (matches the audit window) ---------- */
.ax-card { border: 1px solid var(--color); background: #faf9f8; box-shadow: 0 18px 50px rgba(0,0,0,0.10); }
.ax-card__bar {
  display: flex; align-items: center; gap: 1vw;
  padding: 0.8vw 1.2vw; border-bottom: 1px solid var(--hairline); background: #efeee9;
}
.ax-dots { display: inline-flex; gap: 0.45vw; }
.ax-dot { width: 0.7vw; height: 0.7vw; min-width: 8px; min-height: 8px; border-radius: 50%; background: #cfccc4; border: 1px solid rgba(0,0,0,0.22); }
.ax-dot--y { background: var(--juice); }
.ax-card__title { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.1em; opacity: 0.55; }
.ax-card__state { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; }
.ax-card__body { padding: 2.6vw 2.6vw 2.2vw; }

/* ---------- login ---------- */
.ax-providers { display: flex; flex-direction: column; gap: 0.9vw; }
.ax-oauth {
  display: flex; align-items: center; justify-content: center; gap: 0.8vw;
  width: 100%; cursor: pointer; font: inherit;
  font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 500; font-size: var(--p4);
  border: 1px solid var(--color); background: #fff; color: var(--color);
  padding: 1vw 1.2vw; line-height: 1; text-transform: none;
  transition: transform 0.18s ease, background 0.18s ease;
}
.ax-oauth:hover { transform: translateY(-0.15vw); background: #fff; }
.ax-oauth:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ax-oauth__ico { width: 1.2vw; height: 1.2vw; min-width: 17px; min-height: 17px; flex: none; }

.ax-or {
  display: flex; align-items: center; gap: 1vw; margin: 1.6vw 0;
  font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.45;
}
.ax-or::before, .ax-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.ax-field { display: block; }
.ax-field > label { display: block; font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.6vw; }
.ax-input {
  width: 100%; font-family: "Inter", system-ui, sans-serif; font-size: var(--p4); font-weight: 300; line-height: 1.5;
  color: var(--color); background: #fff; border: 1px solid var(--color); padding: 0.95vw 1vw; text-transform: none;
}
.ax-input:focus { outline: 2px solid var(--juice); outline-offset: -1px; }

.ax-btn {
  width: 100%; margin-top: 0.9vw; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: var(--p4); letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--juice); border: 1px solid var(--color); color: var(--color);
  padding: 1vw 1.8vw; transition: transform 0.2s ease, opacity 0.2s ease;
}
.ax-btn:hover { transform: translateY(-0.15vw); }
.ax-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* email + password: second field spacing + the sign-in/create/forgot row */
.ax-field--pw { margin-top: 0.9vw; }
.ax-switch { display: flex; align-items: center; justify-content: space-between; gap: 1vw; flex-wrap: wrap; margin-top: 1.4vw; }

.ax-msg { margin-top: 1.2vw; font-size: var(--p4); line-height: 1.5; text-transform: none; }
.ax-msg--err { color: #a11; }
.ax-msg--ok { color: #1a6b2f; }
.ax-msg__hint { display: block; opacity: 0.6; margin-top: 0.3vw; font-size: var(--s1); }

.ax-fine { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.5; line-height: 1.6; margin-top: 1.6vw; }
.ax-fine a { border-bottom: 1px solid var(--hairline); }
.ax-fine a:hover { border-color: var(--juice); }

/* shown while the very first session check runs, so we never flash the form */
.ax-boot { padding: 4vw 2.6vw; text-align: center; font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; }

/* ---------- dashboard ---------- */
.ax-dash { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1vw; }
.ax-tile { border: 1px solid var(--color); background: #fff; padding: 1.6vw; display: flex; flex-direction: column; }
.ax-tile--id { grid-column: span 2; }
.ax-tile--roi { grid-column: span 4; background: #16151a; color: #f4f3ef; }
.ax-tile--stack { grid-column: span 3; }
.ax-tile--practice { grid-column: span 3; background: #f6f5f3; }
.ax-tile--empty { grid-column: span 4; background: #f6f5f3; align-items: flex-start; }
.ax-tile__k { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 1vw; }

/* identity tile */
.ax-id__avatar {
  width: 3.4vw; height: 3.4vw; min-width: 44px; min-height: 44px; border-radius: 50%;
  border: 1px solid var(--color); background: var(--juice); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.5vw;
}
.ax-id__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ax-id__name { font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1.3vw; line-height: 1.15; margin-top: 1vw; }
.ax-id__email { font-size: var(--p4); opacity: 0.7; text-transform: none; margin-top: 0.3vw; word-break: break-all; }
.ax-id__meta { margin-top: auto; padding-top: 1.2vw; display: flex; flex-direction: column; gap: 0.5vw; }
.ax-id__row { display: flex; justify-content: space-between; gap: 0.8vw; font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.06em; text-transform: uppercase; }
.ax-id__row span:first-child { opacity: 0.5; }
.ax-id__row span:last-child { text-align: right; }

/* roi tile */
.ax-roi__big { font-family: "Inter Tight", sans-serif; font-weight: 200; font-size: 4.2vw; line-height: 0.95; }
.ax-roi__big span { font-size: 1.4vw; opacity: 0.6; }
.ax-roi__sub { font-size: var(--p4); text-transform: none; opacity: 0.7; margin-top: 0.6vw; line-height: 1.4; }
.ax-roi__row { display: flex; gap: 2.4vw; margin-top: auto; padding-top: 1.4vw; border-top: 1px solid rgba(255,255,255,0.16); }
.ax-roi__stat b { font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: 1.8vw; display: block; line-height: 1; }
.ax-roi__stat small { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }

/* stack tile */
.ax-chips { display: flex; flex-wrap: wrap; gap: 0.5vw; }
.ax-chip { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.04em; border: 1px solid var(--color); border-radius: 3vw; padding: 0.35vw 0.85vw; background: var(--juice); }
.ax-chip--ghost { background: transparent; opacity: 0.7; }
.ax-stack__note { font-size: var(--p4); text-transform: none; opacity: 0.7; line-height: 1.45; margin-top: 1.2vw; }

/* practice tile */
.ax-practice__q { font-size: var(--p4); text-transform: none; line-height: 1.55; opacity: 0.85; }
.ax-practice__meta { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; margin-top: auto; padding-top: 1.2vw; }

/* empty state (no audit yet) */
.ax-empty__t { font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: 1.5vw; text-transform: none; line-height: 1.25; max-width: 46ch; }
.ax-empty__p { font-size: var(--p4); text-transform: none; opacity: 0.7; line-height: 1.5; margin-top: 0.7vw; max-width: 60ch; }

/* dashboard cta + actions */
.ax-cta { display: flex; align-items: center; justify-content: space-between; gap: 2vw; flex-wrap: wrap; margin-top: 1.4vw; padding: 1.8vw 2vw; border: 1px solid var(--color); background: var(--juice); }
.ax-cta p { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: 1.4vw; text-transform: none; line-height: 1.25; max-width: 48ch; }
.ax-cta p b { font-weight: 600; }
.ax-cta-btn {
  display: inline-flex; align-items: center; gap: 0.7vw; white-space: nowrap;
  background: var(--color); color: var(--bg); border: 1px solid var(--color); border-radius: 9vw;
  padding: 0.9vw 2vw; font-family: "JetBrains Mono", monospace; font-size: var(--p4); letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.2s ease;
}
.ax-cta-btn:hover { transform: translateY(-0.2vw); }

.ax-actions { display: flex; align-items: center; justify-content: space-between; gap: 1vw; margin-top: 1.6vw; }
.ax-link { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; cursor: pointer; background: none; border: 0; color: var(--color); }
.ax-link:hover { opacity: 1; border-bottom: 1px solid var(--juice); }

/* greeting above the grid */
.ax-hello { display: flex; align-items: baseline; justify-content: space-between; gap: 1vw; flex-wrap: wrap; margin-bottom: 2vw; }
.ax-hello__t { font-family: "Playfair Display", Georgia, serif; font-size: 2.4vw; font-weight: 400; line-height: 1.1; }
.ax-hello__t span { font-style: italic; }
.ax-hello__re { font-family: "JetBrains Mono", monospace; font-size: var(--s1); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }

/* ---------- mobile (portrait) ---------- */
@media (max-width: 1024px) and (orientation: portrait) {
  .ax-wrap { margin-top: 8vw; }
  .ax-card__body { padding: 6vw 6vw 6vw; }
  .ax-card__bar, .ax-card__title, .ax-card__state { font-size: 2.6vw; }
  .ax-providers { gap: 3vw; }
  .ax-oauth { padding: 3.6vw; font-size: 3.8vw; }
  .ax-or { margin: 5vw 0; font-size: 2.8vw; }
  .ax-field > label, .ax-fine, .ax-msg__hint { font-size: 2.8vw; }
  .ax-input { font-size: 3.8vw; padding: 3.2vw; }
  .ax-btn { font-size: 3.2vw; padding: 3.6vw; }
  .ax-msg { font-size: 3.6vw; }

  .ax-hello__t { font-size: 6.4vw; }
  .ax-hello__re { font-size: 2.8vw; }
  .ax-dash { grid-template-columns: 1fr; gap: 3vw; }
  .ax-tile, .ax-tile--id, .ax-tile--roi, .ax-tile--stack, .ax-tile--practice, .ax-tile--empty { grid-column: auto; padding: 5vw; }
  .ax-tile__k { font-size: 2.8vw; }
  .ax-id__avatar { font-size: 6vw; }
  .ax-id__name { font-size: 5.2vw; }
  .ax-id__email, .ax-stack__note, .ax-practice__q, .ax-empty__p, .ax-roi__sub { font-size: 3.6vw; }
  .ax-id__row, .ax-practice__meta, .ax-chip { font-size: 2.8vw; }
  .ax-roi__big { font-size: 13vw; } .ax-roi__big span { font-size: 4.5vw; }
  .ax-roi__row { gap: 6vw; } .ax-roi__stat b { font-size: 6vw; } .ax-roi__stat small { font-size: 2.8vw; }
  .ax-empty__t { font-size: 5.6vw; }
  .ax-cta { padding: 6vw; } .ax-cta p { font-size: 4.6vw; }
  .ax-cta-btn { font-size: 3vw; padding: 3.5vw 7vw; }
  .ax-actions { font-size: 3vw; }
  .ax-link { font-size: 3vw; }
  .ax-boot { font-size: 3vw; padding: 12vw 6vw; }
}