/*
 * App-specific additions on top of the published `fernwell` npm package
 * (vendored into src/public/vendor/fernwell/, linked before this file in
 * partials/head.ejs). Everything here is a component the published system
 * doesn't ship — task/type pickers, the dashboard FAB, file-upload
 * dropzones, contact chips/avatars, the wizard stepper, tabs, the
 * toolbar/filter-pill row, and a handful of extra button/tag variants —
 * plus a couple of unscoped global tweaks (link color, the page-wide
 * loading topbar driven by /js/loading.js).
 *
 * Rules for anything added here:
 *   - Consume only the published --fw-* custom properties, never a
 *     hand-rolled value or a new custom token.
 *   - Any new class this file introduces is fw-prefixed too, so there's
 *     only ever one naming convention in the app, not two.
 *   - No `.fernwell` (or any other) ancestor scoping — plain, unscoped
 *     selectors, matching the published package's own convention.
 *   - Before adding an override for a real fw-* component class, check
 *     the vendored fernwell.css first — most component states (open,
 *     active, disabled, locked, etc.) are already handled there via the
 *     shared `is-*` state-class convention.
 */

/* Fernwell's own fw-root reset only sets `color: inherit` on <a> (so it
   never fights a more specific rule) — this app wants a colored,
   underline-on-hover default for plain text links, so it's opted in here
   via :where() (zero specificity) rather than a bare `a` selector, so it
   still loses cleanly to any real component style (e.g. .fw-btn, .fw-nav
   links) applied to an anchor. */
:where(.fw-root a) {
  color: var(--fw-secondary);
  font-weight: 600;
  text-decoration: none;
}

:where(.fw-root a):hover {
  text-decoration: underline;
}

/* Lets _task_type_picker.ejs wrap its own markup in a scoping element (so a
   page can include it more than once without id/class-lookup collisions)
   with zero effect on layout — children render exactly as if this wrapper
   weren't there. */

.fw-task-picker-scope {
  display: contents;
}

.fw-subtitle {
  font-size: 14px;
  color: var(--fw-text-soft);
}

/* ---- auth page shell ---- */

.fw-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fw-sp-5);
}

.fw-auth-shell .fw-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--fw-sp-4);
}

.fw-auth-shell .fw-field {
  max-width: none;
}

/* ---- app page shell ---- */

.fw-page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--fw-sp-6) var(--fw-sp-5) var(--fw-sp-8);
}

.fw-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fw-sp-4);
  margin-bottom: var(--fw-sp-5);
  flex-wrap: wrap;
}

/* ---- list-row-group: a checklist's .list-row plus its own items, each
   with an "Edit dependencies" action — see project.ejs's Checklists/Tasks
   tabs. ---- */

.fw-list-row-group + .fw-list-row-group {
  margin-top: var(--fw-sp-3);
}

.fw-list-row-group .fw-list-row + .fw-list-row {
  margin-top: 0;
}

/* ---- file list (reference documents, uploaded files) ---- */

.fw-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- disclosure-field (boxed variant of .disclosure above, for a
   disclosure that should read as a form-field trigger rather than inline
   link text — used by the Add-document modal's "Link tasks" picker). ---- */

.fw-disclosure-field > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  background: var(--fw-surface);
  padding: 10px var(--fw-sp-4);
  color: var(--fw-text);
  font-weight: 400;
  font-size: 14px;
}

.fw-disclosure-field > summary:hover {
  border-color: var(--fw-secondary);
  text-decoration: none;
}

.fw-disclosure-field .fw-disclosure-body {
  max-height: 220px;
  overflow-y: auto;
  gap: 6px;
}

/* ---- expand-pill (collapsed "+ Add instructions" / "+ Add details" pills
   and the bordered box they expand into — task-type picker only) ---- */

.fw-expand-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fw-expand-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--fw-r-full);
  border: 1.5px dashed var(--fw-bg-dim);
  background: transparent;
  color: var(--fw-secondary);
  font-family: var(--fw-font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.fw-expand-pill:hover {
  background: var(--fw-bg);
}

.fw-expand-pill svg {
  width: 13px;
  height: 13px;
}

.fw-expand-pill-badge {
  background: var(--fw-secondary);
  color: var(--fw-surface);
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--fw-r-full);
}

.fw-expand-block {
  display: none;
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-3) var(--fw-sp-4);
  margin-bottom: var(--fw-sp-3);
}

.fw-expand-block.fw-open {
  display: block;
}

.fw-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fw-sp-2);
}

.fw-expand-head .fw-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fw-text);
}

.fw-expand-head button {
  border: none;
  background: transparent;
  color: var(--fw-text-soft);
  cursor: pointer;
  padding: 2px;
  display: flex;
}

.fw-expand-head button:hover {
  color: var(--fw-danger);
}

/* Without an explicit size, an SVG with only a viewBox collapses to 0x0 as
   a flex item (no intrinsic width/height for the flex sizing algorithm to
   fall back on). */

.fw-expand-head button svg {
  width: 14px;
  height: 14px;
}

.fw-expand-block.fw-locked .fw-expand-head button {
  opacity: 0;
  pointer-events: none;
}

/* A locked (approval-forced-open) section can still be collapsed as long
   as it's currently empty — see updateInstructionsLockCollapsible/
   updateDetailsLockCollapsible in _task_type_picker.ejs. */

.fw-expand-block.fw-locked.fw-locked-collapsible .fw-expand-head button {
  opacity: 1;
  pointer-events: auto;
}

.fw-or-divider {
  display: none;
  align-items: center;
  gap: var(--fw-sp-3);
  margin: -2px 0 var(--fw-sp-3);
}

.fw-or-divider.fw-visible {
  display: flex;
}

.fw-or-divider::before,
.fw-or-divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--fw-bg-dim);
}

.fw-or-divider span {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--fw-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fw-approval-requirement {
  display: none;
  align-items: flex-start;
  gap: var(--fw-sp-2);
  padding: 10px 14px;
  background: var(--fw-info-bg);
  border-radius: var(--fw-r-sm);
  margin-bottom: var(--fw-sp-4);
  font-size: 12.5px;
  color: var(--fw-text);
  line-height: 1.5;
}

.fw-approval-requirement.fw-visible {
  display: flex;
}

.fw-approval-requirement svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--fw-info);
}

.fw-list-row-progress {
  font-family: var(--fw-font-mono);
  font-size: 12px;
  color: var(--fw-text-soft);
}

/* "Can't do this?" trigger on a public checklist item card — deliberately
   quiet (no border, smaller centered text with a small flag icon) so it
   doesn't compete with the item's real action button above it; turns coral
   on hover as a warning cue, and skips the base .btn hover-lift since a
   full-width low-emphasis button shouldn't visually pop the way a primary
   action does. */

