/* ============================================================================
   Feature views — Content Calendars, Guides & Resources, PIF Store, Referral
   Map. All selectors are namespaced (.feature-*, and later .cal-*, .guide-*,
   .embed-*) so they can never collide with the frozen pipeline styles in
   app.css. Reuse --pif-* tokens and .pif-* utility classes only.
   ============================================================================ */

/* Primary section nav — a segmented pill control in the navy header, one level
   ABOVE the pipeline's underline bucket tabs. The different shape (filled pills
   vs. underline tabs) is what keeps the two navigation levels from blending. */
.section-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--pif-4);
  margin-bottom: var(--pif-4);
  padding: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.section-btn {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--pif-font-display); font-size: 13px; font-weight: 600;
  color: #c3c9dc; background: transparent;
  padding: 7px 16px; border-radius: 999px;
  white-space: nowrap;
}
.section-btn:hover { color: #fff; }
.section-btn.is-active { background: #fff; color: var(--pif-navy); }

/* Nav row: section pills on the left, the Get started CTA pushed far right. */
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pif-3); flex-wrap: wrap; }

/* "Get started" gold CTA — the one prominent gold button (navy on gold). */
.gs-btn { padding: 8px 16px; }
.gs-btn.is-active { box-shadow: inset 0 0 0 2px var(--pif-navy); }
.gs-count {
  margin-left: 6px; font-family: var(--pif-font-body); font-size: 11px; font-weight: 600;
  background: var(--pif-navy); color: #fff; border-radius: 999px; padding: 1px 7px;
}

/* Every feature view renders inside this padded region. The 3px gold top rule
   is the shared "orders rule" signature carried into the new tabs. */
.feature-view {
  margin-top: var(--pif-4);
  padding: var(--pif-6) var(--pif-5);
  background: var(--pif-paper);
  border: 1px solid var(--pif-rule);
  border-top: 3px solid var(--pif-gold);
  border-radius: var(--pif-r-card);
}

.feature-view .pif-eyebrow { margin-bottom: var(--pif-4); }

.feature-empty { margin: 0; }

/* ---- embed views (PIF Store, Referral Map) ------------------------------- */

.embed-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pif-3); flex-wrap: wrap;
  margin-bottom: var(--pif-4);
}
.embed-head .pif-eyebrow { margin-bottom: 0; }

/* The one product shadow lives on the injected panel, not here — keep embeds
   flat with a 1px rule like the rest of the dashboard surfaces. */
.embed-frame-wrap {
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card);
  overflow: hidden;
  background: var(--pif-fog);
}
.embed-frame {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  border: 0;
}

.embed-fallback { margin: var(--pif-3) 0 0; }
.embed-fallback a { color: var(--pif-navy); }

.embed-placeholder-badge {
  display: inline-block; margin-left: var(--pif-2);
  font-family: var(--pif-font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0; text-transform: none;
  color: var(--pif-slate);
  background: var(--pif-gold-tint);
  border: 1px solid var(--pif-rule);
  border-radius: 999px; padding: 2px 8px;
  vertical-align: middle;
}

.embed-setup { margin: 0; }
.embed-setup code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--pif-fog);
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl);
  padding: 1px 5px;
}

/* ---- guides & resources -------------------------------------------------- */

.guide-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pif-3); flex-wrap: wrap;
  margin-bottom: var(--pif-4);
}
.guide-head .pif-eyebrow { margin-bottom: 0; }

.guide-msg {
  margin-bottom: var(--pif-4);
  padding: var(--pif-2) var(--pif-3);
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
  background: var(--pif-gold-tint);
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl);
}

/* category filter chips */
.guide-chips { display: flex; gap: var(--pif-2); flex-wrap: wrap; margin-bottom: var(--pif-5); }
.guide-chip {
  appearance: none; cursor: pointer;
  font-family: var(--pif-font-body); font-size: 13px; font-weight: 600;
  color: var(--pif-slate);
  background: var(--pif-paper);
  border: 1px solid var(--pif-rule);
  border-radius: 999px; padding: 6px 12px;
}
.guide-chip:hover { color: var(--pif-navy); }
.guide-chip.is-active { color: var(--pif-navy); background: var(--pif-gold-tint); border-color: var(--pif-navy); }

/* card grid */
.guide-grid {
  display: grid; gap: var(--pif-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.guide-card {
  display: flex; flex-direction: column;
  background: var(--pif-paper);
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card);
  overflow: hidden;
}
.guide-card.is-hidden { opacity: 0.62; }

.guide-cover { position: relative; aspect-ratio: 4 / 3; background: var(--pif-fog); }
.guide-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-cover-blank {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pif-font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pif-slate);
}
.guide-hidden-badge {
  position: absolute; top: var(--pif-2); left: var(--pif-2);
  font-family: var(--pif-font-body); font-size: 11px; font-weight: 600;
  color: var(--pif-navy); background: var(--pif-gold);
  border-radius: var(--pif-r-badge); padding: 2px 6px;
}

.guide-body { display: flex; flex-direction: column; gap: var(--pif-2); padding: var(--pif-3); }
.guide-cat { margin: 0; }
.guide-title {
  font-family: var(--pif-font-display); font-size: 15px; font-weight: 600;
  color: var(--pif-navy); margin: 0; line-height: 1.25;
}
.guide-actions { display: flex; gap: var(--pif-2); margin-top: var(--pif-1); flex-wrap: wrap; }
.guide-actions .pif-btn { padding: 6px 12px; font-size: 13px; }

