/* ═══════════════════════════════════════════════════════════════
   Mythos Flow — login → hub design (1:1 port of Mythos Flow.html).

   Layers on top of /_shared/design-system.css, which already defines:
     --brand-orange, --brand-orange-hover, --brand-orange-tint
     --text-primary, --text-secondary, --text-tertiary
     --bg-page, --bg-card, --bg-tinted
     --border-light, --border-medium, --border-heavy
     --accent, --shadow-card, --shadow-popover
     --success, --warning, --font-sans, --ease-out

   Choreography (success path):
     t=0     submit click       → button shows spinner
     t=800   mock auth resolves → button morphs to checkmark, success ring
     t=1100  login.exit         → card scale+fade+blur out, glyph row cascades up
     t=1300  hub.mount          → header drops in from top (-56→0)
     t=1500  hub.heading        → eyebrow + h1 + sub stagger up
     t=1700  hub.active label   → "Active" group label fades in
     t=1750  hub.active rows    → Artemis, Atlas rows cascade in
     t=2100  hub.locked label   → "În curând" group label fades in
     t=2200  hub.locked rows    → 5 locked rows cascade in (gentler)
     t=2900  done                → user can click rows
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* design-system.css carries --accent but not --accent-hover */
  --accent-hover: #006ADF;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-page);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Tabler-style glyph chips */
.fl-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--brand-orange-tint);
  color: var(--brand-orange);
  flex-shrink: 0;
  transition: transform .25s var(--ease-out),
              background .25s var(--ease-out),
              color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.fl-glyph svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fl-glyph.size-md { width: 32px; height: 32px; border-radius: 7px; }
.fl-glyph.size-md svg { width: 16px; height: 16px; }
.fl-glyph.size-lg { width: 56px; height: 56px; border-radius: 12px; }
.fl-glyph.size-lg svg { width: 28px; height: 28px; stroke-width: 1.4; }
.fl-glyph.is-locked { background: var(--bg-page); color: var(--text-tertiary); }

/* Status dot */
.fl-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--text-tertiary); }
.fl-dot.ok    { background: var(--success); }
.fl-dot.warn  { background: var(--warning); }
.fl-dot.brand { background: var(--brand-orange); }

/* Stage root */
.flow {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
}
.flow::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(232, 97, 26, .08), transparent 60%),
    radial-gradient(800px 700px at 110% 110%, rgba(0, 122, 255, .05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.flow .aurora {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 97, 26, .20) 0%, rgba(232, 97, 26, .05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.flow.phase-success .aurora,
.flow.phase-hub .aurora,
.flow.phase-launching .aurora {
  animation: flAurora 1.4s var(--ease-out) .1s forwards;
}
@keyframes flAurora {
  0%   { width: 0;     height: 0;     opacity: 0;   }
  40%  { width: 1200px; height: 1200px; opacity: 1; }
  100% { width: 1800px; height: 1800px; opacity: 0; }
}

.flow > .login,
.flow > .hub {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════ */

.login > .topbar {
  flex-shrink: 0;
  padding: 24px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 3;
}
.login > .main {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px 24px;
}
.login > .footbar {
  flex-shrink: 0;
  padding: 16px 24px 22px;
  display: flex; justify-content: center;
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.3px;
}

.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 14px/1 var(--font-sans);
  color: var(--text-primary);
  letter-spacing: -0.2px;
  animation: flRise .55s var(--ease-out) .05s both;
}
.brand-mark .logo {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--brand-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-sans);
}
.brand-mark .sep { color: var(--text-tertiary); }
.brand-mark .tag {
  font: 500 11px/1 var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.3px; text-transform: uppercase;
  padding: 4px 8px; background: var(--bg-page); border-radius: 4px;
}

.fl-status {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 11px/1 var(--font-sans);
  color: var(--text-secondary);
  animation: flRise .55s var(--ease-out) .15s both;
}
.fl-status .sep { color: var(--text-tertiary); }
.fl-status .fl-dot.ok { animation: flPulse 2.4s ease-in-out infinite; }
@keyframes flPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .40); }
  50%      { box-shadow: 0 0 0 4px rgba(52, 199, 89, .06); }
}