.fw-btn-flag {
  background: transparent;
  border: none;
  color: var(--fw-text-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  gap: 6px;
  justify-content: center;
}

.fw-btn-flag:hover {
  background: var(--fw-danger-bg);
  color: var(--fw-danger);
  transform: none;
}

.fw-btn-flag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.fw-field input.fw-error,
.fw-field textarea.fw-error {
  border-color: var(--fw-danger);
}

/* Containing block for the absolutely positioned show/hide toggle button in
   partials/password_field.ejs. Kept as its own class (rather than folded
   into that partial's overridable `style` local) so a caller's spacing
   override can't accidentally drop it. */
.fw-password-field {
  position: relative;
}

.fw-required-mark {
  color: var(--fw-danger);
  font-weight: 700;
  margin-left: 3px;
}

/* ---- autocomplete / combobox ---- */

.fw-combobox-wrap {
  position: relative;
}

/* ---- checkbox with a title + secondary line (e.g. locked/upgrade copy) ---- */

.fw-checkbox-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--fw-text-soft);
  margin-top: 1px;
}

.fw-checkbox.is-locked {
  cursor: not-allowed;
}

/* ---- source toggle (existing contact vs. enter manually) ---- */

.fw-source-toggle {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--fw-bg);
  border-radius: var(--fw-r-md);
}

.fw-source-btn {
  flex: 1;
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 10px;
  border-radius: calc(var(--fw-r-md) - 5px);
  border: none;
  background: transparent;
  color: var(--fw-text-soft);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.fw-source-btn.fw-active {
  background: var(--fw-surface);
  color: var(--fw-text);
  box-shadow: var(--fw-shadow-sm);
}

.fw-source-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.fw-source-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.fw-source-btn:disabled:hover {
  background: transparent;
}

/* ---- selected contact chip (shown after picking from the combobox) ---- */

.fw-selected-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  background: var(--fw-bg);
}

.fw-selected-contact .fw-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fw-secondary);
  color: var(--fw-surface);
  font-family: var(--fw-font-display);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Internal-assignee variant of the chip avatar — same squared/marigold
   treatment as .row-avatar.internal, for a team-member pick instead of a
   contact. */

.fw-selected-contact .fw-avatar.fw-internal {
  border-radius: var(--fw-r-sm);
  background: var(--fw-primary);
  color: var(--fw-on-primary);
}

.fw-selected-contact .fw-sc-text {
  flex: 1;
  min-width: 0;
}

.fw-selected-contact .fw-sc-name {
  font-weight: 700;
  font-size: 14px;
}

.fw-selected-contact .fw-sc-email {
  font-size: 12px;
  color: var(--fw-text-soft);
}

.fw-selected-contact .fw-sc-clear {
  width: 30px;
  height: 30px;
  border-radius: var(--fw-r-sm);
  border: none;
  background: transparent;
  color: var(--fw-text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-selected-contact .fw-sc-clear:hover {
  background: var(--fw-surface);
  color: var(--fw-text);
}

/* ---- field block (icon + title/description + trailing control) ---- */

.fw-field-block {
  display: flex;
  align-items: flex-start;
  gap: var(--fw-sp-3);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-4);
  background: var(--fw-bg);
}

.fw-field-block .fw-fb-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fw-secondary);
}

.fw-field-block .fw-fb-icon svg {
  width: 17px;
  height: 17px;
}

.fw-field-block .fw-fb-text {
  flex: 1;
  min-width: 0;
}

.fw-field-block .fw-fb-title {
  font-weight: 700;
  font-size: 14px;
}

.fw-field-block .fw-fb-desc {
  font-size: 12px;
  color: var(--fw-text-soft);
  margin-top: 2px;
  line-height: 1.5;
}

.fw-field-block .fw-toggle {
  margin-top: 2px;
}

/* ---- type picker (card grid used to choose how a task is completed) ---- */

.fw-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .fw-type-grid {
    grid-template-columns: 1fr;
  }
}

.fw-type-card {
  position: relative;
  text-align: left;
  cursor: pointer;
  padding: var(--fw-sp-4);
  border-radius: var(--fw-r-md);
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.fw-type-card:hover {
  border-color: var(--fw-secondary);
}

.fw-type-card.fw-active {
  border-color: var(--fw-secondary);
  background: var(--fw-bg);
  box-shadow: 0 0 0 1.5px var(--fw-secondary) inset;
}

.fw-type-card .fw-tc-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-info-bg);
  color: var(--fw-info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-type-card.fw-active .fw-tc-icon {
  background: var(--fw-secondary);
  color: var(--fw-surface);
}

.fw-type-card .fw-tc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fw-text);
}

.fw-type-card .fw-tc-desc {
  font-size: 12px;
  color: var(--fw-text-soft);
  line-height: 1.45;
}

.fw-type-card .fw-tc-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-type-card.fw-active .fw-tc-check {
  background: var(--fw-primary);
  border-color: var(--fw-primary);
}

.fw-type-card .fw-tc-check svg {
  width: 10px;
  height: 10px;
  opacity: 0;
}

.fw-type-card.fw-active .fw-tc-check svg {
  opacity: 1;
}

/* ---- content-type picker (compact 4-up icon+label grid, used by the
   Add-document modal's Content field — see
   partials/_document_content_picker.ejs). A lighter sibling of
   .type-grid/.type-card above: needs 4 options with no explanatory copy
   and no checkmark badge, so padding/icon size are smaller and
   .tc-desc/.tc-check have no equivalent here. */

.fw-content-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 480px) {
  .fw-content-type-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fw-content-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  padding: var(--fw-sp-3) var(--fw-sp-2);
  border-radius: var(--fw-r-md);
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.fw-content-type-btn:hover {
  border-color: var(--fw-secondary);
}

.fw-content-type-btn.fw-active {
  border-color: var(--fw-secondary);
  background: var(--fw-bg);
  box-shadow: 0 0 0 1.5px var(--fw-secondary) inset;
}

.fw-content-type-btn .fw-ct-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-info-bg);
  color: var(--fw-info);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-content-type-btn.fw-active .fw-ct-icon {
  background: var(--fw-secondary);
  color: var(--fw-surface);
}

.fw-content-type-btn .fw-ct-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fw-text);
}

/* ---- subpanel (answer-type picker nested under a task type) ---- */

.fw-subpanel {
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-4);
  background: var(--fw-bg);
}

.fw-subpanel-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fw-text);
  margin-bottom: 10px;
}

.fw-answer-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fw-answer-pill {
  font-family: var(--fw-font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--fw-r-full);
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  color: var(--fw-text-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.fw-answer-pill.fw-active {
  background: var(--fw-secondary);
  border-color: var(--fw-secondary);
  color: var(--fw-surface);
}

.fw-answer-pill:hover:not(.fw-active) {
  border-color: var(--fw-text-soft);
  color: var(--fw-text);
}

/* ---- added task row (compact, icon-led — task builder's own running list) ---- */

.fw-added-task-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: var(--fw-sp-3) var(--fw-sp-4);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  background: var(--fw-surface);
  margin-bottom: 8px;
}

.fw-added-task-row.fw-dragging {
  opacity: 0.4;
}

.fw-drag-handle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  margin: 0 -4px 0 -6px;
  border: none;
  border-radius: 0;
  background: none;
  font: inherit;
  color: var(--fw-text-soft);
  cursor: grab;
}

/* Firefox draws its own dotted inner focus ring on buttons regardless of
   the appearance reset above — this is the standard way to remove it. */

.fw-drag-handle::-moz-focus-inner {
  border: 0;
}

.fw-drag-handle:hover,
.fw-drag-handle:focus-visible {
  color: var(--fw-text);
}

.fw-drag-handle:focus-visible {
  outline: 2px solid var(--fw-primary-hover);
  outline-offset: 1px;
}