.guide-admin {
  display: flex; gap: var(--pif-3); margin-top: var(--pif-2);
  padding-top: var(--pif-2); border-top: 1px solid var(--pif-rule);
}
.guide-admin .linkbtn {
  appearance: none; border: none; background: none; cursor: pointer;
  font-family: var(--pif-font-body); font-size: 12px; font-weight: 600;
  color: var(--pif-slate); padding: 0;
}
.guide-admin .linkbtn:hover { color: var(--pif-navy); }
.guide-admin .guide-danger { color: var(--pif-danger, #b3261e); }
.guide-admin--confirm { align-items: center; }
.guide-confirm-text { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-navy); font-weight: 600; }

/* preview modal — a floating panel, so it may use the one product shadow */
.guide-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pif-4);
}
.guide-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 12, 69, 0.55); }
.guide-modal-panel {
  position: relative;
  width: min(960px, 94vw); height: min(88vh, 940px);
  display: flex; flex-direction: column;
  background: var(--pif-paper);
  border-radius: var(--pif-r-card);
  border-top: 3px solid var(--pif-gold);
  overflow: hidden;
  box-shadow: var(--pif-shadow);
}
.guide-modal-head {
  display: flex; align-items: center; gap: var(--pif-3); flex-wrap: wrap;
  padding: var(--pif-3) var(--pif-4);
  border-bottom: 1px solid var(--pif-rule);
}
.guide-modal-title { font-family: var(--pif-font-display); font-size: 15px; color: var(--pif-navy); }
.guide-modal-actions { margin-left: auto; display: flex; gap: var(--pif-2); flex-wrap: wrap; }
.guide-modal-actions .pif-btn { padding: 6px 12px; font-size: 13px; }
.guide-modal-body { flex: 1; min-height: 0; background: var(--pif-fog); }
.guide-modal-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---- content calendars --------------------------------------------------- */

.cal-brandrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pif-3); flex-wrap: wrap; margin-bottom: var(--pif-4);
}
/* brand toggle — segmented pills, echoing the section nav */
.cal-brands { display: inline-flex; gap: 2px; padding: 3px; background: var(--pif-fog); border: 1px solid var(--pif-rule); border-radius: 999px; }
.cal-brand {
  appearance: none; border: none; cursor: pointer; background: transparent;
  font-family: var(--pif-font-display); font-size: 13px; font-weight: 600;
  color: var(--pif-slate); padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.cal-brand:hover { color: var(--pif-navy); }
.cal-brand.is-active { background: var(--pif-navy); color: #fff; }

.cal-monthnav { display: inline-flex; align-items: center; gap: var(--pif-3); }
.cal-monthlabel { font-family: var(--pif-font-display); font-size: 16px; font-weight: 600; color: var(--pif-navy); min-width: 150px; text-align: center; }
.cal-navbtn {
  appearance: none; cursor: pointer; background: var(--pif-paper);
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl);
  width: 32px; height: 32px; font-size: 16px; color: var(--pif-navy); line-height: 1;
}
.cal-navbtn:hover { background: var(--pif-fog); }

/* month setup header */
.cal-setup { display: flex; gap: var(--pif-4); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--pif-5); }
.cal-setup-main { display: flex; flex-direction: column; gap: var(--pif-3); flex: 1; min-width: 240px; }
.cal-goal { margin: 0; font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); }
.cal-goal .pif-eyebrow, .cal-pillars .pif-eyebrow, .cal-exchange .pif-eyebrow { display: block; margin-bottom: var(--pif-1); }
.cal-pillars { display: flex; flex-direction: column; gap: var(--pif-1); }
.cal-pillar { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); margin-right: var(--pif-3); }
.cal-pillars > .cal-pillar { display: inline-flex; }
.cal-pillar i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-exchange-items { display: flex; gap: var(--pif-2); flex-wrap: wrap; }
.cal-exchange-btn { padding: 6px 12px; font-size: 13px; }

.cal-empty { display: flex; align-items: center; justify-content: center; gap: var(--pif-3); flex-wrap: wrap; }

/* month grid */
/* ⛔ minmax(0, 1fr), NOT 1fr. A grid item defaults to min-width:auto, which is
   its CONTENT's minimum — and the chips hold nowrap text like "Spouse Employment
   / Remote Jobs · Image + Text". With plain 1fr those columns refuse to shrink,
   the seven of them add up to more than the container, and the last two days of
   every week run off the right edge. Regressed 2026-09-01 when chips gained a
   second line; the same trap applies to ANY nowrap text put in a grid cell. */
.cal-weekdays, .cal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pif-1); }
.cal-weekday { font-family: var(--pif-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate); padding: var(--pif-1) var(--pif-2); }
.cal-cells { margin-top: var(--pif-1); }
.cal-cell {
  min-width: 0; min-height: 104px; background: var(--pif-paper);
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.cal-cell--blank { background: transparent; border-color: transparent; }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; }
.cal-daynum { font-family: var(--pif-font-body); font-size: 12px; font-weight: 600; color: var(--pif-slate); }
.cal-add {
  appearance: none; cursor: pointer; background: transparent; border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-badge); width: 20px; height: 20px; line-height: 1; font-size: 14px; color: var(--pif-navy);
}
.cal-add:hover { background: var(--pif-gold-tint); }
.cal-chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-chip {
  appearance: none; cursor: pointer; text-align: left;
  /* ⚠️ flex-start, not center: the chip holds a two-line block now, and centring
     leaves the dot floating between the lines rather than beside the first. */
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--pif-fog); border: 1px solid var(--pif-rule);
  border-left: 3px solid var(--pif-gold);
  border-radius: var(--pif-r-badge); padding: 3px 6px; overflow: hidden; min-width: 0;
}
.cal-chip:hover { background: var(--pif-gold-tint); }
.cal-chip-thumb { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; flex: none; }
.cal-chip-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: 3px; }
.cal-chip-label { font-family: var(--pif-font-body); font-size: 11px; color: var(--pif-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* setup editor exchange rows */
.cal-ex-list { display: flex; flex-direction: column; gap: var(--pif-1); margin-bottom: var(--pif-2); }
.cal-ex-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pif-3); padding: 4px 8px; background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl); }
.cal-ex-title { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); }
.cal-ex-add { display: flex; gap: var(--pif-2); flex-wrap: wrap; align-items: center; }
.cal-ex-add .pif-input[type="text"] { max-width: 220px; }