/* Card */
.login-card {
  width: 460px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-popover);
  overflow: hidden;
  position: relative;
  animation: flCardIn .65s var(--ease-out) .1s both;
  /* design-system.css declares `.login-card { padding: 44px 38px !important }`
     for the old login UI. That leftover inset pushes the glyph tray away
     from the card edges and leaves a visible white frame around the gray
     tray, which Vlad caught. Each slot (.login-glyphrow, .login-body,
     .login-foot) already owns its own padding, so we zero the card-level
     padding here — !important required to beat the legacy rule. */
  padding: 0 !important;
}
@keyframes flCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.login-glyphrow {
  display: flex; justify-content: center; gap: 8px;
  padding: 20px 24px;
  background: var(--bg-page);
  border-bottom: 0.5px solid var(--border-medium);
  position: relative;
}
.login-glyphrow .fl-glyph {
  opacity: 0;
  animation: flGlyphPop .55s var(--ease-out) both;
}
.login-glyphrow .fl-glyph:nth-child(1) { animation-delay: .25s; }
.login-glyphrow .fl-glyph:nth-child(2) { animation-delay: .31s; }
.login-glyphrow .fl-glyph:nth-child(3) { animation-delay: .37s; }
.login-glyphrow .fl-glyph:nth-child(4) { animation-delay: .43s; }
.login-glyphrow .fl-glyph:nth-child(5) { animation-delay: .49s; }
.login-glyphrow .fl-glyph:nth-child(6) { animation-delay: .55s; }
.login-glyphrow .fl-glyph:nth-child(7) { animation-delay: .61s; }
@keyframes flGlyphPop {
  0%   { opacity: 0; transform: translateY(8px) scale(.7); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}
/* The login chips are inert status indicators — they have no onclick,
   no href, no aria-label, no tabindex, and the user can't navigate to
   an app from the login screen anyway. Don't fake interactivity with a
   pointer cursor or hover lift here; the entrance pop above is enough. */

.login-body { padding: 28px 36px 24px; }
.login-head { margin-bottom: 22px; text-align: center; }
.login-head .eyebrow {
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--brand-orange);
  margin-bottom: 8px;
  opacity: 0;
  animation: flRise .55s var(--ease-out) .68s both;
}
.login-head h2 {
  font: 600 22px/1.2 var(--font-sans);
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin: 0;
  opacity: 0;
  animation: flRise .55s var(--ease-out) .75s both;
}
.login-head p {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--text-secondary);
  margin: 6px 0 0;
  opacity: 0;
  animation: flRise .55s var(--ease-out) .82s both;
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form > * {
  opacity: 0;
  animation: flRise .55s var(--ease-out) both;
}
.login-form > *:nth-child(1) { animation-delay: .88s; }
.login-form > *:nth-child(2) { animation-delay: .94s; }
.login-form > *:nth-child(3) { animation-delay: 1.00s; }
.login-form > *:nth-child(4) { animation-delay: 1.06s; }

