/* account.css - the optional "save your dashboard" card and its modal.
   Loaded on every page; renders nothing until account.js asks for it.
   Everything here is prefixed enna- so it cannot collide with either shell. */

.enna-card{
  margin:18px 0 4px;padding:20px 18px;border-radius:20px;
  background:linear-gradient(160deg,#fffdf8,#f9f3e6);
  border:1px solid rgba(201,143,44,.28);
  box-shadow:var(--shadow);
  animation:ennRise .5s ease both;
}
.enna-card.enna-in{background:linear-gradient(160deg,#f4faf6,#eaf5ee);border-color:rgba(47,158,106,.3)}

.enna-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--gold-deep);margin-bottom:5px}
.enna-ttl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--ink);line-height:1.25}
.enna-sub{font-size:13.5px;color:var(--soft);margin-top:2px;word-break:break-word}
.enna-body{font-size:15px;line-height:1.55;color:var(--ink);margin-top:9px;text-wrap:pretty}
.enna-fine{font-size:12.5px;line-height:1.5;color:var(--soft);margin-top:10px}

.enna-row{display:flex;align-items:flex-start;gap:11px}
.enna-tick{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--growth);color:#fff;font-size:14px;font-weight:800;margin-top:1px}

.enna-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.enna-btn{
  font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.2;
  border-radius:13px;padding:13px 17px;cursor:pointer;border:1px solid transparent;
  transition:transform .12s,background .2s,color .2s;
}
.enna-btn:active{transform:scale(.975)}
.enna-primary{background:linear-gradient(135deg,#4a4339,#2f2b25);color:#fff}
.enna-ghost{background:transparent;color:var(--soft);border-color:rgba(60,48,25,.18)}
.enna-ghost:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.enna-danger{color:#a2452a;border-color:rgba(162,69,42,.28)}
.enna-danger-solid{background:linear-gradient(135deg,#b3502f,#8e3c22)}
.enna-google{background:#fff;color:var(--ink);border-color:rgba(60,48,25,.18);width:100%}

/* ---- modal ----
   Centring is done by the flex container, never by a transform on the panel
   itself: the entry animations finish on `transform:none`, which would undo
   any translate used for positioning (and reduced-motion drops them entirely). */
body.enna-locked{overflow:hidden}
#ennaModalRoot:empty{display:none}
#ennaModalRoot{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.enna-scrim{position:absolute;inset:0;background:rgba(46,40,32,.45);backdrop-filter:blur(2px);animation:ennFade .25s ease}
.enna-modal{
  position:relative;z-index:1;
  width:min(420px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;
  background:var(--card);border-radius:22px;padding:26px 22px 22px;
  box-shadow:var(--shadow-lift);animation:ennOvl .3s cubic-bezier(.3,1.2,.5,1) both;
}
@supports not (height: 100dvh){ .enna-modal{max-height:calc(100vh - 48px)} }
.enna-modal.enna-wide{width:min(500px,100%)}
.enna-h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;color:var(--ink);margin-bottom:10px;padding-right:26px}
.enna-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:none;background:transparent;color:var(--soft);font-size:15px;cursor:pointer;
}
.enna-x:hover{background:#f2ece0;color:var(--ink)}

.enna-lbl{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--soft);margin:14px 0 5px}
.enna-input{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:#fbf8f2;border:1px solid rgba(60,48,25,.16);border-radius:12px;padding:13px 14px;
}
.enna-input:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,143,44,.16)}

.enna-or{display:flex;align-items:center;gap:10px;margin:16px 0 2px;color:var(--soft);font-size:12px}
.enna-or::before,.enna-or::after{content:"";flex:1;height:1px;background:rgba(60,48,25,.12)}

.enna-alt{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:14px}
.enna-link{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--soft);background:none;border:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
.enna-link:hover{color:var(--ink)}

.enna-choice{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.enna-opt{
  display:flex;flex-direction:column;gap:3px;text-align:left;font-family:inherit;
  background:#fbf8f2;border:1px solid rgba(60,48,25,.16);border-radius:15px;padding:15px 16px;cursor:pointer;
}
.enna-opt:hover{border-color:var(--gold);background:#fff}
.enna-opt-t{font-size:15.5px;font-weight:700;color:var(--ink)}
.enna-opt-s{font-size:13.5px;color:var(--soft)}

.enna-note{margin-top:13px;font-size:13.5px;line-height:1.5;color:var(--growth);text-wrap:pretty}
.enna-note.enna-bad{color:#a2452a}
.enna-busy{margin-top:12px;font-size:13px;color:var(--soft);animation:ennSoft 1.2s ease-in-out infinite}

/* The phone shell runs a larger base size; match it so the card does not read
   as an inserted foreign object. */
[data-shell="mobile"] .enna-ttl{font-size:21px}
[data-shell="mobile"] .enna-body{font-size:16.5px}
[data-shell="mobile"] .enna-btn{font-size:16px;padding:15px 18px}
[data-shell="mobile"] .enna-acts .enna-btn{flex:1 1 100%}
/* On a phone it reads as a bottom sheet, matching the shell's own sheets. */
[data-shell="mobile"] #ennaModalRoot{align-items:flex-end;padding:0}
[data-shell="mobile"] .enna-modal{
  width:100%;max-width:none;max-height:88dvh;
  border-radius:24px 24px 0 0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  animation:ennSheetUp .32s cubic-bezier(.3,1.1,.5,1) both;
}
@keyframes ennSheetUp{from{transform:translateY(100%)}to{transform:none}}