.fw-drag-handle:active {
  cursor: grabbing;
}

.fw-drag-handle svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* A task's own reference document (added-task-row's optional third row) —
   reuses .selected-file/.doc-icon/.remove-file (see the client-facing
   upload dropzone) as a full-width strip instead of their usual boxed card,
   plus the inline dropzone (.row-attach-panel) opened by the row's paperclip
   button to attach one without reopening the draft form above. */

.fw-added-task-row .fw-selected-file,
.fw-added-task-row .fw-row-attach-panel {
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1.5px dashed var(--fw-bg-dim);
}

.fw-added-task-row .fw-selected-file {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.fw-icon-btn.fw-has-attachment {
  color: var(--fw-success);
}

.fw-added-task-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-info-bg);
  color: var(--fw-info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-added-task-icon svg {
  width: 14px;
  height: 14px;
}

.fw-added-task-text {
  flex: 1;
  min-width: 0;
}

.fw-added-task-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fw-text);
}

.fw-added-task-type {
  font-size: 12px;
  color: var(--fw-text-soft);
}

.fw-added-task-tools {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ---- project wizard: step progress, inline add-row forms, avatar variant ----
   Rows themselves reuse .added-task-row/.added-task-text/.added-task-name/
   .added-task-type/.added-task-tools/.icon-btn from the task builder above —
   only the avatar (.row-avatar, a circular/squared initials badge in place
   of .added-task-icon's fixed glyph) and the "waits on X" indicator (plain
   .tag.tag-info, already used elsewhere) are new per-row pieces. */

.fw-stepper {
  margin-bottom: var(--fw-sp-6);
}

.fw-stepper-track {
  display: flex;
  gap: 6px;
}

.fw-stepper-seg {
  flex: 1;
  height: 5px;
  border-radius: var(--fw-r-full);
  background: var(--fw-bg-dim);
  overflow: hidden;
}

.fw-stepper-seg.fw-done {
  background: var(--fw-secondary);
}

.fw-stepper-seg.fw-active {
  background: var(--fw-primary);
}

.fw-stepper-label-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--fw-font-mono);
  font-size: 12px;
  color: var(--fw-text-soft);
}

.fw-stepper-label-row .fw-current {
  color: var(--fw-secondary);
  font-weight: 600;
}

.fw-add-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: var(--fw-sp-5);
  padding-bottom: var(--fw-sp-5);
  border-bottom: 1.5px dashed var(--fw-bg-dim);
}

.fw-add-form.fw-two-col {
  grid-template-columns: 1fr 1fr auto;
}

@media (max-width: 680px) {
  .fw-add-form {
    grid-template-columns: 1fr 1fr;
  }

  .fw-add-form.fw-two-col {
    grid-template-columns: 1fr;
  }
}

.fw-icon-btn-add {
  height: 44px;
  width: 44px;
  border-radius: var(--fw-r-sm);
  border: none;
  background: var(--fw-secondary);
  color: var(--fw-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease;
}

.fw-icon-btn-add:hover {
  background: var(--fw-secondary-hover);
}

.fw-icon-btn-add svg {
  width: 16px;
  height: 16px;
}

.fw-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fw-secondary);
  color: var(--fw-surface);
  font-family: var(--fw-font-display);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Internal-task assignee variant — squared and marigold, echoing
   .added-task-icon's shape, to read visually distinct from a client's
   circular plum avatar at a glance. */

.fw-row-avatar.fw-internal {
  background: var(--fw-primary);
  color: var(--fw-on-primary);
  border-radius: var(--fw-r-sm);
}

.fw-empty-hint {
  font-size: 13px;
  color: var(--fw-text-soft);
  padding: var(--fw-sp-4);
  text-align: center;
  border: 1.5px dashed var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
}

.fw-tag-success {
  background: var(--fw-success-bg);
  color: var(--fw-success);
}

.fw-tag-muted {
  background: var(--fw-bg-dim);
  color: var(--fw-text-soft);
}

/* ---- nav ---- */

.fw-nav-header {
  position: sticky;
  top: 8px;
  z-index: 50;
  background: var(--fw-secondary);
  border-radius: var(--fw-r-lg);
  padding: var(--fw-sp-4) var(--fw-sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--fw-shadow-md);
}

.fw-nav-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fw-nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* `.fw-nav-dropdown` positions itself relative to the nearest
   positioned ancestor, which without this is `.fw-nav-header` itself (the
   only other positioned element up the tree) — so the account menu drops
   from the bottom of the whole header instead of the avatar. `.fw-org-switcher`
   below sidesteps this the same way, with its own tight `position: relative`
   wrapper around just its trigger. */
.fw-nav-right {
  position: relative;
}

/* `.fw-nav-avatar` ships `cursor:default` with no hover — it's meant
   as a plain decorative avatar chip there, but this app always
   uses it as the account-menu trigger button, so it needs the same
   affordance as the other nav toggles below. */
.fw-nav-avatar {
  cursor: pointer;
  transition: background var(--fw-motion-fast) var(--fw-motion-ease);
}

.fw-nav-avatar:hover {
  background: var(--fw-primary-hover);
}

.fw-nav-avatar:focus-visible {
  outline: none;
  box-shadow: var(--fw-focus-ring);
}

/* ---- org switcher (button + popover, wired via fernwell's `nav` enhancer
   ([data-fw-nav-toggle]) like the account avatar menu — see the <script>
   at the bottom of this partial) ---- */

.fw-org-switcher {
  position: relative;
}

.fw-org-switcher-trigger {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--fw-font-body);
  padding: 0 4px;
  margin-left: -4px;
  border-radius: var(--fw-r-sm);
  border: none;
  background: none;
}

.fw-org-switcher-trigger:hover {
  color: rgba(255, 255, 255, 0.9);
}

.fw-org-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 240px;
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-lg);
  box-shadow: var(--fw-shadow-lg);
  padding: var(--fw-sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.fw-org-switcher-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fw-org-switcher-menu form {
  margin: 0;
}

.fw-org-switcher-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--fw-text);
  font-family: var(--fw-font-body);
  font-size: 14px;
  border: none;
  border-radius: var(--fw-r-sm);
  padding: 10px 12px;
  cursor: pointer;
}

.fw-org-switcher-item:hover {
  background: var(--fw-bg);
}

.fw-org-switcher-item--current {
  color: var(--fw-text-soft);
  cursor: pointer;
}

.fw-org-switcher-item--current:hover {
  background: none;
}

.fw-org-switcher-new {
  display: flex;
  gap: var(--fw-sp-2);
  border-top: 1.5px solid var(--fw-bg-dim);
  margin-top: var(--fw-sp-2);
  padding-top: var(--fw-sp-2);
}

.fw-org-switcher-new input {
  flex: 1;
  min-width: 0;
  font-family: var(--fw-font-body);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--fw-r-sm);
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  color: var(--fw-text);
  outline: none;
}

.fw-org-switcher-new button {
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--fw-r-sm);
  border: none;
  background: var(--fw-secondary);
  color: var(--fw-surface);
  cursor: pointer;
}

/* compact, right-aligned popover anchored under a single trigger (e.g. the
   account avatar), as opposed to the full-width mobile nav-links panel */