.fl-field { display: flex; flex-direction: column; gap: 6px; }
.fl-field label {
  font: 500 12px/1 var(--font-sans);
  color: var(--text-secondary);
}
.fl-field .input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.fl-field .input-wrap > svg {
  position: absolute; left: 12px;
  z-index: 2;
  color: var(--text-tertiary);
  pointer-events: none;
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color .15s;
}
.fl-field input {
  width: 100%;
  height: 42px;
  /* !important matches the design-system.css input rule which is also
     !important; without it that rule wins at equal specificity and
     padding-left collapses to 11px, leaving the user/lock icon
     visually overlapping the typed text. */
  padding: 0 12px 0 36px !important;
  border: 0.5px solid var(--border-medium);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: 500 13px/1 var(--font-sans);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fl-field input:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(232, 97, 26, .12);
}
.fl-field .input-wrap:focus-within > svg { color: var(--brand-orange); }
.fl-field input::placeholder { color: var(--text-tertiary); }
.fl-field .err {
  margin-top: 2px;
  font: 500 11px/1.3 var(--font-sans);
  color: var(--error, #FF3B30);
  min-height: 0;
  opacity: 0;
  transition: opacity .12s;
}
.fl-field .err.visible { opacity: 1; }

.row-end { display: flex; justify-content: flex-end; }
.fl-link {
  font: 500 12px/1 var(--font-sans);
  color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer;
}
.fl-link:hover { color: var(--accent-hover); }

/* Submit button with morphing states */
.fl-submit {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0.5px solid var(--brand-orange);
  background: var(--brand-orange);
  color: #fff;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: -0.1px;
  cursor: pointer;
  overflow: hidden;
  transition: background .2s, border-color .2s, transform .15s;
}
.fl-submit:hover:not(:disabled) { background: var(--brand-orange-hover); }
.fl-submit:active:not(:disabled) { transform: scale(.98); }
.fl-submit:disabled { cursor: progress; }

.fl-submit .label,
.fl-submit .spin,
.fl-submit .check {
  display: inline-flex; align-items: center; gap: 8px;
  transition: opacity .25s, transform .25s;
}
.fl-submit .spin,
.fl-submit .check { position: absolute; }
.fl-submit .spin { opacity: 0; transform: scale(.7); }
.fl-submit .check { opacity: 0; transform: scale(.5); }

.fl-submit.is-submitting { background: var(--brand-orange); }
.fl-submit.is-submitting .label { opacity: 0; transform: translateY(6px); }
.fl-submit.is-submitting .spin  { opacity: 1; transform: scale(1); }

.fl-submit.is-success { background: var(--success); border-color: var(--success); }
.fl-submit.is-success .label,
.fl-submit.is-success .spin { opacity: 0; }
.fl-submit.is-success .check { opacity: 1; transform: scale(1); }

.fl-submit .spin svg { animation: flSpin .8s linear infinite; }
@keyframes flSpin { to { transform: rotate(360deg); } }

.login-foot {
  padding: 12px 24px;
  text-align: center;
  border-top: 0.5px solid var(--border-light);
  background: var(--bg-tinted);
  font: 400 11px/1.4 var(--font-sans);
  color: var(--text-secondary);
  opacity: 0;
  animation: flRise .55s var(--ease-out) 1.12s both;
}
.login-foot button { font-weight: 500; }

.flow.phase-success > .login,
.flow.phase-hub > .login {
  animation: flLoginExit .8s var(--ease-out) .2s forwards;
  pointer-events: none;
}
@keyframes flLoginExit {
  0%   { opacity: 1; transform: translateY(0)   scale(1);   filter: blur(0); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.04); filter: blur(8px); }
}
.flow.phase-launching > .login { display: none; }

@keyframes flRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ═══════════════════════════════════════════════════════════
   HUB
   ═══════════════════════════════════════════════════════════ */

.hub > .hub-header {
  flex-shrink: 0;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-card);
  border-bottom: 0.5px solid var(--border-light);
  transform: translateY(-100%);
  opacity: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0);
}
.flow.phase-hub > .hub > .hub-header,
.flow.phase-launching > .hub > .hub-header {
  animation: flHeaderDrop .8s var(--ease-out) .3s forwards;
}
@keyframes flHeaderDrop {
  0%   { transform: translateY(-100%); opacity: 0; box-shadow: 0 6px 24px rgba(0,0,0,0); }
  60%  { transform: translateY(2px);    opacity: 1; box-shadow: 0 14px 28px rgba(0,0,0,.08); }
  100% { transform: translateY(0);      opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.hub-header .userchip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--font-sans);
  color: var(--text-secondary);
}
.hub-header .userchip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-sans);
}
.hub-header .userchip .name { color: var(--text-primary); font-weight: 500; }
.hub-header .userchip .logout {
  margin-left: 12px;
  font: 500 12px/1 var(--font-sans);
  color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
}
.hub-header .userchip .logout:hover {
  background: var(--bg-page);
  color: var(--text-primary);
}
/* Apex gear → /utilizatori (PR 7 of RBAC v1). Only rendered when the
   user holds any mythos.*.read permission. */
.hub-header .userchip .userchip-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin-left: 6px;
  border-radius: 8px;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.hub-header .userchip .userchip-gear:hover {
  background: var(--bg-page);
  color: var(--brand-orange);
}
/* Profile link is just the avatar — keep it clickable without a box. */
.hub-header .userchip .userchip-profile {
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
  transition: filter .15s var(--ease-out);
}
.hub-header .userchip .userchip-profile:hover { filter: brightness(1.1); }

.hub > .hub-main {
  flex: 1;
  display: flex; justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  position: relative;
}
.hub-wrap { width: 100%; max-width: 720px; }

.hub-heading { margin-bottom: 28px; opacity: 0; }
.flow.phase-hub .hub-heading,
.flow.phase-launching .hub-heading {
  animation: flRise .55s var(--ease-out) .6s forwards;
}
.hub-heading .eyebrow {
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--brand-orange);
  margin-bottom: 10px;
}
.hub-heading h1 {
  font: 700 32px/1.1 var(--font-sans);
  color: var(--text-primary);
  letter-spacing: -1.2px;
  margin: 0 0 8px;
}
.hub-heading p {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-secondary);
  margin: 0;
}