/* post drawer (view + edit) — a floating panel, may use the one shadow */
.cal-drawer { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; }
.cal-drawer-backdrop { position: absolute; inset: 0; background: rgba(2, 12, 69, 0.55); }
.cal-drawer-panel {
  position: relative; width: min(480px, 96vw); height: 100%;
  display: flex; flex-direction: column; background: var(--pif-paper);
  border-left: 3px solid var(--pif-gold); box-shadow: var(--pif-shadow);
}
.cal-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pif-3); padding: var(--pif-4); border-bottom: 1px solid var(--pif-rule); flex-wrap: wrap; }
.cal-drawer-actions { display: flex; gap: var(--pif-2); flex-wrap: wrap; }
.cal-drawer-actions .pif-btn, .cal-drawer-foot .pif-btn { padding: 6px 12px; font-size: 13px; }
.cal-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pif-4); display: flex; flex-direction: column; gap: var(--pif-4); }
.cal-drawer-img { background: var(--pif-fog); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl); overflow: hidden; }
.cal-drawer-img img { display: block; width: 100%; height: auto; }
.cal-drawer-caption .pif-eyebrow { display: block; margin-bottom: var(--pif-1); }
.cal-caption-text { margin: 0; font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); white-space: pre-wrap; }
.cal-drawer-foot { display: flex; gap: var(--pif-2); flex-wrap: wrap; }
.cal-del-armed { background: var(--pif-danger); color: #fff; border-color: var(--pif-danger); }
.cal-postform { }

/* ---- get started / onboarding ------------------------------------------- */

.onb-view { max-width: 760px; }
.onb-head { margin-bottom: var(--pif-5); }
.onb-h1 { margin: var(--pif-1) 0 var(--pif-2); }
.onb-intro { margin: 0 0 var(--pif-4); font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-slate); }
.onb-progress { display: flex; align-items: center; gap: var(--pif-3); }
.onb-bar { flex: 1; height: 8px; background: var(--pif-fog); border: 1px solid var(--pif-rule); border-radius: 999px; overflow: hidden; }
.onb-bar > span { display: block; height: 100%; background: var(--pif-gold); transition: width 200ms ease; }
.onb-count { font-family: var(--pif-font-body); font-size: 13px; font-weight: 600; color: var(--pif-navy); white-space: nowrap; }
.onb-alldone {
  margin-top: var(--pif-3); padding: var(--pif-3) var(--pif-4);
  font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy);
  background: var(--pif-gold-tint); border: 1px solid var(--pif-rule);
  border-left: 3px solid var(--pif-gold); border-radius: var(--pif-r-ctrl);
}

.onb-phase { margin-bottom: var(--pif-5); }
.onb-phase-title { margin-bottom: var(--pif-3); }

.onb-step {
  display: flex; gap: var(--pif-3); align-items: flex-start;
  padding: var(--pif-3) var(--pif-4);
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl); margin-bottom: var(--pif-2);
}
.onb-step.is-done { background: var(--pif-fog); }
.onb-check {
  flex: none; margin-top: 1px; width: 24px; height: 24px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pif-paper); color: #fff;
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-badge);
}
.onb-check:hover:not(:disabled) { border-color: var(--pif-navy); }
.onb-step.is-done .onb-check { background: var(--pif-navy); border-color: var(--pif-navy); }
.onb-check:disabled { cursor: default; }
.onb-step-main { flex: 1; min-width: 0; }
.onb-step-title { font-family: var(--pif-font-display); font-size: 15px; font-weight: 600; color: var(--pif-navy); display: flex; align-items: center; gap: var(--pif-2); flex-wrap: wrap; }
.onb-step.is-done .onb-step-title { color: var(--pif-slate); }
.onb-auto {
  font-family: var(--pif-font-body); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pif-slate); background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-badge); padding: 1px 6px;
}
.onb-step-detail { margin: 4px 0 0; font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); }
/* "what you'll find on this tab" — the Look around phase. Slate rather than
   navy so the bullets sit under the step's own line instead of competing
   with it, and no bullet glyph: the indent alone carries the list. */
.onb-bullets {
  margin: var(--pif-2) 0 0; padding: 0 0 0 var(--pif-3); list-style: none;
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate);
}
.onb-bullets li { position: relative; margin-top: 3px; }
.onb-bullets li::before {
  content: ""; position: absolute; left: calc(var(--pif-3) * -1 + 3px); top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--pif-rule);
}
.onb-link { margin-top: var(--pif-2); padding: 6px 12px; font-size: 13px; }

/* location chip — makes "do this in the extension vs the dashboard" obvious */
.onb-step-toprow { display: flex; align-items: center; gap: var(--pif-2); flex-wrap: wrap; margin-bottom: 4px; }
.onb-where {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--pif-r-badge); padding: 2px 8px;
}
.onb-where--chrome    { background: var(--pif-fog); color: var(--pif-slate); border: 1px solid var(--pif-rule); }
.onb-where--facebook,
.onb-where--pifpro    { background: var(--pif-navy); color: #fff; }
.onb-where--dashboard { background: var(--pif-gold-tint); color: var(--pif-navy); border: 1px solid var(--pif-rule); }

/* "What should happen" — the expected outcome a tester verifies (orders rule) */
.onb-expect {
  margin-top: var(--pif-2);
  padding: var(--pif-2) var(--pif-3);
  background: var(--pif-fog);
  border-left: 3px solid var(--pif-gold);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0;
}
.onb-expect-label {
  display: block; font-family: var(--pif-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate); margin-bottom: 2px;
}
.onb-expect-text { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); }

/* Step images (C1) — third flex child of .onb-step, so the picture sits to the
   right of the copy and the step keeps its shape when there isn't one. */