.fw-nav-dropdown--menu {
  left: auto;
  right: 0;
  min-width: 180px;
}

#org-name-container {
  width: 100%;
}

#org-name-form {
  width: 100%;
  display: flex;
  gap: var(--fw-sp-5);
}

#org-name-form .fw-field {
  width: 50%;
}

@media (max-width: 600px) {
  #org-name-form {
    flex-direction: column;
    gap: 8px;
  }

  #org-name-form .fw-field {
    width: 100%;
  }
}

/* ---- progress & loading (labeled/indeterminate track, spinners) ---- */

.fw-progress-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}

.fw-progress-label-row .fw-name {
  font-weight: 600;
  color: var(--fw-text);
}

.fw-progress-label-row .fw-pct {
  font-family: var(--fw-font-mono);
  color: var(--fw-text-soft);
}

.fw-progress-track {
  position: relative;
  height: 10px;
  border-radius: var(--fw-r-full);
  background: var(--fw-bg-dim);
  overflow: hidden;
}

/* ---- progress bar -> "mark complete" CTA, once every item is done ---- */

.fw-complete-cta {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--fw-r-full);
  background: var(--fw-success);
  color: var(--fw-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: var(--fw-shadow-success);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.fw-complete-cta:hover {
  background: var(--fw-success);
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.fw-complete-cta:active {
  transform: translateY(0);
}

.fw-complete-cta svg {
  flex-shrink: 0;
}

.fw-complete-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--fw-text-soft);
}

.fw-complete-caption svg {
  flex-shrink: 0;
}

/* ---- client progress (public checklist page's headline bar) — its own
   component rather than reusing .progress-track/.progress-fill above,
   which the staff dashboard's checklist detail page also relies on and
   which this page's label-above-a-gradient-track look would clash with. */

.fw-client-progress-block {
  margin: var(--fw-sp-6) 0;
}

.fw-client-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fw-client-progress-count {
  font-family: var(--fw-font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--fw-text);
}

.fw-client-progress-count .fw-n {
  color: var(--fw-secondary);
}

.fw-client-progress-pct {
  font-family: var(--fw-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fw-text-soft);
}

.fw-client-progress-track {
  height: 12px;
  border-radius: var(--fw-r-full);
  background: var(--fw-bg-dim);
  overflow: hidden;
}

.fw-client-progress-fill {
  height: 100%;
  border-radius: var(--fw-r-full);
  background: linear-gradient(90deg, var(--fw-primary-hover), var(--fw-primary));
  width: 0;
  transition: width 0.35s ease;
}

.fw-progress-track-fill.is-success {
  background: var(--fw-success);
}

.fw-progress-track-fill.fw-overdue {
  background: var(--fw-danger);
}

.fw-progress-track.is-indeterminate .fw-progress-track-fill {
  position: absolute;
  width: 40%;
  left: -40%;
  animation: indeterminate-slide 1.4s ease-in-out infinite;
}

/* ---- page-wide loading topbar (driven by /js/loading.js) ---- */

.fw-topbar-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

.fw-topbar {
  height: 100%;
  width: 0%;
  background: var(--fw-primary);
  box-shadow: 0 0 8px rgba(255, 193, 69, 0.6);
}

.fw-topbar.fw-running {
  animation: fw-topbar-progress 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.fw-topbar.fw-done {
  animation: none;
  width: 100%;
  background: var(--fw-success);
  transition: opacity 0.3s ease 0.15s;
}

.fw-topbar.fw-fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fw-topbar.fw-running {
    width: 100%;
    animation: pulse-opacity 1.2s ease-in-out infinite;
  }
}

.fw-content-fade {
  transition: opacity 0.18s ease;
}

.fw-content-fade.fw-swapping {
  opacity: 0.35;
}

.fw-spinner-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fw-sp-2);
  font-size: 13px;
  color: var(--fw-text-soft);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .fw-progress-track.is-indeterminate .fw-progress-track-fill {
    position: static;
    width: 100%;
    animation: pulse-opacity 1.2s ease-in-out infinite;
  }
}

@keyframes indeterminate-slide {
  0% {
    left: -40%;
    width: 40%;
  }
  50% {
    width: 60%;
  }
  100% {
    left: 100%;
    width: 40%;
  }
}

@keyframes fw-topbar-progress {
  0% {
    width: 0%;
  }
  20% {
    width: 30%;
  }
  60% {
    width: 55%;
  }
  85% {
    width: 78%;
  }
  100% {
    width: 92%;
  }
}

@keyframes pulse-opacity {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.fw-results-panel {
  position: relative;
}

.fw-results-panel-overlay {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  z-index: 10;
}

.fw-results-panel.is-loading .fw-results-panel-overlay {
  display: flex;
}

.fw-results-panel.is-loading > *:not(.fw-results-panel-overlay) {
  opacity: 0.5;
}

/* ---- client link row ---- */

.fw-link-row {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-3);
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-3) var(--fw-sp-4);
}

.fw-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--fw-success);
}

.fw-status-dot.fw-muted {
  background: var(--fw-text-soft);
}

.fw-link-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fw-link-main .fw-status-text {
  font-size: 12px;
  color: var(--fw-text-soft);
}

.fw-link-main .fw-url {
  font-family: var(--fw-font-mono);
  font-size: 13px;
  color: var(--fw-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fw-btn-copy {
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--fw-r-sm);
  padding: 8px 14px;
  border: 1.5px solid var(--fw-bg-dim);
  background: transparent;
  color: var(--fw-text);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 74px;
  justify-content: center;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.fw-btn-copy:hover {
  border-color: var(--fw-text-soft);
}

.fw-btn-copy.fw-copied {
  background: var(--fw-primary);
  border-color: var(--fw-primary);
  color: var(--fw-on-primary);
}

.fw-btn-copy svg {
  width: 13px;
  height: 13px;
}

/* ---- task row (checklist item, expandable detail) ---- */

.fw-task {
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-sm);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: var(--fw-shadow-sm);
}

.fw-task-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  transition: box-shadow 0.12s ease;
}

.fw-task:has(> .fw-task-toggle:hover),
.fw-task:has(> .fw-task-meta:hover) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fw-secondary) 35%, transparent);
}

.fw-task-toggle,
.fw-task-meta {
  min-height: 60px;
}

.fw-task-toggle {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-3);
  padding: 14px 0 14px var(--fw-sp-4);
  cursor: pointer;
}

.fw-task-header > .fw-task-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

/* The grip reuses .drag-handle (see the added-task-row rules above) but
   fills the row's full height here instead of a fixed 28px, and takes over
   the left inset .task-toggle normally carries so the two don't double up. */

.fw-task-header > .fw-drag-handle {
  align-self: stretch;
  height: auto;
  padding-left: var(--fw-sp-4);
  margin: 0;
}

.fw-task-header > .fw-drag-handle + .fw-task-toggle {
  padding-left: 6px;
}

/* purely a status indicator, mirrors the completed/pending state — not a
   real form control, so it's never focusable or interactive */