.hub-group { margin-bottom: 28px; opacity: 0; }
.flow.phase-hub .hub-group.active,
.flow.phase-launching .hub-group.active {
  animation: flRise .55s var(--ease-out) .85s forwards;
}
.flow.phase-hub .hub-group.locked,
.flow.phase-launching .hub-group.locked {
  animation: flRise .55s var(--ease-out) 1.25s forwards;
}

.hub-group-label {
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.hub-group-label .count {
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.hub-list {
  background: var(--bg-card);
  border: 0.5px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}
.hub-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--border-light);
  text-decoration: none; color: inherit;
  cursor: pointer;
  position: relative;
  transition: background .15s, opacity .25s;
}
.hub-row:last-child { border-bottom: 0; }
.hub-row.is-entitled:hover { background: var(--bg-tinted); }
.hub-row.is-locked { cursor: not-allowed; }
.hub-row.is-locked .name,
.hub-row.is-locked .role { color: var(--text-tertiary); }
.hub-row .body { flex: 1; min-width: 0; }
.hub-row .name {
  font: 600 14px/1.2 var(--font-sans);
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.hub-row .role {
  font: 400 12px/1.3 var(--font-sans);
  color: var(--text-secondary);
  margin-top: 3px;
}
.hub-row .meta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.hub-row .arrow {
  color: var(--text-tertiary);
  display: inline-flex; margin-left: 10px;
  transition: transform .18s, color .18s;
}
.hub-row.is-entitled:hover .arrow {
  color: var(--brand-orange);
  transform: translateX(3px);
}
.hub-row .lock { color: var(--text-tertiary); display: inline-flex; margin-left: 10px; }

/* Row entrance stagger — delay driven by inline --row-i (set in hub.js) so
   the ladder always matches DOM order regardless of how many modules are
   LIVE vs COMING_SOON. */
.flow.phase-hub .hub-group.active .hub-row,
.flow.phase-launching .hub-group.active .hub-row {
  opacity: 0;
  animation: flRowIn .5s var(--ease-out) both;
  animation-delay: calc(1s + var(--row-i, 0) * 0.10s);
}

.flow.phase-hub .hub-group.locked .hub-row,
.flow.phase-launching .hub-group.locked .hub-row {
  opacity: 0;
  animation: flRowIn .5s var(--ease-out) both;
  animation-delay: calc(1.4s + var(--row-i, 0) * 0.08s);
}

@keyframes flRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* App-launching state */
.flow.phase-launching .hub-row.is-launching {
  background: var(--brand-orange-tint);
  box-shadow: 0 0 0 1px var(--brand-orange) inset;
  z-index: 2;
}
.flow.phase-launching .hub-row.is-launching .fl-glyph {
  background: var(--brand-orange);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(232, 97, 26, .35);
}
.flow.phase-launching .hub-row.is-launching .name { color: var(--brand-orange); }
.flow.phase-launching .hub-row.is-launching .arrow { color: var(--brand-orange); transform: translateX(4px); }

.hub-row .meta.launching {
  color: var(--brand-orange);
  font-weight: 600;
}
.fl-progress {
  display: inline-block;
  width: 64px; height: 3px;
  border-radius: 2px;
  background: rgba(232, 97, 26, .15);
  overflow: hidden;
  position: relative;
  margin-right: 4px;
  vertical-align: middle;
}
.fl-progress::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: var(--brand-orange);
  border-radius: 2px;
  animation: flProgress 1.1s ease-in-out infinite;
}
@keyframes flProgress {
  0%   { transform: translateX(-160%); }
  100% { transform: translateX(280%);  }
}

.flow.phase-launching.is-leaving > .hub > .hub-header {
  animation: flHeaderLeave .55s var(--ease-out) forwards;
}
.flow.phase-launching.is-leaving > .hub > .hub-main {
  animation: flHubLeave .65s var(--ease-out) forwards;
}
@keyframes flHeaderLeave {
  0%   { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
@keyframes flHubLeave {
  0%   { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.01); filter: blur(4px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
  }
}

/* ── Mobile 375px — PR-AUDIT-20 ─────────────────────────────────────── */
@media (max-width: 640px) {
  .hub-header { padding: 10px 14px; gap: 8px; }
  .hub-header .name { display: none; }
  .hub-header .userchip { gap: 6px; }
  .hub-row { padding: 10px 14px; gap: 10px; }
}