.onb-shot { flex: none; width: 120px; display: flex; flex-direction: column; gap: 6px; }
.onb-shot:empty { display: none; }
.onb-shot-btn {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl); overflow: hidden;
}
.onb-shot-btn img { display: block; width: 100%; height: auto; }
.onb-shot-admin { display: flex; flex-direction: column; gap: 4px; }
.onb-shot-admin .pif-btn { padding: 4px 8px; font-size: 12px; }
.onb-shot-alt { font-size: 12px; padding: 4px 6px; }
.onb-shot-msg { font-family: var(--pif-font-body); font-size: 11px; color: var(--pif-slate); }
.onb-shot-msg.is-error { color: #b3261e; }

/* Click to enlarge. The one dark surface in the dashboard — it's a viewer, and
   a full-bleed white overlay would wash out a screenshot of a white UI. */
.onb-lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2, 12, 69, 0.82);
  display: flex; align-items: center; justify-content: center; padding: var(--pif-5);
}
.onb-lightbox-inner { position: relative; max-width: min(1100px, 92vw); max-height: 88vh; }
.onb-lightbox-inner img {
  display: block; max-width: 100%; max-height: 88vh;
  border-radius: var(--pif-r-card); background: var(--pif-paper);
}
.onb-lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1;
  background: var(--pif-paper); color: var(--pif-navy); border: 1px solid var(--pif-rule);
}

@media (max-width: 720px) {
  /* Stack the picture under the copy rather than squeezing both. */
  .onb-step { flex-wrap: wrap; }
  .onb-shot { width: 100%; }
  .onb-shot-btn img { max-height: 220px; width: auto; }
}

/* admin add/edit form */
.guide-editor {
  display: grid; gap: var(--pif-3);
  margin-bottom: var(--pif-5);
  padding: var(--pif-4);
  background: var(--pif-fog);
  border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card);
}
.guide-field { display: grid; gap: var(--pif-1); }
.guide-field > span { font-family: var(--pif-font-body); font-size: 13px; font-weight: 600; color: var(--pif-navy); }
.guide-check { display: flex; align-items: center; gap: var(--pif-2); font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); }
.guide-editor-actions { display: flex; gap: var(--pif-2); }

/* ============================================================================
   Referral Network — the base-image wall that replaces the old referral-map
   embed. Namespaced .net-*. Reuses --pif-* tokens and .pif-* utilities only.
   ============================================================================ */
.net-view { display: block; }

/* wall / inbox switch */
.net-switch { display: inline-flex; gap: 4px; background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: 10px; padding: 4px; margin-bottom: var(--pif-4); }
.net-tab { appearance: none; border: none; cursor: pointer; font-family: var(--pif-font-display); font-size: 13px; font-weight: 600; color: var(--pif-slate); background: transparent; padding: 8px 16px; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; }
.net-tab.is-active { background: var(--pif-navy); color: #fff; }
.net-count-badge { background: var(--pif-gold); color: var(--pif-navy); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }

/* header panel */
.net-panel { background: var(--pif-paper); border: 1px solid var(--pif-rule); border-top: 3px solid var(--pif-gold); border-radius: var(--pif-r-card); padding: var(--pif-5); }
.net-title { margin-top: 6px; }
.net-title sup, .net-title { }
.net-tagline { font-family: var(--pif-font-display); font-weight: 600; font-size: 14px; color: var(--pif-navy); margin: 4px 0 0; }
.net-controls { display: flex; flex-wrap: wrap; gap: var(--pif-3); align-items: center; margin-top: var(--pif-4); }
.net-search { position: relative; flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; }
.net-search svg { position: absolute; left: 12px; color: var(--pif-slate); pointer-events: none; }
.net-search .pif-input { padding-left: 38px; }
.net-chip { font-family: var(--pif-font-body); font-size: 13px; font-weight: 600; color: var(--pif-navy); background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: 999px; padding: 9px 14px; cursor: pointer; white-space: nowrap; }
.net-chip.is-on { background: var(--pif-gold-tint); border-color: var(--pif-gold); }
.net-sort { width: auto; }
.net-hint { display: block; margin-top: var(--pif-3); color: var(--pif-slate); font-size: 12.5px; }

.net-count { display: flex; flex-wrap: wrap; gap: var(--pif-4); align-items: center; justify-content: space-between; margin: var(--pif-5) 2px var(--pif-3); font-size: 13px; color: var(--pif-slate); }
.net-count b { color: var(--pif-navy); }
.net-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pif-navy); background: none; border: none; }
.net-sw { width: 38px; height: 22px; border-radius: 999px; background: var(--pif-rule); position: relative; transition: background 120ms; flex: none; }
.net-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 120ms; }
.net-toggle.is-on .net-sw { background: var(--pif-navy); }
.net-toggle.is-on .net-sw::after { transform: translateX(16px); }

/* wall grid — locked 4 columns, responsive down */
.net-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .net-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .net-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .net-grid { grid-template-columns: 1fr; } }
.net-empty { grid-column: 1 / -1; }