.fw-task-status-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-task-status-check svg {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.fw-task.fw-done .fw-task-status-check {
  background: var(--fw-primary);
  border-color: var(--fw-primary);
}

.fw-task.fw-done .fw-task-status-check svg {
  opacity: 1;
}

.fw-task .fw-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fw-task.fw-done .fw-title {
  text-decoration: line-through;
  color: var(--fw-text-soft);
  font-weight: 500;
}

.fw-type-chip {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  color: var(--fw-text-soft);
  background: var(--fw-bg);
  padding: 4px 10px;
  border-radius: var(--fw-r-full);
  flex-shrink: 0;
  white-space: nowrap;
}

.fw-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fw-sp-3);
  flex-shrink: 0;
  padding: 14px var(--fw-sp-4) 14px var(--fw-sp-3);
}

.fw-task .fw-actions {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-2);
  flex-shrink: 0;
}

/* below 600px: split the task header into two rows so the title isn't
   crowded by the type/status chips and action buttons */

@media (max-width: 600px) {
  .fw-task-toggle-wrap,
  .fw-task-header > .fw-task-toggle {
    flex-basis: 100%;
  }

  .fw-task-toggle {
    padding-bottom: 0;
  }

  .fw-task-meta {
    flex-basis: 100%;
    padding-top: 0;
    padding-left: calc(var(--fw-sp-4) + 30px); /* Approximate size of the checkbox element*/
  }
}

.fw-task .fw-detail {
  padding: var(--fw-sp-4) var(--fw-sp-4) var(--fw-sp-4) 46px;
}

.fw-task .fw-detail p {
  margin: 0 0 var(--fw-sp-3);
  font-size: 13px;
  color: var(--fw-text-soft);
  max-width: 56ch;
}

.fw-task .fw-detail p span {
  font-weight: 600;
}

.fw-task .fw-detail p:last-child {
  margin-bottom: 0;
}

.fw-task .fw-detail .fw-extra {
  font-size: 13px;
  background: var(--fw-bg);
  border-radius: var(--fw-r-sm);
  padding: 10px 12px;
  margin-bottom: var(--fw-sp-3);
}

.fw-task .fw-detail .fw-extra .fw-k {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  color: var(--fw-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.fw-task .fw-detail .fw-extra-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fw-sp-2);
}

.fw-task .fw-detail .fw-extra-value .fw-type-chip {
  background: var(--fw-surface);
  border: 1px solid var(--fw-bg-dim);
}

.fw-task .fw-detail .fw-extra:last-child {
  margin-bottom: 0;
}

.fw-task .fw-revert-form {
  padding: 0 var(--fw-sp-4) var(--fw-sp-4) 46px;
}

/* ---- modal form layout (optional-label hint) ---- */

.fw-field label .fw-opt {
  font-weight: 500;
  color: var(--fw-text-soft);
}

.fw-confirm-dialog-items {
  list-style: none;
  margin: var(--fw-sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.fw-confirm-dialog-items li {
  font-size: 13px;
}

.fw-confirm-dialog-items a {
  color: var(--fw-secondary);
  font-weight: 600;
  text-decoration: none;
}

.fw-confirm-dialog-items a:hover {
  text-decoration: underline;
}

.fw-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--fw-sp-3);
  align-items: center;
  margin-top: var(--fw-sp-2);
  padding-top: var(--fw-sp-5);
  border-top: 1.5px solid var(--fw-bg-dim);
}

#quick-task-overlay .fw-modal {
  max-width: 600px;
}

body.drawer-open {
  overflow: hidden;
}

.fw-toast.fw-show {
  transform: translateY(0);
  opacity: 1;
}

/* ---- reference documents ---- */

.fw-docs-card {
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-lg);
  box-shadow: var(--fw-shadow-sm);
  overflow: hidden;
}

.fw-docs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fw-sp-4) var(--fw-sp-4) var(--fw-sp-3);
}

.fw-docs-head .fw-title {
  font-size: 14px;
  font-weight: 700;
}

.fw-btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--fw-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
}

.fw-btn-upload:hover {
  text-decoration: underline;
}

.fw-btn-upload svg {
  width: 14px;
  height: 14px;
}

.fw-doc-row {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-3);
  padding: var(--fw-sp-3) var(--fw-sp-4);
  border-top: 1.5px solid var(--fw-bg-dim);
  transition: background 0.12s ease;
}

.fw-doc-row:hover {
  background: var(--fw-bg);
}

.fw-doc-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-secondary-bg);
  color: var(--fw-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-doc-icon svg {
  width: 17px;
  height: 17px;
}

.fw-doc-main {
  flex: 1;
  min-width: 0;
}

.fw-doc-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fw-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fw-doc-meta {
  font-size: 12px;
  color: var(--fw-text-soft);
  margin-top: 1px;
}

.fw-doc-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.fw-doc-actions .fw-icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
}

.fw-doc-actions .fw-icon-btn:hover {
  background: var(--fw-surface);
  color: var(--fw-secondary);
}

.fw-doc-actions .fw-icon-btn.fw-danger:hover {
  color: var(--fw-danger);
}

.fw-docs-empty {
  padding: var(--fw-sp-5) var(--fw-sp-4);
  text-align: center;
}

.fw-docs-empty p {
  font-size: 13px;
  color: var(--fw-text-soft);
  margin: 0 0 var(--fw-sp-3);
}

/* ---- file-upload dropzone (client checklist page) ---- */

.fw-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  border: 1.5px dashed var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  background: var(--fw-bg);
  padding: var(--fw-sp-5) var(--fw-sp-4);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.fw-dropzone:hover,
.fw-dropzone.fw-dragover {
  border-color: var(--fw-primary-hover);
  background: #fffbf0;
}

.fw-dropzone .fw-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fw-text-soft);
  margin-bottom: 4px;
}

.fw-dropzone .fw-icon svg {
  width: 17px;
  height: 17px;
}

.fw-dropzone .fw-main-txt {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fw-text);
}

.fw-dropzone .fw-main-txt span {
  color: var(--fw-secondary);
  text-decoration: underline;
}

.fw-dropzone .fw-sub-txt {
  font-size: 12px;
  color: var(--fw-text-soft);
}

.fw-selected-file {
  display: none;
  align-items: center;
  gap: var(--fw-sp-3);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-3) var(--fw-sp-4);
}

.fw-selected-file.fw-show {
  display: flex;
}

.fw-remove-file {
  width: 28px;
  height: 28px;
  border-radius: var(--fw-r-sm);
  border: none;
  background: none;
  color: var(--fw-text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-remove-file:hover {
  background: var(--fw-bg);
  color: var(--fw-text);
}

.fw-remove-file svg,
.fw-remove-file .fw-icon {
  width: 15px;
  height: 15px;
}

/* fernwell's own vendored `.fw-icon-btn svg` rule only targets a raw <svg>
   child; match that same 15px sizing for the newer `.fw-icon` component so
   existing icon-buttons don't change size when their inline SVGs are
   swapped for `data-fw-icon`. */
.fw-icon-btn .fw-icon {
  width: 15px;
  height: 15px;
}

.fw-completed-row {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-3);
}

.fw-completed-row .fw-doc-icon {
  background: var(--fw-success-bg);
  color: var(--fw-success);
}

/* ---- public checklist page: per-task card done state ---- */

.fw-task-card.fw-done {
  background: var(--fw-success-bg);
  border-color: transparent;
}

/* A task blocked behind an unmet dependency — same dimming convention as
   .list-row.is-locked above; controls inside stay rendered (with the
   disabled attribute) rather than hidden, so the client can see what's
   still needed. */

.fw-task-card.is-locked {
  opacity: 0.6;
}

/* A task the client flagged as uncompletable — same coral tint used for a
   rejected approval's done-line, just applied to the whole card since this
   state replaces the action form entirely rather than sitting inline with it. */

.fw-task-card.is-flagged {
  background: var(--fw-danger-bg);
  border-color: var(--fw-danger);
}

/* Replaces the "Needed" tag once a task is done — a filled checkmark
   circle plus its past-tense label (Uploaded/Submitted/Confirmed), inline
   in the header rather than a separate badge with no text of its own. */

.fw-done-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fw-success);
  flex-shrink: 0;
}

