/* Product D — Member Re-engagement Tool. Rensley's lane.
 *
 * Everything here builds on the shared theme's tokens: backgrounds stay
 * var(--bg) — white or black built in, or an accessible custom pair a
 * person chose — and every splash of color is
 * var(--accent) — the violet assigned to this product. A reseller who
 * changes the accent token in the shared theme recolors this whole page
 * with zero edits here.
 */

/* The violet presence: a glowing seam under the header and a charged
   summary line, so this product's owner is unmistakable at a glance. */
.page-head {
  box-shadow: 0 6px 30px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* The shared header pieces — .home-brand and .role — are styled ONCE in
   shared/theme.css. Nothing about them belongs in this file. */

.status {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  border-left-width: 6px;
  padding: 8px 0 8px 14px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}

#rule {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 70ch;
}

/* Flagged member cards — violet edge, violet glow on hover. */
.member-card {
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.member-card:hover {
  box-shadow: 0 4px 28px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
}

.member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.member-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.quiet-pill {
  /* A fill carrying words: the readable companion, not the identity hex —
     white on the brand violet is 4.23:1, under the 4.5:1 a person needs. */
  background: var(--accent-strong, var(--accent));
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: quiet-pulse 2.4s ease-in-out infinite;
}

@keyframes quiet-pulse {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
  50%      { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .quiet-pill { animation: none; }
  .member-card { transition: none; }
}

.evidence {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 10px 0;
}

/* The draft reads like a note, not a form — staff copy it, they never
   send from here. */
.draft {
  font: inherit;
  white-space: pre-wrap;
  /* THE DRAFT ENDS IN THREE STUDIO URLS, and a URL has nothing a browser
     will break on. pre-wrap wraps at spaces; with none inside a link, the
     longest one sets the width of the block and the whole page scrolls
     sideways — measured on a 375px phone, this box wanted 487px inside a
     278px card. A staff member checking the Monday list at the front desk
     is exactly who reads this on a phone. */
  overflow-wrap: anywhere;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  /* No tinted surface here: the background is whatever var(--bg) resolves
     to — white, black, or the accessible pair a person chose — never a
     colour this file invents. The dashed accent border marks ownership. */
  background: var(--bg);
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-outline {
  background: transparent;
  /* The label is read, so it takes the companion; the border is a UI
     boundary at 3:1, so it keeps the identity colour. */
  color: var(--accent-strong, var(--accent));
  border: 2px solid var(--accent);
  text-decoration: none;
  display: inline-block;
}

/* The CSV door — the real-data entrance. The native input hides behind a
   labeled button; the promise line under it is part of the product. */
.import { margin: 14px 0 4px; }
.import input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.import .btn { cursor: pointer; }

/* THE FOCUS RING HAS TO LAND SOMEWHERE A PERSON CAN SEE. The native file
   input above is clipped to a 1px box so the labeled button can stand in
   for it — which meant a keyboard user tabbing into the CSV door had the
   ring drawn on something invisible and no way to tell they were there.
   The ring is drawn on the label instead, which is the control they
   actually see. */
.import:has(input[type="file"]:focus-visible) .btn-outline {
  outline: 3px solid var(--fg);
  outline-offset: 2px;
}

/* Focused by script after an action rebuilds the list, never in the tab
   order — so nobody has to tab through a card to reach its buttons. */
.member-card:focus-visible,
#flagged:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  font: inherit;
  cursor: pointer;
  margin-left: 8px;
}

/* Booking-without-attending: engagement worth seeing at full strength,
   unlike the muted metadata around it. */
.evidence.activity { color: var(--fg); }

/* The discipline line: which policy rule spoke, when a draft is withheld.
   Muted on purpose — it is a state, not an alarm. */
.workflow-state {
  color: var(--muted);
  font-size: 0.92rem;
  border-left: 3px solid var(--line);
  padding-left: 10px;
  margin: 10px 0 4px;
}
/* The closed-loop strip sits above the cards; extra bottom room so the
   outcome line never crowds the first flagged member. */
#outcomes { margin-bottom: 18px; }
#outcomes .outcomes-line { margin-bottom: 6px; }

.footer-note {
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.footer-note a { color: var(--accent-strong, var(--accent)); }

@media (max-width: 560px) {
  .member-head { flex-direction: column; align-items: flex-start; }
}

/* The note to a member who landed on a staff page. Bordered like .status
   so it reads as the page speaking, not as a flagged member. */
.actor-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}


/* ---- optional at-home routines -------------------------------------- */
/* Secondary to the evidence on purpose: collapsed, quieter than the draft,
   and never competing with why this member was flagged. Colour comes from
   the shared tokens only — this product restyles nothing the theme owns. */
.routines {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.routines > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 2px 0;
}
.routines > summary:focus-visible,
.routines .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.routine {
  border-top: 1px solid var(--line);
  padding: 10px 0 4px;
}
.routine-title {
  margin: 0 0 4px;
  font-weight: 600;
}
.btn.quiet {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}

/* A tablet tier. D had one breakpoint at 560px, so everything between a
   phone and a desk laptop was untested — including the front desk's own
   screen, which is the place this tool is actually used. */
@media (max-width: 900px) {
  .routines { padding: 10px 12px; }
  .routine .btn { width: 100%; }
}

/* ---- the public routine page ---------------------------------------- */
.safety {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
}
.safety h2 { font-size: 1rem; margin: 0 0 6px; }
.safety ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.safety li { margin: 6px 0; }
.steps { padding-left: 20px; }
.steps > li { margin: 14px 0; }