.net-tile { position: relative; background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 150ms, transform 150ms; }
.net-tile:hover { box-shadow: var(--pif-shadow); transform: translateY(-3px); }
.net-img { position: relative; aspect-ratio: 1 / 1; background: var(--pif-navy); background-size: cover; background-position: center; }
.net-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,8,40,.55), rgba(2,8,40,.68)); }
.net-phhint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; }
.net-imgup { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px; background: rgba(2,12,69,.55); color: #fff; border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.net-imgup:hover { background: rgba(2,12,69,.85); }
.net-editbtn { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 9px; background: rgba(2,12,69,.55); color: #fff; border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.net-editbtn:hover { background: rgba(2,12,69,.85); }
.net-danger { margin-right: auto; color: #b42318; }
.net-danger:hover { border-color: #b42318; background: #fef3f2; }
.net-open-pill { position: absolute; left: 16px; bottom: 16px; font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 700; color: var(--pif-navy); background: var(--pif-gold); padding: 5px 10px; border-radius: var(--pif-r-badge); }
.net-tile.is-open .net-img { filter: grayscale(.85); }
.net-seam { height: 3px; background: var(--pif-gold); transform: scaleX(0); transform-origin: left; transition: transform 160ms; }
.net-tile:hover .net-seam { transform: scaleX(1); }
.net-tile.is-open:hover .net-seam { transform: scaleX(0); }

.net-foot { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.net-eyebrow { font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 700; color: var(--pif-slate); }
.net-leadrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.net-lead { font-family: var(--pif-font-display); font-weight: 600; font-size: 15.5px; color: var(--pif-navy); }
.net-lead--empty { color: var(--pif-slate); }
.net-role { font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; color: var(--pif-slate); margin-top: 3px; }
.net-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.net-badge { display: inline-block; font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 9px; font-weight: 700; border-radius: 5px; padding: 3px 7px; }
.net-badge--sword { background: var(--pif-gold-tint); color: var(--pif-navy); border: 1px solid #f2e2a8; }
.net-badge--club { background: #eef1f7; color: var(--pif-navy); border: 1px solid #dbe1ee; }
.net-team { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pif-navy); }
.net-team-name { font-weight: 600; }
.net-team-role { font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 700; color: var(--pif-slate); background: #eef1f7; padding: 2px 6px; border-radius: 4px; }
.net-team-x { margin-left: auto; background: none; border: none; color: var(--pif-slate); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 5px; border-radius: 4px; }
.net-team-x:hover { background: var(--pif-fog); color: var(--pif-navy); }
.net-addteam { align-self: flex-start; background: none; border: 1px dashed var(--pif-rule); color: var(--pif-slate); font-weight: 600; font-size: 12.5px; padding: 7px 11px; border-radius: var(--pif-r-ctrl); cursor: pointer; }
.net-addteam:hover { border-color: #c3cadb; color: var(--pif-navy); }
.net-contact { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--pif-rule); padding-top: 10px; }
.net-contact a { color: var(--pif-slate); text-decoration: none; font-size: 12.5px; word-break: break-all; }
.net-contact a:hover { color: var(--pif-navy); }
.net-cta { margin-top: auto; }
.net-openfoot { font-size: 13px; color: var(--pif-slate); }

/* inbox */
.net-inbox { display: block; }
.net-inbanner { background: var(--pif-paper); border: 1px solid var(--pif-rule); border-top: 3px solid var(--pif-gold); border-radius: var(--pif-r-card); padding: var(--pif-4); margin-bottom: var(--pif-4); }
.net-inbanner p { margin: 4px 0 0; }
.net-inlist { display: flex; flex-direction: column; gap: var(--pif-3); }
.net-in-card { position: relative; background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card); padding: var(--pif-4); }
.net-in-card.is-new { border-left: 3px solid var(--pif-gold); }
.net-in-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.net-in-fam { font-family: var(--pif-font-display); font-weight: 600; font-size: 16px; color: var(--pif-navy); }
.net-in-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--pif-rule); border-bottom: 1px solid var(--pif-rule); }
.net-in-grid .net-k { font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; font-weight: 700; color: var(--pif-slate); margin-bottom: 2px; }
.net-in-notes { margin-bottom: 8px; }
.net-in-note { font-style: italic; color: var(--pif-navy); margin-bottom: 10px; }
.net-pill { font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: var(--pif-r-badge); white-space: nowrap; }
.net-pill--new { background: var(--pif-gold-tint); color: var(--pif-navy); border: 1px solid #f2e2a8; }
.net-pill--contacted, .net-pill--in_progress { background: #eef1f7; color: var(--pif-navy); border: 1px solid #dbe1ee; }
.net-pill--closed_won { background: #e7f5ee; color: var(--pif-success); border: 1px solid #bfe4d0; }
.net-pill--closed_lost { background: var(--pif-fog); color: var(--pif-slate); border: 1px solid var(--pif-rule); }
.net-in-actions { display: flex; gap: var(--pif-2); flex-wrap: wrap; align-items: center; }
.net-status { width: auto; }

/* modals */
.net-overlay { position: fixed; inset: 0; background: rgba(2,12,69,.42); display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow: auto; z-index: 60; }
.net-modal { width: 100%; max-width: 560px; background: var(--pif-paper); border-radius: 14px; border-top: 3px solid var(--pif-gold); box-shadow: var(--pif-shadow); overflow: hidden; }
.net-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: var(--pif-5) var(--pif-5) var(--pif-3); border-bottom: 1px solid var(--pif-rule); }
.net-x { border: none; background: var(--pif-fog); width: 34px; height: 34px; border-radius: var(--pif-r-ctrl); cursor: pointer; color: var(--pif-navy); font-size: 20px; line-height: 1; flex: none; }
.net-modal-body { padding: var(--pif-4) var(--pif-5) 4px; max-height: 60vh; overflow: auto; }
.net-modal-foot { display: flex; gap: var(--pif-2); justify-content: flex-end; align-items: center; padding: var(--pif-3) var(--pif-5) var(--pif-5); border-top: 1px solid var(--pif-rule); }
.net-field { margin-bottom: var(--pif-3); }
.net-field > label { display: block; font-family: var(--pif-font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; color: var(--pif-slate); margin-bottom: 6px; }
.net-field textarea.pif-input { resize: vertical; }
.net-note { font-size: 11.5px; color: var(--pif-slate); margin-top: 5px; }
.net-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pif-3); }
@media (max-width: 520px) { .net-row2 { grid-template-columns: 1fr; } }
.net-sending { display: flex; align-items: center; gap: 8px; background: var(--pif-fog); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl); padding: 9px 11px; margin-bottom: var(--pif-3); font-size: 13px; color: var(--pif-navy); }
.net-attach { background: #eef1f7; border: 1px solid #dbe1ee; border-radius: 10px; padding: 12px; margin-bottom: var(--pif-4); }
.net-attach .pif-input { background: var(--pif-paper); margin-top: 6px; }
.net-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl); background: var(--pif-paper); overflow: hidden; }
.net-results li { padding: 9px 11px; cursor: pointer; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; }
.net-results li:hover { background: var(--pif-fog); }
.net-who { font-weight: 600; color: var(--pif-navy); }
.net-none { cursor: default; color: var(--pif-slate); }
.net-linked { display: flex; align-items: center; gap: 9px; background: var(--pif-gold-tint); border: 1px solid #f2e2a8; border-radius: var(--pif-r-ctrl); padding: 9px 11px; font-size: 13px; color: var(--pif-navy); margin-top: 6px; }
.net-unlink { margin-left: auto; background: none; border: none; color: var(--pif-navy); cursor: pointer; font-weight: 700; font-size: 12px; text-decoration: underline; }
.net-locked { background: #eef1f7; border: 1px solid #dbe1ee; border-radius: 10px; padding: 14px; margin: 6px 0 var(--pif-4); }
.net-locked p { margin: 8px 0 0; font-size: 13px; color: var(--pif-navy); line-height: 1.5; }
.net-checks { display: flex; gap: 10px; flex-wrap: wrap; }
.net-check { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl); background: var(--pif-fog); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pif-navy); }
.net-track { flex: 1; font-size: 11.5px; color: var(--pif-slate); }
.net-msg { margin-top: 6px; font-size: 13px; color: var(--pif-navy); }
.net-msg.is-bad { color: var(--pif-danger); }

/* toast */
.net-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(24px); background: var(--pif-navy); color: #fff; padding: 13px 18px; border-radius: 10px; box-shadow: var(--pif-shadow); font-size: 14px; font-weight: 600; opacity: 0; transition: opacity 200ms, transform 200ms; z-index: 70; max-width: 90vw; }
.net-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Tools ---------------------------------------------------------------
 * A shelf of ambassador utilities, and the tools themselves. The BAH Power
 * Analysis draws to a canvas the ambassador copies into a Messenger thread —
 * see the header of js/view-tools.js before changing any of the card's copy.
 */

.tool-lede { font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-slate);
  max-width: 62ch; margin: 0 0 var(--pif-4); }

/* The don't-share-publicly caution. Same block treatment as .tool-auto — the
   orders rule on a gold tint with navy type — rather than any new gold usage:
   gold as text on a light ground is ~1.4:1 and would make the one line that
   most needs reading the hardest to read. */
.tool-warn { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
  line-height: 1.5; max-width: 62ch; margin: 0 0 var(--pif-4);
  background: var(--pif-gold-tint); border-left: 3px solid var(--pif-gold);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0; padding: 10px var(--pif-3); }

.tool-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--pif-3); }

.tool-tile {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-left: 3px solid transparent; border-radius: var(--pif-r-card);
  padding: var(--pif-4); font-family: var(--pif-font-body);
}
.tool-tile.is-ready:hover { background: var(--pif-gold-tint); border-left-color: var(--pif-gold); }
.tool-tile.is-soon { opacity: 0.6; cursor: default; }
.tool-tile:focus-visible { outline: 2px solid var(--pif-gold); outline-offset: 2px; }
.tool-tag { font-family: var(--pif-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate); }
.tool-tile-name { font-family: var(--pif-font-display); font-size: 15px; font-weight: 600;
  color: var(--pif-navy); }
.tool-tile-blurb { font-size: 13px; color: var(--pif-slate); line-height: 1.45; }

/* The wrapper is the grid item now (not the button) — it's what lets the
   admin-only upload control sit BESIDE the button rather than inside it. */
.tool-tile-wrap { display: flex; flex-direction: column; }
/* Both generated cards (see G_BAH / the housing chart's CH above) are
   PORTRAIT — 1080 wide by ~1450-1700 tall, roughly a 2:3 ratio — not the
   landscape shape a fixed 120px height assumed. That mismatch was cropping
   most of every uploaded sample off (Lauren, 2026-09-07). `contain` on a
   portrait box shows the whole card for either tool without cropping; the
   two aren't pixel-identical in height, so a hair of neutral letterboxing on
   the shorter one beats losing content on the taller one. */
.tool-tile-sample {
  width: 100%; aspect-ratio: 2 / 3; object-fit: contain;
  background: var(--pif-fog);
  border-radius: var(--pif-r-ctrl); margin-bottom: var(--pif-2);
  border: 1px solid var(--pif-rule);
}
.tool-sample-upload {
  align-self: flex-start; margin-top: 6px; cursor: pointer;
  font-size: 12px; color: var(--pif-slate); text-decoration: underline;
}
.tool-sample-upload:hover { color: var(--pif-navy); }

.tool-head { display: flex; align-items: center; gap: var(--pif-3); margin-bottom: var(--pif-4); }
.tool-head .pif-eyebrow { margin: 0; }
.tool-back { padding: 6px var(--pif-3); }

.tool-body { display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--pif-4); align-items: start; }
@media (max-width: 840px) { .tool-body { grid-template-columns: 1fr; } }

.tool-panel { background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-top: 3px solid var(--pif-gold); border-radius: var(--pif-r-card); padding: var(--pif-4); }
.tool-fld { display: block; margin-bottom: var(--pif-3); }
.tool-fld > span { display: block; font-family: var(--pif-font-body); font-size: 12px;
  font-weight: 600; color: var(--pif-slate); margin-bottom: 5px; }
.tool-hint { display: block; font-size: 12px; font-weight: 400; color: var(--pif-slate);
  line-height: 1.4; margin-top: 5px; }
.tool-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.tool-count.near { color: var(--pif-warning); }
.tool-count.full { color: var(--pif-danger); }

.tool-grp { border-top: 1px solid var(--pif-rule); margin-top: var(--pif-4);
  padding-top: var(--pif-3); }
.tool-grp .pif-eyebrow { display: block; margin-bottom: var(--pif-2); }

.tool-seg { display: flex; border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl); overflow: hidden; }
.tool-seg button { flex: 1; font-family: var(--pif-font-display); font-size: 13px;
  font-weight: 600; padding: 9px 4px; background: var(--pif-paper); color: var(--pif-slate);
  border: none; border-left: 1px solid var(--pif-rule); cursor: pointer; }
.tool-seg button:first-child { border-left: none; }
.tool-seg button.on { background: var(--pif-navy); color: #fff; }
.tool-seg button:focus-visible { outline: 2px solid var(--pif-gold); outline-offset: -2px; }

.tool-actions { display: flex; gap: var(--pif-2); flex-wrap: wrap; margin-top: var(--pif-4); }
.tool-msg { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate);
  line-height: 1.45; margin: var(--pif-2) 0 0; }

.tool-stage { background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card); padding: var(--pif-4); }
.tool-stage canvas { display: block; width: 100%; max-width: 430px; height: auto; margin: 0 auto;
  border: 1px solid var(--pif-rule); border-radius: 8px; }

/* ---- Housing Power Analysis panel ------------------------------------- */
/* The contact block: what the tool filled in for her, so she can see the name
   and route are right before she sends anything. */
.tool-auto {
  background: var(--pif-gold-tint); border-left: 3px solid var(--pif-gold);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0;
  padding: 10px var(--pif-3); margin-bottom: var(--pif-4);
}
.tool-auto .pif-eyebrow { display: block; margin-bottom: var(--pif-1); }
.tool-route { margin: 0; font-size: 12.5px; color: var(--pif-navy); line-height: 1.45; }
.tool-route span { color: var(--pif-slate); }

/* Required marker. Danger red rather than gold — gold on a light ground is
   ~1.4:1, and an asterisk nobody can see is worse than no asterisk. */
.req { color: var(--pif-danger); font-weight: 700; margin-left: 2px; }
.tool-req { font-size: 12px; color: var(--pif-slate); margin: 0 0 var(--pif-4); }

.tool-pair { display: flex; align-items: center; gap: var(--pif-2); }
.tool-pair span { font-size: 13px; color: var(--pif-slate); }

.tool-hq {
  margin-top: var(--pif-4); padding-top: var(--pif-3);
  border-top: 1px solid var(--pif-rule);
  font-size: 11.5px; color: var(--pif-slate); line-height: 1.5;
}
.tool-hq b { color: var(--pif-navy); font-weight: 600; font-variant-numeric: tabular-nums; }

.tool-stage canvas[style*="0.55"] { transition: opacity 120ms ease; }

/* ============================================================================
   Bulk add — the guides batch panel and the calendar sheet import.
   Namespaced .gbatch-* / .cal-imp-*. Reuses --pif-* tokens and the existing
   .guide-editor shell, so both read as the same kind of thing: a working panel,
   not a new surface.
   ============================================================================ */

.guide-head-actions { display: flex; gap: var(--pif-2); }

.gbatch-help,
.cal-imp-help { font-size: 13px; color: var(--pif-slate); line-height: 1.5; margin: 0; }

/* One row per chosen file: an editable title, the filename it came from, and a
   way to leave it out. The title leads because it is the only thing she is
   likely to change. */
.gbatch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pif-1); }
.gbatch-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: var(--pif-2); align-items: center;
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl, 8px); padding: var(--pif-2);
}
.gbatch-file {
  font-size: 12px; color: var(--pif-slate);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gbatch-x { flex: 0 0 auto; }

.gbatch-progress {
  margin: 0; font-family: var(--pif-font-display); font-size: 13px;
  font-weight: 600; color: var(--pif-navy);
}

/* What did not go in. ⛔ Deliberately quiet rather than red-alarmed: a partial
   import is a list of work still to do, not a failure state, and an error style
   here would read as "none of it worked". */
.gbatch-errs, .cal-imp-skip {
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-left: 3px solid var(--pif-gold); border-radius: var(--pif-r-ctrl, 8px);
  padding: var(--pif-3);
}
.gbatch-errs ul, .cal-imp-skip ul {
  margin: var(--pif-1) 0 0; padding-left: 1.1em;
  font-size: 13px; color: var(--pif-slate); line-height: 1.6;
}

/* ---- calendar import ---- */
.cal-imp-count { margin: 0; font-size: 14px; color: var(--pif-navy); }
.cal-imp-count b { font-family: var(--pif-font-display); font-size: 18px; }
.cal-imp-warn { margin: 0; font-size: 13px; color: var(--pif-slate); line-height: 1.5; }

/* The import preview, one row per day. ⛔ A list rather than a table: the drawer
   is 480px and a four-column table scrolled the Holiday column off the edge —
   the one column that proves holidays became labels and not posts. */
.cal-imp-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cal-imp-day {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--pif-2);
  align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--pif-rule);
}
.cal-imp-daynum {
  font-family: var(--pif-font-display); font-size: 14px; font-weight: 700;
  color: var(--pif-navy); text-align: right;
}
.cal-imp-daybody { min-width: 0; }
.cal-imp-daycap {
  margin: 0; font-size: 13px; color: var(--pif-navy); line-height: 1.4;
  overflow-wrap: anywhere;
}
.cal-imp-daymeta {
  margin: 2px 0 0; font-size: 11px; color: var(--pif-slate);
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600;
}

@media (max-width: 560px) {
  /* One column, everything stacked. A two-column grid here left the filename
     spanning both and pushed Remove onto a row of its own at full width, which
     reads as the primary action on the card rather than the way out of it. */
  .gbatch-row { grid-template-columns: minmax(0, 1fr); }
  .gbatch-x { justify-self: start; }
}

/* A holiday or observance on a day square — a label, never a post (0046).
   ⛔ Quiet and not clickable: it is context to plan around, and anything that
   looks like a chip here would read as something to publish. */
.cal-daynote {
  font-size: 10px; line-height: 1.3; color: var(--pif-slate);
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600;
  padding: 2px 0 4px; margin-bottom: 2px;
  border-bottom: 1px solid var(--pif-rule);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The template link in the import drawer. A plain link, not a button: it is a
   sidebar to the task, and a second filled button beside "Add N posts" would
   compete with the thing she actually came here to press. */
.cal-imp-tpl { margin: 0; font-size: 13px; color: var(--pif-slate); line-height: 1.5; }
.cal-imp-tpl a { color: var(--pif-navy); font-weight: 600; }

/* Feedback under the post drawer's Copy / Download row. Same job as the Tools
   cards' #tool-msg: a clipboard write can be refused by the browser and the only
   honest response is words. */
.cal-drawer-msg {
  margin: var(--pif-2) 0 0; font-size: 12px; color: var(--pif-slate);
  line-height: 1.5; min-height: 1em;
}

/* Two-line post chips: what it IS, then what it SAYS. The square can show a
   couple of fields at most — the drawer carries the rest. */
.cal-chip-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cal-chip-sub {
  font-family: var(--pif-font-body); font-size: 10px; color: var(--pif-slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Every field a post carries, in the drawer. ⛔ Empty ones are omitted upstream
   rather than rendered blank — four empty rows read as data lost in the import. */
.cal-fields {
  margin: 0; display: grid; gap: 1px;
  background: var(--pif-rule); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl, 8px); overflow: hidden;
}
.cal-field {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--pif-2);
  background: var(--pif-paper); padding: 7px var(--pif-3);
}
.cal-field dt {
  font-family: var(--pif-font-display); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--pif-slate); font-weight: 600;
  align-self: center;
}
.cal-field dd {
  margin: 0; font-size: 13px; color: var(--pif-navy); overflow-wrap: anywhere;
  align-self: center;
}

/* Tokens a caption still cannot fill. Reuses the import panel's quiet gold-rule
   treatment: this is work still to do, not an error — but it must be seen before
   she pastes into a group. */
.cal-missing ul { margin: var(--pif-1) 0 0; padding-left: 1.1em; }

/* ============================================================================
   Guides: the managed tag list (0048), tag chips, sorting, and the batch grid.
   ============================================================================ */

.guide-filters { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pif-3); flex-wrap: wrap; }
.guide-sort { display: flex; align-items: center; gap: var(--pif-2); font-size: 13px; color: var(--pif-slate); }
.guide-sort select { width: auto; }

/* The two tag pickers sit beside Sort. ⛔ Selects rather than a chip row: chips
   put "Incoming" next to "Renter" with nothing saying they answer different
   questions, and narrowing meant scanning one long row. */
.guide-picks { display: flex; align-items: center; gap: var(--pif-3); flex-wrap: wrap; }

/* Grouped checkboxes in the editors, so the group a tag belongs to is visible
   where it is chosen and not only where it is filtered. */
.gtag-group { display: grid; gap: 4px; margin-bottom: var(--pif-2); }
.gtag-group-label {
  font-family: var(--pif-font-display); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--pif-slate); font-weight: 600;
}
.gtag-head {
  list-style: none; font-family: var(--pif-font-display); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--pif-slate);
  font-weight: 600; padding: var(--pif-2) 0 2px;
}

/* Tags on a card. */
.guide-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--pif-1) 0 var(--pif-2); }
.guide-tag {
  font-family: var(--pif-font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--pif-slate); background: var(--pif-fog);
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-badge);
  padding: 2px 7px;
}

/* HQ's tag manager. */
.gtag-list { list-style: none; margin: 0 0 var(--pif-2); padding: 0; display: grid; gap: var(--pif-1); }
.gtag-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pif-2); align-items: center;
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl); padding: var(--pif-2);
}
.gtag-confirm { display: flex; align-items: center; gap: var(--pif-2); font-size: 12px; color: var(--pif-slate); }

/* Tag pickers, in both editors and on each batch row. */
.gtag-picks { display: flex; flex-wrap: wrap; gap: var(--pif-1) var(--pif-3); }
.gtag-pick { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pif-navy); }

/* The batch row grew from one line to three. */
.gbatch-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pif-2); }
.gbatch-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: var(--pif-2); align-items: center;
}
.gbatch-meta { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: var(--pif-2); }
.gbatch-tags { padding-top: 2px; }

@media (max-width: 560px) {
  .gbatch-main { grid-template-columns: minmax(0, 1fr); }
  .gbatch-meta { grid-template-columns: minmax(0, 1fr); }
  .guide-filters { align-items: flex-start; }
}

/* Emptying the bin. ⛔ The only irreversible action in the product, so the armed
   state is loud where the resting state is quiet — a danger-styled button sitting
   permanently above a list of recoverable things would train her to ignore it. */
.bin-actions { display: flex; align-items: center; gap: var(--pif-2); flex-wrap: wrap; margin-bottom: var(--pif-3); }
.bin-warn { font-size: 13px; color: var(--pif-navy); font-weight: 600; }
.bin-row { align-items: center; }

/* The own-CRM block, collapsed by default. ⛔ The summary line shows whether a
   hook is set even when shut — "is this person sending families outside PIF" is
   the one thing an admin scanning this page must not have to click for. */
.crm-summary {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--pif-2);
  background: transparent; border: 0; padding: 2px 0;
}
.crm-summary .pif-eyebrow { margin: 0; flex: 0 0 auto; }
.crm-caret {
  width: 16px; height: 16px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--pif-rule); border-radius: 4px;
  font-size: 12px; line-height: 1; color: var(--pif-navy); background: var(--pif-paper);
}
.crm-state {
  font-size: 12px; color: var(--pif-slate); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A live hook is worth seeing at a glance in a long list. */
.crm-hook.is-on .crm-state { color: var(--pif-navy); font-weight: 600; }
.crm-hook.is-open .crm-hook-row { margin-top: var(--pif-2); }

/* A read-only admin (PIFHL). ⛔ Says so once at the top rather than on every
   greyed control — thirty tooltips is not an explanation. */
.admin-ro-banner {
  background: var(--pif-gold-tint);
  border: 1px solid var(--pif-rule); border-left: 3px solid var(--pif-gold);
  border-radius: var(--pif-r-ctrl); padding: var(--pif-3);
  font-size: 13px; color: var(--pif-navy); margin-bottom: var(--pif-4);
}
/* Visibly inert, not hidden. She should be able to see WHAT exists here — that
   is the point of an oversight account — just not operate it. */
.is-readonly, .feature-view input[readonly], .feature-view textarea[readonly] {
  opacity: 0.55; cursor: not-allowed;
}

/* Search the users list. ⛔ Above the list, below "add a user": it filters what
   is beneath it, and a box that sits under the thing it filters reads as a
   footer. */
.user-search {
  display: flex; align-items: center; gap: var(--pif-2);
  margin-bottom: var(--pif-3);
}
.user-search input { flex: 1 1 auto; }
.user-search-count {
  font-size: 12px; color: var(--pif-slate); white-space: nowrap;
  font-family: var(--pif-font-display); font-weight: 600;
}