.fw-done-line svg {
  width: 16px;
  height: 16px;
}

/* Rejected-approval variant of .done-line — same layout, coral instead of
   meadow. A rejection isn't a success, so it gets its own color rather than
   inheriting the green used by every other completed item type. */

.fw-done-line-rejected {
  color: var(--fw-danger);
}

/* Equal-width Approve/Reject pair for an approval item's decision form
   (public/checklist.ejs and dashboard/checklist.ejs's two drawer copies).
   .task-action-btn's own width:100% (used standalone for Upload/Submit/
   Mark complete elsewhere) is neutralized only inside this wrapper, so the
   global rule stays untouched everywhere else it's used. */

.fw-approve-reject-row {
  display: flex;
  gap: var(--fw-sp-2);
  margin-top: var(--fw-sp-4);
}

.fw-approve-reject-row .fw-task-action-btn,
.fw-approve-reject-row .fw-btn-danger {
  flex: 1;
  width: auto;
  margin-top: 0;
  justify-content: center;
}

/* Edit/Remove controls overlaid on a client-preview task-card in the
   checklist-creation wizard's review step (new_checklist.ejs) — the card
   itself is the same inert markup rendered for real on the public share
   page, so this toolbar is the only wizard-specific addition, sitting
   above the card's own header rather than absolutely positioned over it
   to avoid colliding with the "Needed" tag. */

.fw-review-task-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: var(--fw-sp-2);
}

/* A task's own reference document — a card-like row inside that task's
   card (see public/checklist.ejs), built from the same .doc-icon/.doc-main
   pieces the page-level "Reference documents" list (partials/
   reference_documents.ejs) uses, so the two only ever differ in that this
   one lives inside a single task instead of holding docs scoped to none. */

.fw-task-doc-chip {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-3);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-sm);
  padding: var(--fw-sp-3) var(--fw-sp-4);
  background: var(--fw-bg);
  margin-bottom: var(--fw-sp-4);
}

.fw-task-doc-chip .fw-icon-btn {
  margin-left: auto;
}

/* ---- quiet, de-emphasized link styled as a button (e.g. "Can't complete
   this?" — present but not competing with the real primary actions) ---- */

.fw-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fw-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--fw-text-soft);
  text-decoration: underline;
  cursor: pointer;
}

.fw-link-btn:hover {
  color: var(--fw-text);
}

/* A task's primary action (Upload / Submit / Mark complete) as a full-bleed
   bar across the bottom of its card — negative side/bottom margins cancel
   .card's own padding so it reaches every edge, with only the bottom
   corners rounded to match the card. Disabled (the default, until whatever
   the task actually asks for has happened) is a plain grey, not just a
   faded marigold, so "not ready yet" reads unmistakably at a glance. */

.fw-task-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--fw-sp-4);
  padding: 12px 20px;
  border: none;
  border-radius: var(--fw-r-md);
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: var(--fw-primary);
  color: var(--fw-on-primary);
  box-shadow: var(--fw-shadow-primary);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.fw-task-action-btn:hover:not(:disabled) {
  background: var(--fw-primary-hover);
}

.fw-task-action-btn:disabled {
  background: var(--fw-bg-dim);
  color: var(--fw-text-soft);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- dashboard toolbar (search + status filter pills) ---- */

.fw-toolbar {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-3);
  margin-bottom: var(--fw-sp-5);
  flex-wrap: nowrap;
}

@media (max-width: 600px) {
  .fw-toolbar {
    flex-wrap: wrap;
  }
}

.fw-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.fw-search .fw-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  pointer-events: none;
}

.fw-search input {
  width: 100%;
  font-family: var(--fw-font-body);
  font-size: 15px;
  padding: 11px 14px 11px 40px;
  border-radius: var(--fw-r-sm);
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  color: var(--fw-text);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.fw-search input::placeholder {
  color: var(--fw-text-soft);
  opacity: 1;
}

.fw-search input:focus {
  border-color: var(--fw-primary-hover);
  box-shadow: 0 0 0 4px rgba(255, 193, 69, 0.25);
}

.fw-status-filters {
  display: flex;
  gap: 2px;
  background: var(--fw-surface);
  padding: 4px;
  border-radius: var(--fw-r-full);
  border: 1.5px solid var(--fw-bg-dim);
  min-width: 0;
  /* Prevent wrapping and allow horizontal scrolling */
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Hide scrollbar on Firefox and IE/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

/* Applied by /js/drag-scroll.js while a click-drag pan is in progress. */

.fw-status-filters.fw-active-dragging {
  cursor: grabbing;
  user-select: none;
}

@media (max-width: 600px) {
  .fw-status-filters {
    width: 100%;
  }
}

/* Hide scrollbar on Chrome/Safari/Webkit */

.fw-status-filters::-webkit-scrollbar {
  display: none;
}

.fw-filter-pill {
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fw-text-soft);
  border-radius: var(--fw-r-full);
  cursor: pointer;
  font-family: var(--fw-font-body);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.fw-filter-pill:hover {
  color: var(--fw-text);
  text-decoration: none;
}

.fw-filter-pill.fw-active {
  background: var(--fw-primary);
  color: var(--fw-on-primary);
}

.fw-filter-pill .fw-count {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  opacity: 0.7;
}

/* ---- checklist list (dashboard results) ---- */

.fw-list {
  display: flex;
  flex-direction: column;
  gap: var(--fw-sp-1);
  margin-bottom: var(--fw-sp-5);
}

.fw-list-row-main .fw-spacer {
  flex: 1;
}

.fw-btn-page.fw-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fw-btn-sm {
  font-size: 13px;
  padding: 9px 14px;
}

/* ---- consolidated dashboard: section labels (All tab's "Projects" /
   "Checklists" headings) ---- */

.fw-sec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--fw-sp-6) 0 var(--fw-sp-3);
}

.fw-sec-row:first-child {
  margin-top: 0;
}

.fw-sec-label {
  font-family: var(--fw-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fw-text-soft);
}

.fw-sec-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--fw-secondary);
}

/* ---- project card (dashboard Projects tab / All tab preview) ---- */

.fw-project-card {
  display: block;
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-lg);
  box-shadow: var(--fw-shadow-sm);
  padding: var(--fw-sp-5);
  color: inherit;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.fw-project-card + .fw-project-card {
  margin-top: var(--fw-sp-3);
}

/* Only the clickable (non-readonly) variant is an <a> — matches .list-row's
   hover lift so checklist and project cards feel consistent. The read-only
   (non-clickable) <div> variant intentionally gets no hover feedback here,
   same as .list-row.is-locked below. */

