/* Miracle Ritual coaching back office.
   Dense and quiet — this is a working tool, not a marketing page.
   Purple accent matches kPremiumPurple in the app.

   Light throughout, matching the app itself. Every colour below is a
   variable so the ground can be swapped in one place; the status colours
   further down are the darker, text-on-light variants of the same hues,
   since the pale ones a dark ground needs are unreadable here. */

:root {
  /* The app's own brand purple (kPremiumPurple, #4F35D2) rather than a
     near-miss of it — this page sits beside the app in the same head. */
  --purple: #4F35D2;
  --purple-bright: #7C3AED;
  --purple-wash: #F1EDFE;
  --bg: #EEF0F5;
  --panel: #FFFFFF;
  --panel-2: #F4F6FA;
  /* Deliberately visible. The first light pass reused the dark theme's
     near-invisible hairlines, which is what made everything read as one
     undifferentiated grey field. */
  --border: #D5DAE3;
  --ink: #0F172A;
  --sub: #475569;
  --faint: #64748B;
  --green: #15803D;
  --amber: #B45309;
  --red: #DC2626;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Any author rule setting `display` outruns the browser's [hidden] rule on
   specificity — which is how "Load more" stayed on screen permanently. Make
   the attribute win everywhere so hiding an element actually hides it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -0.3px; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 22px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; }

.sub { color: var(--sub); margin: 6px 0 0; font-size: 14px; }
.hint { color: var(--faint); font-size: 13px; margin: 8px 0 0; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

.screen[hidden] { display: none; }
.centered { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }
.wrap.narrow { max-width: 720px; }
.tail { height: 40px; }

/* ── Cards & forms ─────────────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  /* White on near-white needs a little lift to read as a surface. */
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.login-card { width: min(380px, 100%); display: grid; gap: 12px; text-align: center; }
.login-card h1 { margin-top: 4px; }
.login-card .sub { margin-bottom: 8px; }

.mark { font-size: 38px; line-height: 1; }
.mark.sm { font-size: 18px; }

input, textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ink);
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
}
/* Card text is prose the client will read — keep it in the reading font.
   Monospace is only for the raw-JSON box. */
textarea { resize: vertical; line-height: 1.45; }
#json-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
input:focus, textarea:focus { outline: none; border-color: var(--purple); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="color"] { padding: 4px; height: 42px; cursor: pointer; }

label { display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
label input { margin-top: 5px; }

button { font: inherit; cursor: pointer; border-radius: 10px; }
button:disabled { opacity: 0.5; cursor: default; }

.primary {
  background: linear-gradient(90deg, var(--purple-bright), var(--purple));
  border: none; color: #fff; font-weight: 700;
  padding: 12px 18px;
}
.primary.sm { padding: 9px 18px; font-size: 14px; }

.ghost {
  background: var(--panel); color: var(--ink); font-weight: 600;
  border: 1px solid var(--border); padding: 8px 14px; font-size: 13.5px;
}
.ghost:hover { border-color: var(--purple); color: var(--purple); }
.ghost.danger { color: var(--red); border-color: rgba(239,68,68,0.35); }
.ghost.more { display: block; margin: 20px auto 0; }

.error { color: var(--red); font-size: 13px; margin: 10px 0 0; line-height: 1.55; text-align: left; }
.error code { color: var(--ink); user-select: all; word-break: break-all; }
.ok { color: var(--green); font-size: 13px; margin: 10px 0 0; }
.warn { color: var(--amber); font-size: 13px; margin: 10px 0 0; }
.empty { color: var(--faint); text-align: center; padding: 40px 0; }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky; top: 0; z-index: 5;
  /* A thin brand edge along the top — the one place a working tool can
     wear its colour without getting in the way of the work. */
  box-shadow: inset 0 3px 0 var(--purple), 0 1px 3px rgba(15, 23, 42, 0.06);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; color: var(--ink);
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.who { color: var(--faint); font-size: 13px; }

/* ── Toolbar ───────────────────────────────────────────────────────────── */

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.toolbar input { flex: 1 1 260px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--sub); padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  border-radius: 20px;
}
.chip.is-on { background: var(--purple-wash); border-color: var(--purple); color: var(--purple); }
.counts { color: var(--sub); font-size: 13px; margin: 0; }
.counts-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 16px 0 10px;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--sub); font-weight: 700; padding: 13px 14px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
}
td { padding: 14px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--purple-wash); }

