/* checkin.css - reminders, the check-in sheet, the journal, the scratch pad.
   Everything is prefixed ennx- so it cannot collide with either shell or with
   account.css, whose .enna-* chrome this deliberately reuses rather than
   reinventing. Tokens come from base.css. */

/* ---- sheet host: mirrors #ennaModalRoot so both behave identically ----
   Centring is the flex container's job, never a transform on the panel: the
   entry animations finish on `transform:none`, and reduced-motion drops them
   entirely. */
#ennxRoot:empty{display:none}
#ennxRoot{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
[data-shell="mobile"] #ennxRoot{align-items:flex-end;padding:0}

#ennxToast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  z-index:950;max-width:min(420px,calc(100vw - 32px));
  background:#2f2b25;color:#fff;font-size:14.5px;line-height:1.45;
  padding:12px 18px;border-radius:14px;box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
}
#ennxToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- the on/off switch ---- */
.ennx-toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 15px;margin-top:14px;
  border:1px solid rgba(60,48,25,.16);border-radius:15px;background:#fbf8f2;
}
.ennx-toggle-lbl{font-size:15.5px;font-weight:700;color:var(--ink)}
.ennx-toggle{
  flex:none;position:relative;width:52px;height:30px;border-radius:99px;
  border:1px solid rgba(60,48,25,.2);background:#e8e0d2;cursor:pointer;padding:0;
  transition:background .22s ease,border-color .22s ease;
}
.ennx-toggle .ennx-knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(60,48,25,.35);
  transition:transform .22s cubic-bezier(.3,1.3,.5,1);
}
.ennx-toggle.on{background:var(--gold);border-color:var(--gold-deep)}
.ennx-toggle.on .ennx-knob{transform:translateX(22px)}
.ennx-toggle:active .ennx-knob{width:26px}

/* everything below the switch arrives only once it is on */
.ennx-reveal{animation:ennRise .5s ease both}

/* ---- frequency presets: nothing selected until chosen ---- */
.ennx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ennx-chip{
  font-family:inherit;font-size:14px;font-weight:600;color:var(--soft);
  background:#fbf8f2;border:1px solid rgba(60,48,25,.16);border-radius:99px;
  padding:11px 16px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.ennx-chip:hover{background:#fff;color:var(--ink)}
.ennx-chip.on{border-color:var(--gold);background:#fff;color:var(--ink);font-weight:700}
.ennx-chip:active{transform:scale(.97)}

.ennx-confirm{margin-top:14px;padding-top:14px;border-top:1px solid rgba(60,48,25,.12)}

/* ---- check-in ---- */
.ennx-step{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--soft);margin-bottom:6px;
}
.ennx-ends{
  display:flex;justify-content:space-between;
  font-size:11.5px;font-weight:700;color:var(--soft);margin-top:-2px;
}
.ennx-lvl-rest{
  margin-top:16px;padding:16px;border-radius:14px;background:#fbf8f2;
  font-size:14px;color:var(--soft);font-style:italic;text-align:center;
}
.ennx-lvl{
  margin-top:16px;padding:16px;border-radius:14px;background:#fbf8f2;
  animation:ennFade .3s ease both;
}
.ennx-lvl-n{display:block;font-size:11px;letter-spacing:.09em;font-weight:800;text-transform:uppercase}
.ennx-lvl-name{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--ink);margin-top:3px}
.ennx-lvl-line{display:block;font-size:14.5px;line-height:1.5;color:var(--ink);margin-top:6px;text-wrap:pretty}

.ennx-text{width:100%;resize:vertical;line-height:1.55;font-family:inherit;margin-top:4px}
.ennx-saved{font-size:17px;font-weight:700;color:var(--growth)}

/* ---- journal ---- */
.ennx-jtop{margin-top:0}
.ennx-empty{color:var(--soft);text-wrap:pretty}
.ennx-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.ennx-entry{
  padding:15px 16px;border-radius:16px;background:#fbf8f2;
  border:1px solid rgba(60,48,25,.1);
}
.ennx-entry.checkin{background:linear-gradient(160deg,#fffdf8,#f9f3e6);border-color:rgba(201,143,44,.22)}
.ennx-e-date{font-size:11.5px;letter-spacing:.06em;font-weight:800;text-transform:uppercase;color:var(--soft)}
.ennx-e-lvl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);margin-top:4px}
.ennx-e-q{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--soft);margin-top:11px}
.ennx-e-a{font-size:15px;line-height:1.55;color:var(--ink);margin-top:3px;white-space:pre-wrap;text-wrap:pretty}
.ennx-e-acts{display:flex;gap:14px;margin-top:11px}

