/* =============================================================================
   ShiftHawk — Favour Mode explainer (self-contained, dependency-free)
   Mounts into <div id="favour-mode-mount"></div>. All classes .fm-* prefixed.
   Uses the design tokens declared in styles.css (--primary, --pink, etc.).
   ========================================================================== */

.fm {
  --fm-track-off: var(--border-strong);
  --fm-track-on: var(--success);
  --fm-knob: #ffffff;
  --fm-pink: var(--pink);
  --fm-green: var(--success);
  display: block;
  font-family: var(--font-body);
  color: var(--text-1);
}

/* ---- intro ---- */
.fm-intro {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 1.15rem; font-weight: 600; color: var(--text-2);
  margin-bottom: var(--s-5);
}
.fm-intro .ph { color: var(--fm-pink); font-size: 1.7rem; flex: none; }
.fm-intro b { color: var(--text-1); font-weight: 800; }

/* ---- two-column shell ---- */
.fm-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 880px) {
  .fm-shell { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ============================ Toggle card (left) ============================ */
.fm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-md);
  padding: var(--s-3) var(--s-4);
  position: sticky; top: calc(var(--nav-h) + var(--s-3));
}
@media (max-width: 880px) { .fm-card { position: static; } }

.fm-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4) var(--s-1);
}
.fm-row.fm-sub {
  grid-template-columns: 28px 1fr auto;
  padding: var(--s-3) var(--s-1) var(--s-3) var(--s-5);
}
.fm-divider { height: 1px; background: var(--border); margin: 0 var(--s-1); }

.fm-row__icon {
  width: 40px; height: 40px; border-radius: var(--r-2);
  display: grid; place-items: center; font-size: 1.5rem;
}
.fm-row.fm-sub .fm-row__icon { width: 28px; height: 28px; font-size: 1.15rem; border-radius: var(--r-1); }
.fm-row__icon--pink { background: #FDF2F8; color: var(--fm-pink); }
.fm-row__icon--green { background: #ECFDF5; color: var(--fm-green); }
.fm-row__icon--sub { background: var(--surface-2); color: var(--text-3); }

.fm-row__text { min-width: 0; }
.fm-row__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-1); line-height: 1.25; }
.fm-row.fm-sub .fm-row__title { font-size: .94rem; font-weight: 600; }
.fm-row__sub { font-size: .82rem; color: var(--text-2); line-height: 1.35; margin-top: 2px; }
.fm-row__sub b { color: var(--text-1); font-weight: 700; }

/* disabled sub-row */
.fm-row.is-disabled { opacity: .55; }
.fm-row.is-disabled .fm-row__sub { color: var(--text-3); font-style: italic; }

/* ---- ELI12 detail paragraph under each row ---- */
.fm-detail {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: calc(var(--s-1) * -1) var(--s-1) var(--s-3);
  padding: 0 var(--s-1);
}
.fm-detail b { color: var(--text-1); font-weight: 700; }
/* sub-row details indent to align with their indented rows */
.fm-detail--sub {
  font-size: .82rem;
  color: var(--text-3);
  margin-left: var(--s-5);
}
.fm-detail--sub b { color: var(--text-2); }
/* dim the favour-suggestions detail when its row is disabled */
.fm-row.is-disabled + .fm-detail--sub { opacity: .55; }

/* ============================ iOS-style switch ============================ */
.fm-switch {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none;
  width: 52px; height: 31px; border-radius: var(--r-pill);
  background: var(--fm-track-off);
  border: none; cursor: pointer; padding: 0; margin: 0;
  transition: background .22s ease;
  vertical-align: middle;
}
.fm-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--fm-knob);
  box-shadow: 0 2px 4px rgba(15,23,42,.28);
  transition: transform .22s cubic-bezier(.3,.7,.4,1);
}
.fm-switch[aria-checked="true"] { background: var(--fm-track-on); }
.fm-switch[aria-checked="true"]::after { transform: translateX(21px); }
.fm-switch:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }
.fm-switch:disabled { cursor: not-allowed; }
.fm-switch:disabled::after { background: #f1f5f9; }

@media (prefers-reduced-motion: reduce) {
  .fm-switch, .fm-switch::after { transition: none; }
}

/* ============================ Diagram + explanation (right) ============================ */
.fm-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-md);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}

/* mode badges above the diagram */
.fm-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid;
  background: var(--surface-2); color: var(--text-3); border-color: var(--border);
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.fm-badge .ph { font-size: 1rem; }
.fm-badge.is-active.fm-badge--swap { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary-tint); }
.fm-badge.is-active.fm-badge--favour { background: #FDF2F8; color: #BE185D; border-color: #FBCFE8; }
.fm-badge.is-active.fm-badge--shield { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.fm-badge.is-off { opacity: .6; }

/* the SVG scene */
.fm-scene-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--r-3);
  background:
    radial-gradient(420px 220px at 30% 0%, rgba(34,211,238,.10), transparent 65%),
    var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.fm-scene { display: block; width: 100%; height: auto; }

/* element fade/scale transitions — GPU friendly (opacity + transform on groups) */
.fm-el {
  transition: opacity .35s ease, transform .35s cubic-bezier(.3,.7,.4,1);
  transform-box: fill-box;
  transform-origin: center;
}
.fm-el.is-hidden { opacity: 0; transform: scale(.85); pointer-events: none; }
.fm-flow { transition: opacity .35s ease, stroke-dashoffset .6s ease; }
.fm-flow.is-hidden { opacity: 0; }

/* dashed one-way flow gets an animated march unless reduced-motion */
.fm-flow--oneway { stroke-dasharray: 9 7; }
@keyframes fm-march { to { stroke-dashoffset: -32; } }
.fm-flow--oneway.is-on { animation: fm-march 1.1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .fm-el, .fm-flow { transition: none; }
  .fm-flow--oneway.is-on { animation: none; }
}

/* explanation sentence */
.fm-explain {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-2);
  padding: var(--s-4);
  transition: border-left-color .25s ease;
}
.fm-explain.is-warn { border-left-color: var(--warning); background: #FFFBEB; }
.fm-explain__icon { font-size: 1.5rem; flex: none; margin-top: 1px; color: var(--primary); }
.fm-explain.is-warn .fm-explain__icon { color: var(--warning); }
.fm-explain__text { font-size: 1.04rem; line-height: 1.5; color: var(--text-1); font-weight: 500; margin: 0; }
.fm-explain__text b { font-weight: 800; }

/* visually-hidden live-region helper */
.fm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }