/* =========================================================
   pathways.css — multi-step form, auth, admin.
   Reuses tokens from base.css; do not redefine colors here.
   ========================================================= */

.fp-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card, none);
}

.fp-tabs{ display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--line); margin-top:0; }
.fp-tab{
  font-family: var(--font-body); font-weight:600; font-size:.9rem;
  background:none; border:none; padding:10px 4px; margin-right:20px;
  color: var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.fp-tab:hover{ color: var(--ink); }
.fp-tab.is-active{ color: var(--violet-text); border-bottom-color: var(--violet); }

.fp-form{ display:flex; flex-direction:column; gap:16px; }
.fp-form label{ display:flex; flex-direction:column; gap:6px; }

/* --- dashboard wide layout with margin figures ---
   Widened from an earlier version: the content column was 780px
   (matching every other page's .wrap) inside a 1400px-capped outer
   row, leaving real dead space between the figures and the true
   viewport edges on a wide monitor. Now: no outer cap at all (the
   row uses the full viewport, minus edge padding) and
   justify-content:space-between pushes the two margin columns to
   the true left/right edges; the reclaimed width goes to the
   content column, widened from 780px to 960px so the KPI/tool cards
   actually read as larger, not just "the same cards with more
   space around them". */
.dash-main-wide{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  padding: 0 32px;
}

.dash-main-content{
  flex: 1 1 960px;
  max-width: 960px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.dash-margin-col{
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px 0 60px;
}

/* Below this, there's no real room for a 170px column on each side
   plus a 960px content column plus gaps without everything feeling
   cramped -- the figures are decorative, not essential, so they
   just don't render at all rather than squeezing in badly. */
@media (max-width: 1420px){
  .dash-margin-col{ display: none; }
  .dash-main-wide{ padding: 0; justify-content: center; }
}

/* --- isometric figures (dashboard) --- */
.dash-fig{ margin: 0; }

.dash-fig-label{
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  margin-bottom: 10px;
  text-align: center;
}

.dash-fig-svg{ display: block; width: 100%; height: auto; max-width: 130px; margin: 0 auto; }

.dash-fig figcaption{
  margin-top: 12px;
  font-size: .78rem;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
}
.dash-fig figcaption span{
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: var(--ink-faint);
  margin-top: 3px;
}

.iso-face-top, .iso-face-left, .iso-face-right{
  stroke: var(--border-strong);
  stroke-width: 1;
}
.iso-face-top{ fill: var(--iso-top); }
.iso-face-left{ fill: var(--iso-left); opacity: var(--iso-left-opacity); }
.iso-face-right{ fill: var(--iso-right); opacity: var(--iso-right-opacity); }
.fp-hint{ font-weight:400; color: var(--ink-soft); }
.fp-error{ color: var(--red); font-size:.85rem; margin:0; }

/* Inline section-level error banner (graceful degradation) -- shown
   in place of a section's content when just that section's fetch
   fails, with its own Retry button. The rest of the page keeps
   working regardless. */
.fp-error-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--red-dim); border:1px solid var(--red); border-radius:10px;
  padding:10px 14px; margin-bottom:16px; font-size:.85rem; color: var(--red);
}
.fp-error-banner .fp-error-banner-retry{ flex-shrink:0; padding:4px 12px; font-size:.8rem; }

/* Chat assistant widget -- floating button + slide-in panel. */
.fp-chat-launcher{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--violet); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform var(--dur-micro) var(--ease-out);
  font-size: 22px;
}
.fp-chat-launcher:hover{ transform: scale(1.06); }

.fp-chat-panel{
  position: fixed; right: 20px; bottom: 84px; z-index: 60;
  width: 360px; max-width: calc(100vw - 40px);
  height: 480px; max-height: calc(100vh - 140px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.fp-chat-panel[hidden]{ display: none; }

.fp-chat-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.fp-chat-head h4{ margin: 0; font-size: .9rem; }
.fp-chat-head-sub{ font-size: .72rem; color: var(--ink-soft); }
.fp-chat-close{ background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
.fp-chat-close:hover{ color: var(--ink); }

.fp-chat-messages{
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.fp-chat-msg{ max-width: 88%; padding: 8px 11px; border-radius: 10px; font-size: .85rem; line-height: 1.4; white-space: pre-wrap; }
.fp-chat-msg.user{ align-self: flex-end; background: var(--violet-dim); color: var(--ink); }
.fp-chat-msg.assistant{ align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.fp-chat-msg.error{ align-self: center; background: var(--red-dim); color: var(--red); border: 1px solid var(--red); font-size: .8rem; }
.fp-chat-msg.pending{ align-self: flex-start; color: var(--ink-soft); font-style: italic; }

.fp-chat-context-chip{
  margin: 10px 14px 0; padding: 5px 10px; border-radius: 99px;
  background: var(--violet-dim); color: var(--violet-text);
  font-size: .72rem; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
}
.fp-chat-context-chip button{ background: none; border: none; color: inherit; cursor: pointer; font-size: .85rem; line-height: 1; padding: 0; }

.fp-chat-input-row{
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border);
}
.fp-chat-input-row input{ flex: 1; }
.fp-chat-input-row button{ flex-shrink: 0; padding: 8px 14px; }


.fp-field-hint{
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  margin-top: 5px;
  min-height: 1em;
  transition: color var(--dur-micro) var(--ease-out);
}
.fp-field-hint:empty{ display: none; }
.fp-field-hint.is-error{ color: var(--red); }
.fp-field-hint.is-warn{ color: var(--amber); }
.fp-field-hint.is-ok{ color: var(--green); }
.fp-note{ color: var(--green); font-size:.85rem; margin:0; }

.btn-primary{
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  background: var(--violet); color:#fff; border:none; border-radius: var(--radius-sm);
  padding: 12px 20px; cursor:pointer;
  transition: opacity var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 14px rgba(110,118,240,.25);
}
.btn-primary:hover:not(:disabled){ background:#7B82F3; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 18px rgba(110,118,240,.32); }
.btn-primary:active:not(:disabled){ transform: translateY(0) scale(.98); transition-duration: 60ms; }
.btn-primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

.btn-secondary{
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  background: var(--surface); color: var(--ink); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 20px; cursor:pointer;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn-secondary:hover{ background: var(--surface-2); border-color: var(--ink-soft); }
.btn-secondary:active{ transform: scale(.98); transition-duration: 60ms; }

/* --- layout: form + manifest rail --- */
.fp-layout{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap: 28px;
  align-items:start;
}
@media (max-width:860px){
  .fp-layout{ grid-template-columns: 1fr; }
  .fp-manifest-rail{ order:-1; }
}

/* --- manifest: the signature element ---
   A live, ticking readout of what's been captured so far.
   Every line is real state, not decoration. */
.fp-manifest-rail{ position: sticky; top: 20px; }
.fp-manifest{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.fp-manifest-head{
  font-family: var(--font-mono);
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-faint);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.fp-manifest-body{ padding: 6px 0; }
.fp-manifest-line{
  display:flex; align-items:baseline; gap:10px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size:.74rem;
  letter-spacing:.02em;
  border-left: 2px solid transparent;
  /* now a <button> -- strip native styling */
  width: 100%;
  background: none;
  border-top: none; border-right: none; border-bottom: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.fp-manifest-line:hover:not(.is-current){ background: var(--surface-2); }
.fp-manifest-line .fp-m-glyph{ flex-shrink:0; width:12px; color: var(--ink-faint); }
.fp-manifest-line .fp-m-label{ color: var(--ink-faint); flex-shrink:0; min-width:76px; text-transform:uppercase; }
.fp-manifest-line .fp-m-value{ color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-manifest-line.is-done{ border-left-color: var(--violet); }
.fp-manifest-line.is-done .fp-m-glyph{ color: var(--violet-text); }
.fp-manifest-line.is-done .fp-m-label{ color: var(--ink-soft); }
.fp-manifest-line.is-done .fp-m-value{ color: var(--ink); }
.fp-manifest-line.is-current{ background: var(--violet-dim); border-left-color: var(--amber); }
.fp-manifest-line.is-current .fp-m-glyph{ color: var(--amber); }
.fp-manifest-line.is-current .fp-m-label{ color: var(--ink); }
.fp-manifest-footer{
  font-family: var(--font-mono);
  font-size:.72rem; letter-spacing:.08em; color: var(--ink-faint);
  padding: 10px 16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
  margin: 0;
}

/* --- review step: the finale. The small rail disappears and
   the review content itself takes on the manifest's ledger
   language — mono labels, resolved values, one confident action. --- */
body.is-review-step .fp-layout{ grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
body.is-review-step .fp-manifest-rail{ display:none; }
body.is-review-step .fp-card{ border-color: var(--violet); box-shadow: 0 0 0 1px rgba(110,118,240,.1), 0 8px 32px rgba(110,118,240,.08); }
body.is-review-step .fp-step-title{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:1.1rem; color: var(--violet-text); }
body.is-review-step .fp-review-section h4{ font-family: var(--font-mono); letter-spacing:.08em; }
body.is-review-step .fp-review-row{ font-family: var(--font-mono); font-size:.85rem; }
body.is-review-step .fp-review-row span:first-child{ text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; }
body.is-review-step .fp-actions{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }

.fp-transmit-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top: 20px;
}
.fp-transmit-stamp{
  font-family: var(--font-mono); font-size:.72rem; color: var(--ink-faint); letter-spacing:.04em;
}
.btn-transmit{
  font-family: var(--font-mono); font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  background: var(--violet); color:#fff; border:none; border-radius: var(--radius-sm);
  padding: 14px 26px; cursor:pointer; transition: background .15s ease, transform .1s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 20px rgba(110,118,240,.3);
}
.btn-transmit:hover{ background:#7B82F3; }
.btn-transmit:active{ transform: translateY(1px); }
.btn-transmit:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* --- legacy simple progress bar: kept for pages that don't
   opt into the manifest rail, harmless if unused --- */
.fp-progress{ display:flex; gap:6px; margin-bottom:24px; }
.fp-progress-step{
  flex:1; height:4px; border-radius:3px; background: var(--surface-2);
}
.fp-progress-step.is-done{ background: var(--violet); }
.fp-progress-step.is-current{ background: var(--amber); }
.fp-progress-label{ font-size:.8rem; color: var(--ink-soft); margin-bottom:8px; }

.fp-step-title{ margin-bottom:4px; }
.fp-step-desc{ color: var(--ink-soft); font-size:.9rem; margin-bottom:20px; }

.fp-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:24px; }

.fp-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .fp-grid-2{ grid-template-columns:1fr; } }
.fp-grid-2 > label, .fp-grid-3 > label{ display:flex; flex-direction:column; gap:6px; }

.calc-marks-group{ display:flex; flex-direction:column; }
.calc-marks-group-label{ font-size:.82rem; font-weight:600; color:var(--ink); margin:0 0 6px; }
.calc-marks-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.calc-marks-pair label{ display:flex; flex-direction:column; gap:6px; font-weight:500; color:var(--ink-soft); }

.fp-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:760px){ .fp-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .fp-grid-3{ grid-template-columns:1fr; } }

.fp-pathway-options{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .fp-pathway-options{ grid-template-columns:1fr; } }
.fp-pathway-card{
  border:1px solid var(--line); border-radius: var(--radius); padding:20px;
  cursor:pointer; background: var(--surface); text-align:left;
  transition: border-color .15s ease, background .15s ease;
}
.fp-pathway-card:hover{ border-color: var(--border-strong); background: var(--surface-2); }
.fp-pathway-card.is-selected{ border-color: var(--violet); background: var(--violet-dim); }
.fp-pathway-card h3{ margin:0 0 4px; }
.fp-pathway-card p{ margin:0; font-size:.85rem; }

.fp-checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .fp-checkbox-grid{ grid-template-columns:1fr; } }
.fp-checkbox-item{ display:flex; align-items:center; gap:8px; font-weight:400; font-size:.92rem; }
.fp-checkbox-item input{ width:auto; }

.fp-pref-group{ border:1px solid var(--line); border-radius: var(--radius-sm); padding:16px; margin-bottom:16px; }
.fp-pref-group h4{ margin:0 0 10px; font-family: var(--font-body); font-size:.95rem; }
.fp-pref-search{ margin-bottom:10px; }
.fp-pref-ranks{ display:flex; flex-direction:column; gap:8px; }
.fp-pref-rank{ display:flex; align-items:flex-start; gap:10px; }
.fp-pref-rank .fp-rank-badge{
  margin-top: 8px; /* align badge with search input, not the select below */
}
.fp-pref-rank .fp-rank-badge{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background: var(--surface-2);
  color: var(--ink-soft); font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.fp-pref-rank-inner{ display:flex; flex-direction:column; gap:4px; flex:1; }
.fp-pref-rank-inner select{ width:100%; }
.fp-pref-rank-inner .fp-pref-search{
  font-size: .82rem;
  padding: 5px 10px;
  height: auto;
}
.fp-pref-rank select{ flex:1; }
.fp-pref-rank.has-dupe select{ border-color: var(--red); }

.fp-review-section{ margin-bottom:20px; }
.fp-review-section h4{ font-family: var(--font-body); font-size:.9rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin:0 0 8px; }
.fp-review-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--surface-2); font-size:.92rem; }
.fp-review-row span:first-child{ color: var(--ink-soft); }

/* --- preference groups accordion (admin detail view) --- */
.fp-accordion{ display:flex; flex-direction:column; gap:8px; }

.fp-accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fp-accordion-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink);
  transition: background var(--dur-micro) var(--ease-out);
}
.fp-accordion-header:hover{ background: var(--violet-dim); }

.fp-accordion-chevron{
  font-size: .7rem;
  color: var(--ink-soft);
  transition: transform var(--dur-small) var(--ease-out);
}
.fp-accordion-header[aria-expanded="true"] .fp-accordion-chevron{ transform: rotate(180deg); }

/* Grid-rows 0fr->1fr trick: the only clean way to animate truly
   auto-height content without JS measuring it first. The wrapper is
   the grid; its single child (fp-accordion-panel) collapses to zero
   visible height at 0fr regardless of its actual content height,
   and expands to full content height at 1fr. min-height:0 on the
   inner element is required for the overflow:hidden clip to work
   inside a grid track. */
.fp-accordion-panel-wrapper{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-small) var(--ease-in-out);
}
.fp-accordion-panel-wrapper.is-open{ grid-template-rows: 1fr; }

.fp-accordion-panel{
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  background: var(--surface);
  transition: padding var(--dur-small) var(--ease-in-out);
}
.fp-accordion-panel-wrapper.is-open .fp-accordion-panel{
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.fp-accordion-list{
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .88rem;
  color: var(--ink);
}

.fp-accordion-empty{
  margin: 0;
  padding: 12px 16px;
  font-size: .85rem;
  font-style: italic;
  color: var(--ink-faint);
}

.fp-status-banner{
  padding:14px 16px; border-radius: var(--radius-sm); font-size:.9rem; margin-bottom:20px;
  border: 1px solid transparent;
}
.fp-status-banner.submitted{ background: var(--green-dim); color: var(--green); border-color: rgba(79,195,138,.25); }
.fp-status-banner.draft{ background: var(--amber-dim); color: var(--amber); border-color: rgba(232,163,61,.25); }
.fp-status-banner.staff-editing{ background: var(--violet-dim); color: var(--violet-text); border-color: var(--violet); }

/* --- admin: command-center stats strip --- */
.fp-stats-strip{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:1px; background: var(--line);
  border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; margin-bottom:20px;
}
.fp-stat{
  background: var(--surface); padding: 16px 18px;
}
.fp-stat-value{
  font-family: var(--font-mono); font-size:1.6rem; font-weight:700; color: var(--ink);
  line-height:1;
}
.fp-stat-label{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-faint); margin-top:6px;
}
.fp-stat.accent-violet .fp-stat-value{ color: var(--violet-text); }
.fp-stat.accent-green .fp-stat-value{ color: var(--green); }
.fp-stat.accent-amber .fp-stat-value{ color: var(--amber); }

/* --- admin table --- */
.fp-dash{ margin-top: 48px; }
.fp-dash-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.fp-dash-head h2{ margin:2px 0 0; }
.fp-dash-empty{ color: var(--ink-soft); font-size:.9rem; padding: 8px 2px 2px; margin:0; }

.fp-admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.fp-admin-table th, .fp-admin-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.fp-admin-table th{ color: var(--ink-soft); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.fp-admin-table tr:hover td{ background: var(--surface-2); cursor:pointer; }

.fp-row-actions{ white-space: nowrap; }

/* Checkbox cell: the actual native checkbox is tiny and hard to hit
   precisely -- a near-miss click used to fall through to opening
   the row's detail view instead (the row click handler only guarded
   against the checkbox element itself, not the space around it).
   Fix is two-part: the label now fills the ENTIRE cell (so a click
   anywhere in generous padding toggles the checkbox, not just a
   ~14px box), and the row-click guard checks against this whole
   cell too (see js/fp-admin.js). The checkbox itself is also
   visually enlarged and given the site's accent color instead of
   the tiny unstyled browser default. */
.fp-select-td{ padding: 0 !important; }
.fp-select-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 52px;
  padding: 10px 16px;
  cursor: pointer;
}
.fp-select-cell input[type="checkbox"],
#fp-select-all{
  width: 20px;
  height: 20px;
  accent-color: var(--violet);
  cursor: pointer;
}

.fp-bulk-actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .86rem;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  position: relative;
}
.fp-bulk-count{
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.fp-bulk-menu-wrapper{
  position: relative;
  display: inline-block;
}
.fp-bulk-dropdown-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs, 4px);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur-micro) var(--ease-out);
}
.fp-bulk-dropdown-btn:hover{
  background: var(--violet-dim);
  border-color: var(--violet);
  color: #fff;
}
.fp-bulk-dropdown-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.fp-bulk-dropdown-caret{
  font-size: .7rem;
  transition: transform var(--dur-micro) var(--ease-out);
}
.fp-bulk-dropdown-btn[aria-expanded="true"] .fp-bulk-dropdown-caret{
  transform: rotate(180deg);
}
.fp-bulk-dropdown-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 6px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fp-bulk-dropdown-menu[hidden]{
  display: none !important;
}
.fp-bulk-dropdown-item{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs, 4px);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.fp-bulk-clear-item{
  color: var(--amber);
}
.fp-bulk-clear-item:hover{
  background: var(--amber-dim);
  color: #fff;
}
.fp-bulk-delete-item{
  color: var(--red);
}
.fp-bulk-delete-item:hover{
  background: var(--red-dim);
  color: #fff;
}
.fp-bulk-dropdown-item:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.fp-bulk-item-icon{
  font-size: .85rem;
  line-height: 1;
}
.fp-bulk-quick-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.fp-bulk-quick-actions .fp-row-action-clear{
  font-weight: 600;
}
.fp-bulk-quick-actions .fp-row-action-delete{
  font-weight: 600;
}
.fp-row-action-link{
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--violet-text);
  cursor: pointer;
  text-decoration: none;
}
.fp-row-action-link:hover{ text-decoration: underline; }
.fp-row-action-link + .fp-row-action-link{ margin-left: 14px; }
.fp-row-action-delete{ color: var(--red); }
.fp-row-action-clear{ color: var(--amber); }
.fp-row-action-delete:disabled{ opacity: .5; cursor: not-allowed; text-decoration: none; }

.fp-badge{ display:inline-block; padding:2px 8px; border-radius:99px; font-size:.75rem; font-weight:600; text-transform: capitalize; }
.fp-badge.draft{ background: var(--amber-dim); color: var(--amber); }
.fp-badge.submitted{ background: var(--green-dim); color: var(--green); }
.fp-cap{ text-transform: capitalize; }

.fp-topbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding: 16px 0; }
.fp-topbar .nav-spacer{ flex:1; }