.name { font-weight: 650; color: var(--ink); font-size: 14.5px; }
.email { color: var(--faint); font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--sub); }
.muted { color: var(--faint); }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
}
.tag.deck  { background: var(--purple-wash); color: var(--purple); }
.tag.none  { background: transparent; color: var(--faint); border: 1px dashed var(--border); }
.tag.pro   { background: #E7F6ED; color: #15803D; }
.tag.trial { background: #FEF3C7; color: #B45309; }
.tag.free  { background: transparent; color: var(--faint); }
.tag.stale { background: #FEECEC; color: #DC2626; }
.tag.ok    { background: #E7F6ED; color: #15803D; }

.go { color: var(--faint); text-align: right; }

/* Selection column — narrow, and the checkbox is the only thing in a row
   that doesn't open the editor. */
.tick { width: 34px; padding-right: 0; }
.tick input { width: 17px; height: 17px; accent-color: var(--purple); cursor: pointer; }

/* Only on screen once something is ticked. */
.selectbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px;
  font-size: 13.5px; font-weight: 600; color: var(--sub);
}
.selectbar > div { display: flex; gap: 8px; }

/* ── Editor ────────────────────────────────────────────────────────────── */

.client-head { margin-bottom: 18px; }

/* A control that reads as a link rather than a button — it sits inside a line
   of metadata, so button chrome would shout over the content. */
.linkish {
  background: none; border: none; padding: 4px 0 0;
  color: var(--purple); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--ink); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.deck-meta { display: grid; gap: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.cards-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 26px 0 0; flex-wrap: wrap;
}
.cards-head > div { display: flex; gap: 8px; }

.card-row {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-top: 12px;
  display: grid; gap: 10px;
}
.card-row-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.remove {
  background: transparent; border: none; color: var(--faint);
  font-size: 17px; line-height: 1; padding: 0 4px;
}
.remove:hover { color: var(--red); }

.card-image { display: flex; align-items: center; gap: 10px; }
.card-image-frame {
  position: relative; width: 52px; height: 50px; flex: none;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.card-image-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-image-empty {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 2px;
  color: var(--faint); font-size: 9px; line-height: 1.2;
}
.card-image-btn { cursor: pointer; display: inline-flex; align-items: center; }
.card-image-status { color: var(--faint); font-size: 12px; }
.card-image-status.is-error { color: var(--red); }

/* ── Dialog ────────────────────────────────────────────────────────────── */

dialog {
  border: none; background: transparent; padding: 0;
  max-width: min(620px, 92vw); width: 100%;
}
dialog::backdrop { background: rgba(17,24,39,0.42); }
dialog .card { display: grid; gap: 12px; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; padding: 0; }

/* ── Live coaching ─────────────────────────────────────────────────────── */

.live-session-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.live-session-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Full-width third line of the row, under the summary and the buttons —
   the meeting link is usually pasted in long after the session was made,
   so it gets its own editable field on every session rather than living
   only in the create form. */
.live-session-link {
  flex-basis: 100%; display: flex; gap: 8px; align-items: center;
}
.live-session-link input { flex: 1; min-width: 0; }

/* Attendee list — the one place the whole guest list for a call is legible,
   since firestore.rules only ever lets a person read their own booking. */
.attendees {
  flex-basis: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.attendees-head {
  color: var(--sub); font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.attendee-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.attendee-row:last-child { border-bottom: none; }
.attendee-who { min-width: 0; }
.attendee-who .name { font-weight: 650; color: var(--ink); font-size: 14.5px; }
.attendee-who .email {
  color: var(--sub); font-size: 13px; word-break: break-all;
}
.faint { color: var(--faint); font-weight: 400; }

/* Per-card length readout. Quiet until a card runs long enough to crowd
   its own illustration on the reading screen, then amber. */
.card-len {
  margin: 6px 2px 0; font-size: 12px; color: var(--faint); line-height: 1.45;
}
.card-len.over { color: var(--amber); }

/* The email draft, shown in the page rather than fired at the OS. A
   mailto: navigation fails silently when there's no mail client or the
   browser has dropped the click's user activation — this can't. */
.mail-panel {
  flex-basis: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.mail-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 10px 0;
}
.mail-actions a.primary {
  text-decoration: none; display: inline-block; border-radius: 10px;
}
.mail-panel textarea {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.primary.sm { padding: 8px 14px; font-size: 13.5px; }
.ghost.sm { padding: 6px 12px; font-size: 12.5px; flex-shrink: 0; }

@media (max-width: 620px) {
  .row2 { grid-template-columns: 1fr; }
  .wrap { padding: 16px 14px 60px; }
  .live-session-row { flex-direction: column; align-items: flex-start; }
  /* The row turns into a column here, and `flex-basis: 100%` means nothing
     along a column's main axis — without this the link field shrink-wraps
     to a stub showing about a third of a Zoom URL. */
  .live-session-link { width: 100%; }
}