a.fw-project-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--fw-shadow-md);
  text-decoration: none;
}

.fw-project-card.is-readonly {
  background: var(--fw-bg);
}

.fw-pc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fw-sp-4);
  flex-wrap: wrap;
}

.fw-pc-title {
  font-family: var(--fw-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.fw-pc-meta {
  font-size: 13px;
  color: var(--fw-text-soft);
  margin-top: 4px;
}

.fw-pc-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fw-pc-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--fw-sp-4) 0 6px;
  font-size: 13px;
  color: var(--fw-text-soft);
}

.fw-pc-progress-row .fw-pct {
  font-family: var(--fw-font-mono);
  font-weight: 700;
  color: var(--fw-text);
}

/* ---- pro upsell (dedicated Projects tab, free plan, no legacy projects) ---- */

.fw-upsell {
  background: linear-gradient(155deg, var(--fw-secondary) 0%, var(--fw-secondary-hover) 100%);
  border-radius: var(--fw-r-lg);
  padding: var(--fw-sp-6);
  color: var(--fw-surface);
  box-shadow: var(--fw-shadow-md);
}

.fw-upsell h3 {
  color: var(--fw-surface);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
}

.fw-upsell p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  max-width: 52ch;
}

.fw-upsell-features {
  list-style: none;
  margin: var(--fw-sp-5) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fw-upsell-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}

.fw-upsell-features li::before {
  content: "✓";
  color: var(--fw-primary);
  font-weight: 700;
}

.fw-upsell-actions {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-4);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .fw-upsell-features {
    grid-template-columns: 1fr;
  }
}

/* ---- inline upsell (compact banner — All tab preview, free plan) ---- */

.fw-upsell-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-sp-4);
  background: var(--fw-surface);
  border: 1.5px dashed var(--fw-bg-dim);
  border-radius: var(--fw-r-lg);
  padding: var(--fw-sp-4) var(--fw-sp-5);
  flex-wrap: wrap;
}

.fw-upsell-inline b {
  display: block;
  font-size: 14px;
  color: var(--fw-text);
}

.fw-upsell-inline span {
  font-size: 13px;
  color: var(--fw-text-soft);
}

/* ---- tabs: fernwell's Tabs component (.fw-tablist/.fw-tab/.fw-tabpanel)
   ships an underline style; this pill/segmented look is app-specific, so
   override its defaults here rather than accept the redesign. Markup and
   selection/keyboard behavior come from fernwell's `tabs` enhancer. ---- */

.fw-tablist {
  display: flex;
  gap: 4px;
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-full);
  padding: 4px;
  margin-bottom: var(--fw-sp-5);
  overflow-x: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

.fw-tab {
  font-family: var(--fw-font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 15px;
  border-radius: var(--fw-r-full);
  border: none;
  background: transparent;
  color: var(--fw-text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fw-tab[aria-selected="true"] {
  background: var(--fw-secondary);
  color: var(--fw-surface);
  border-color: transparent;
}

.fw-tab-count {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  opacity: 0.75;
}

/* ---- "what's next" callout (progress card's current-blocker sentence) ---- */

.fw-whats-next {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--fw-sp-4);
  padding-top: var(--fw-sp-4);
  border-top: 1.5px dashed var(--fw-bg-dim);
}

.fw-whats-next svg {
  width: 18px;
  height: 18px;
  color: var(--fw-primary-hover);
  flex-shrink: 0;
  margin-top: 1px;
}

.fw-whats-next-text {
  font-size: 13px;
  color: var(--fw-text-soft);
}

.fw-whats-next-text b {
  color: var(--fw-text);
  font-weight: 700;
}

/* ---- dependency chip picker ("Wait until" multi-select-with-chips) ----
   Originally page-scoped to new_project.ejs's item-add modal; promoted here
   once the project-detail page's Add-task/Add-trigger modals needed the
   same pattern (2 files now use it). */

.fw-dep-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: -6px 0 var(--fw-sp-3);
}

.fw-dep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--fw-r-full);
  background: var(--fw-info-bg);
  color: var(--fw-info);
}

.fw-dep-chip button {
  display: flex;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.fw-dep-chip button svg {
  width: 10px;
  height: 10px;
}

/* ---- document linked-task status dot (per-task indicator on a project
   document card — see partials/_document_card.ejs) ---- */

.fw-task-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--fw-bg-dim);
  flex-shrink: 0;
}

.fw-task-dot.fw-done {
  background: var(--fw-success);
  border-color: var(--fw-success);
}

/* ---- "waits on X" note (a locked row's dependency label — inline icon +
   text, shown as an extra .list-row-meta entry) ---- */

.fw-lock-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fw-lock-note svg {
  width: 11px;
  height: 11px;
}

/* ---- saved checklists (/saved) ---- */

.fw-sync-card {
  padding: var(--fw-sp-4) var(--fw-sp-5);
  display: flex;
  align-items: center;
  gap: var(--fw-sp-4);
}

.fw-sync-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-info-bg);
  color: var(--fw-info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-sync-icon svg {
  width: 19px;
  height: 19px;
}

.fw-sync-text {
  flex: 1;
  min-width: 0;
}

.fw-sync-text b {
  font-size: 14px;
  color: var(--fw-text);
  display: block;
}

.fw-sync-text span {
  font-size: 13px;
  color: var(--fw-text-soft);
}

.fw-sync-card .fw-btn {
  flex-shrink: 0;
}

.fw-sync-card.fw-synced {
  background: var(--fw-success-bg);
  border-color: transparent;
}

.fw-sync-card.fw-synced .fw-sync-icon {
  background: var(--fw-surface);
  color: var(--fw-success);
}

.fw-email-capture {
  display: none;
}

.fw-email-capture.fw-open {
  display: block;
}

.fw-email-row {
  display: flex;
  gap: var(--fw-sp-3);
}

.fw-email-row .fw-field {
  flex: 1;
  max-width: none;
}

.fw-saved-list {
  display: flex;
  flex-direction: column;
  gap: var(--fw-sp-3);
}

.fw-saved-item {
  padding: var(--fw-sp-4) var(--fw-sp-5);
  display: flex;
  align-items: center;
  gap: var(--fw-sp-4);
}

.fw-saved-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--fw-r-sm);
  background: var(--fw-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fw-secondary);
}

.fw-saved-icon svg {
  width: 19px;
  height: 19px;
}

.fw-saved-main {
  flex: 1;
  min-width: 0;
}

.fw-saved-title-row {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-2);
  flex-wrap: wrap;
}

.fw-saved-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fw-text);
}

.fw-saved-sub {
  font-size: 13px;
  color: var(--fw-text-soft);
  margin-top: 3px;
}

.fw-saved-progress {
  margin-top: var(--fw-sp-2);
  display: flex;
  align-items: center;
  gap: var(--fw-sp-2);
  max-width: 220px;
}

.fw-saved-track {
  flex: 1;
  height: 6px;
  border-radius: var(--fw-r-full);
  background: var(--fw-bg-dim);
  overflow: hidden;
}

.fw-saved-fill {
  height: 100%;
  border-radius: var(--fw-r-full);
  background: var(--fw-primary);
}

.fw-saved-fill.fw-done {
  background: var(--fw-success);
}