/* ---- scratch pad, on the dashboard ---- */
.ennx-scratch{background:linear-gradient(160deg,#fdfcf8,#f6f2ea);border-color:rgba(60,48,25,.12)}
.ennx-scratch-eyebrow{color:var(--soft)}
.ennx-scratch-text{
  width:100%;resize:vertical;min-height:96px;line-height:1.55;
  font-family:inherit;background:var(--paper);margin-top:8px;
}
.ennx-scratch-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.ennx-scratch-foot .enna-fine{margin-top:0}

/* ---- phone sizing, matching the shell's larger base ---- */
[data-shell="mobile"] .ennx-toggle-lbl{font-size:17px}
[data-shell="mobile"] .ennx-chip{font-size:15.5px;padding:13px 18px}
[data-shell="mobile"] .ennx-lvl-line,
[data-shell="mobile"] .ennx-e-a{font-size:16.5px}
[data-shell="mobile"] .ennx-text{font-size:16px}

/* ---- the invitation to install ---- */
.ennx-inst-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:14px 0 2px;padding:12px 14px;border-radius:15px;
  background:#fbf8f2;border:1px solid rgba(60,48,25,.14);
  animation:ennRise .5s ease both;
}
.ennx-inst-lead{
  display:flex;align-items:center;gap:9px;
  font-size:14px;line-height:1.45;color:var(--soft);text-wrap:pretty;
}
.ennx-inst-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ennx-inst-go{padding:9px 14px;font-size:13.5px}

.ennx-inst-card{background:linear-gradient(160deg,#fdfcf8,#f4f0e6);border-color:rgba(60,48,25,.14)}

.ennx-steps{margin:12px 0 0;padding-left:22px;font-size:15px;line-height:1.65;color:var(--ink)}
.ennx-steps li{margin-bottom:8px;text-wrap:pretty}
.ennx-steps li::marker{color:var(--gold-deep);font-weight:800}

[data-shell="mobile"] .ennx-inst-lead{font-size:15.5px}
[data-shell="mobile"] .ennx-inst-strip{flex-direction:column;align-items:stretch;gap:10px}
[data-shell="mobile"] .ennx-inst-acts{justify-content:space-between}
[data-shell="mobile"] .ennx-inst-go{flex:1;padding:13px 16px;font-size:15px}
[data-shell="mobile"] .ennx-steps{font-size:16.5px}

/* ---- the iOS guide ----
   iOS gives no install API, so the next best thing is showing people the two
   controls they are hunting for, drawn to look like the real ones. */
.ennx-ios{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.ennx-ios-row{display:flex;gap:12px;align-items:flex-start}
.ennx-ios-n{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;margin-top:1px;
  background:var(--gold-wash);color:var(--gold-deep);
  font-size:13px;font-weight:800;
}
.ennx-ios-t{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35}
.ennx-ios-s{font-size:14px;color:var(--soft);line-height:1.45;margin-top:2px;text-wrap:pretty}

/* the share control, as it appears in Safari's toolbar */
.ennx-ios-chip{
  display:inline-flex;align-items:center;gap:8px;margin-top:9px;
  padding:9px 15px;border-radius:12px;
  background:#fff;border:1px solid rgba(60,48,25,.16);
  color:#0a84ff;                       /* Safari's own tint, so it is recognisable */
  font-size:13.5px;font-weight:700;
}
.ennx-ios-chip span{color:var(--soft)}

/* the row inside the share sheet */
.ennx-ios-sheetrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;
  padding:13px 15px;border-radius:12px;
  background:#fff;border:1px solid rgba(60,48,25,.16);
  font-size:15px;font-weight:600;color:var(--ink);
}
.ennx-ios-sheetrow svg{color:var(--soft);flex:none}

/* points at the real toolbar, which on an iPhone is below the sheet */
.ennx-ios-point{
  text-align:center;font-size:20px;color:var(--gold);margin-top:14px;
  animation:ennPointDown 1.8s ease-in-out infinite;
}
@keyframes ennPointDown{0%,100%{transform:translateY(0);opacity:.55}55%{transform:translateY(7px);opacity:1}}

/* ---- dashboard cards added in the reshuffle ---- */
.ennx-cong{background:linear-gradient(160deg,#fffdf6,#f7f0dd);border-color:rgba(201,143,44,.3)}
.ennx-cong-list{margin:12px 0 0;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.ennx-cong-list li{margin-bottom:7px;text-wrap:pretty}
.ennx-cong-list li::marker{color:var(--gold-deep)}

.ennx-remcard{background:linear-gradient(160deg,#fdfbf6,#f5f1e6);border-color:rgba(60,48,25,.14)}
.ennx-test{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ennx-test-state{font-size:13px;color:var(--soft)}

.ennx-jcard{background:linear-gradient(160deg,#fdfcf8,#f4f2ec);border-color:rgba(60,48,25,.12)}
.ennx-jcard-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ennx-jcard-row{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.ennx-jcard-date{flex:none;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);font-size:11px}
.ennx-jcard-line{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

[data-shell="mobile"] .ennx-cong-list{font-size:16px}
[data-shell="mobile"] .ennx-jcard-row{font-size:15px}