.fw-saved-pct {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  color: var(--fw-text-soft);
  flex-shrink: 0;
}

.fw-saved-right {
  display: flex;
  align-items: center;
  gap: var(--fw-sp-2);
  flex-shrink: 0;
}

/* Keep .page-header on one row when it holds the inline trigger, so the
   <h1> text wraps within its own shrinking width instead of the whole
   trigger dropping to a new line below it on narrow screens. Scoped with
   :has() (already used elsewhere in this file) so other .page-header usages
   — which still want normal wrap-to-new-line behavior for their action
   buttons — are unaffected. */

.fw-page-header:has(.fw-dash-fab-wrap--inline) {
  flex-wrap: nowrap;
}

.fw-page-header:has(.fw-dash-fab-wrap--inline) h1 {
  min-width: 0;
  overflow-wrap: break-word;
}

.fw-dash-fab-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.fw-dash-fab-wrap--inline {
  position: relative;
}

.fw-dash-fab-wrap--fixed {
  position: fixed;
  left: 50%;
  bottom: calc(var(--fw-sp-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
}

.fw-dc-fab {
  width: 58px;
  height: 58px;
  border-radius: var(--fw-r-full);
  background: var(--fw-primary);
  color: var(--fw-on-primary);
  border: none;
  box-shadow: var(--fw-shadow-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.fw-dash-fab-wrap--inline .fw-dc-fab {
  width: 44px;
  height: 44px;
}

.fw-dc-fab:hover,
.fw-dc-fab:focus-visible {
  background: var(--fw-primary-hover);
}

.fw-dc-fab svg {
  width: 22px;
  height: 22px;
  transition: transform 0.16s ease;
}

.fw-dash-fab-wrap--inline .fw-dc-fab svg {
  width: 18px;
  height: 18px;
}

.fw-dash-fab-wrap.fw-open .fw-dc-fab svg {
  transform: rotate(45deg);
}

.fw-dc-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-sp-3);
  pointer-events: none;
}

.fw-dc-menu .fw-dc-item {
  white-space: nowrap;
}

.fw-dash-fab-wrap--inline .fw-dc-menu {
  position: absolute;
  top: calc(100% + 10px);
  /* Centered under the trigger rather than anchored to either edge — the
     trigger's horizontal position in .page-header can vary (space-between
     vs. flex-start), so centering is the only anchor that stays "directly
     below" the button regardless of where it ends up sitting. */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  /* The menu is the wrap's only out-of-flow child, so the wrap itself is
     only ever as wide as the trigger button — without an explicit width
     here, shrink-to-fit sizing would be constrained by that narrow
     containing block and collapse the menu (wrapping each button's text). */
  width: max-content;
  max-width: min(420px, calc(100vw - 2 * var(--fw-sp-5)));
}

.fw-dash-fab-wrap--fixed .fw-dc-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  width: max-content;
  max-width: min(92vw, 480px);
}

/* .dc-item is a reveal-transition modifier layered onto the *existing*
   .btn / .btn-primary / .btn-secondary / .btn-ghost classes — it must not
   set color, background, border-radius, or padding. */

.fw-dc-menu .fw-dc-item {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.fw-dash-fab-wrap--inline .fw-dc-menu .fw-dc-item {
  transform: translateY(-8px) scale(0.96);
}

.fw-dash-fab-wrap.fw-open .fw-dc-menu {
  pointer-events: auto;
}

.fw-dash-fab-wrap.fw-open .fw-dc-menu .fw-dc-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* stagger the reveal, cascading outward from the fab */

.fw-dc-menu .fw-dc-item:nth-child(1) { transition-delay: 0ms; }

.fw-dc-menu .fw-dc-item:nth-child(2) { transition-delay: 40ms; }

.fw-dc-menu .fw-dc-item:nth-child(3) { transition-delay: 80ms; }

@media (prefers-reduced-motion: reduce) {
  .fw-dc-menu .fw-dc-item {
    transition: opacity 0.12s ease;
    transform: none !important;
  }

  .fw-dc-fab svg {
    transition: none;
  }
}

@media (max-width: 640px) {
  .fw-dash-fab-wrap--fixed {
    bottom: calc(var(--fw-sp-4) + env(safe-area-inset-bottom, 0px));
  }

  .fw-dash-fab-wrap--fixed .fw-dc-fab {
    width: 52px;
    height: 52px;
  }

  .fw-dash-fab-wrap--inline .fw-dc-menu {
    /* .page-header stays on one row at this width (the <h1> wraps instead),
       which leaves the trigger sitting close to the row's right edge —
       anchor the menu there and grow leftward instead of centering, or a
       centered menu can still run off the right edge of a narrow viewport. */
    left: auto;
    right: 0;
    transform: none;
    max-width: min(92vw, 340px);
  }
}

body:has(.fw-dash-fab-wrap--fixed) .fw-page {
  padding-bottom: calc(var(--fw-sp-8) + 74px);
}

/* ---- project detail: Tasks tab ---- */

.fw-task-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fw-sp-3);
  margin-bottom: var(--fw-sp-5);
}

.fw-task-stat-item {
  text-align: left;
  cursor: pointer;
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-3) var(--fw-sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.fw-task-stat-item:hover {
  border-color: var(--fw-text-soft);
  transform: translateY(-1px);
}

.fw-task-stat-item .fw-stat-value {
  font-family: var(--fw-font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--fw-text);
}

.fw-task-stat-item .fw-stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fw-text-soft);
}

.fw-task-row {
  display: flex;
  align-items: flex-start;
  gap: var(--fw-sp-3);
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-bg-dim);
  border-radius: var(--fw-r-md);
  padding: var(--fw-sp-3) var(--fw-sp-4);
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.fw-task-row:hover,
.fw-task-row:focus-visible {
  border-color: var(--fw-secondary);
}

.fw-task-row + .fw-task-row {
  margin-top: 8px;
}

.fw-task-row-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--fw-bg-dim);
  background: var(--fw-surface);
  flex-shrink: 0;
  margin-top: 2px;
}

.fw-task-row-checkbox.fw-checked {
  background: var(--fw-success);
  border-color: var(--fw-success);
}

.fw-task-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fw-task-row-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fw-text);
}

.fw-task-row-owner {
  font-size: 12px;
  font-weight: 600;
  color: var(--fw-text-soft);
}

.fw-task-row-blockers {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.fw-blocker-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--fw-r-full);
}

.fw-blocker-chip-trigger {
  background: var(--fw-info-bg);
  color: var(--fw-info);
}

.fw-blocker-chip-task-dep {
  background: var(--fw-warning-bg);
  color: var(--fw-primary-hover);
}

.fw-blocker-chip-document {
  background: var(--fw-secondary-bg);
  color: var(--fw-secondary);
}

.fw-blocker-chip-checklist {
  background: var(--fw-bg-dim);
  color: var(--fw-text-soft);
}

/* task detail drawer's "Waiting on"/"Unlocks next" lists — reuses .drawer
   itself (see the checklist item drawer above), just adds the row style */

.fw-dep-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fw-bg-dim);
}

.fw-dep-item:last-child {
  border-bottom: none;
}

.fw-dep-item.fw-done {
  color: var(--fw-success);
}

.fw-dep-item.fw-pending {
  color: var(--fw-text-soft);
}