/* =========================================================================
   LISTING & TRANSACTION CHECKLIST — TOOL-SPECIFIC STYLES
   Builds on the shared PorchLyte suite base in styles.css and reuses its
   tokens. Nothing here changes the shared components; it only adds the pieces
   this tool needs.
   ========================================================================= */

/* ---- Start screen: choose your checklist ---- */
.start-question {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 34px);
  color: var(--brown);
  margin: 8px 0 6px;
}
.start-sub { text-align: center; color: var(--text-soft); margin: 0 auto 30px; max-width: 520px; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.14s var(--ease), border-color 0.16s var(--ease), box-shadow 0.2s var(--ease);
}
.choice-card:hover { transform: translateY(-3px); border-color: var(--tan); box-shadow: 0 8px 26px rgba(43,31,27,0.09); }
.choice-illus { width: 128px; height: 112px; margin-bottom: 18px; }
.choice-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  color: var(--brown);
  margin: 0 0 10px;
}
.choice-desc { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; flex: 1; }
.choice-card .btn-primary { width: 100%; }

/* Illustration colors */
.il-roof { fill: var(--rust); }
.il-wall { fill: var(--brown); }
.il-door { fill: var(--tan); }
.il-win { fill: var(--cream); }
.il-board { fill: var(--white); stroke: var(--tan); stroke-width: 2.5; }
.il-clip { fill: var(--brown); }
.il-line { stroke: var(--border); stroke-width: 3.5; stroke-linecap: round; }
.il-line.rust { stroke: var(--rust); }
.il-check { stroke: var(--rust); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.il-key { fill: var(--rust); }
.il-key-ring { fill: none; stroke: var(--rust); stroke-width: 4; }
.il-cam { fill: var(--brown); }
.il-cam-lens { fill: var(--tan); }
.il-cal { fill: var(--white); stroke: var(--tan); stroke-width: 2.5; }
.il-cal-top { fill: var(--rust); }
.il-tag { fill: var(--rust); }
.il-post { stroke: var(--brown); stroke-width: 4; stroke-linecap: round; }

/* ---- Stepped form: progress indicator ---- */
.step-progress { margin: 0 0 26px; }
.step-progress-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.step-count { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--rust); }
.step-name { font-size: 14px; color: var(--text-soft); font-weight: 500; }
.step-bar { height: 8px; border-radius: var(--radius-pill); background: var(--tan); overflow: hidden; }
.step-fill { height: 100%; border-radius: var(--radius-pill); background: var(--rust); transition: width 0.35s var(--ease); }
.step-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.step-dot {
  font-size: 11.5px; color: var(--text-soft);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px 11px; cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.step-dot:hover { border-color: var(--tan); }
.step-dot.active { background: var(--rust); border-color: var(--rust); color: #fff; }
.step-dot.done { color: var(--brown); border-color: var(--tan); }
.step-dot.done::before { content: "✓ "; color: var(--rust); }
.step-dot.active.done::before { color: #fff; }

.form-step { display: none; }
.form-step.active { display: flex; flex-direction: column; gap: 18px; animation: fadein 0.3s var(--ease); }

.step-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
}
.btn-back {
  background: none; border: 1px solid var(--border); color: var(--brown);
  padding: 13px 22px; border-radius: var(--radius-md); cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn-back:hover { background: var(--white); border-color: var(--tan); }
.btn-back:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Checkbox pill grid (which-apply groups) ---- */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.check-grid .check-row { padding: 12px 14px; }
.check-grid .check-text { font-size: 14px; }

/* ---- Date grid ---- */
.date-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.date-cell { display: flex; flex-direction: column; gap: 6px; }
.date-cell > span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--text-soft); padding-left: 2px; }
input[type="date"], input[type="time"] { min-height: 48px; }

/* ---- Repeatable structured rows (conditions, contacts, services) ---- */
.builder-list { display: flex; flex-direction: column; gap: 14px; }
.builder-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; position: relative;
}
.builder-card .field-row { gap: 12px; }
.builder-card .field > span { font-size: 11px; }
.builder-remove {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-soft); cursor: pointer; font-size: 17px; line-height: 1;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.builder-remove:hover { background: var(--rust); color: #fff; border-color: var(--rust); }
.builder-card-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--rust); margin: 0 0 12px; }

/* ---- Special circumstances chips ---- */
.special-note { margin-top: 6px; }

/* =========================================================================
   RESULTS
   ========================================================================= */

/* ---- File Overview ---- */
.overview-card { background: var(--brown); color: #fff; border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-card); }
.overview-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 4px; }
.overview-type { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--tan); }
.overview-stage { font-size: 13px; color: rgba(255,255,255,0.8); }
.overview-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 4vw, 30px); color: #fff; margin: 4px 0 2px; line-height: 1.15; }
.overview-addr { color: rgba(255,255,255,0.82); font-size: 14.5px; margin: 0 0 18px; }
.overview-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.ov-stat { background: rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 12px 14px; }
.ov-stat-num { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #fff; line-height: 1; }
.ov-stat-num.warn { color: #f0b083; }
.ov-stat-label { font-size: 11.5px; color: rgba(255,255,255,0.72); margin-top: 5px; line-height: 1.35; }
.overview-next {
  margin: 18px 0 0; padding: 13px 16px; background: rgba(215,200,186,0.16);
  border-left: 3px solid var(--tan); border-radius: var(--radius-md);
  font-size: 14px; color: #fff;
}
.overview-next strong { color: var(--tan); font-weight: 600; }

/* ---- Section headings within results ---- */
.res-section-title {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--brown);
  margin: 6px 0 4px;
}
.res-section-sub { color: var(--text-soft); font-size: 14px; margin: 0 0 4px; }

/* ---- Next Best Move highlight ---- */
.nbm-card { background: #d7c8ba; color: var(--brown); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-card); }
.nbm-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--rust); margin: 0 0 8px; }
.nbm-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin: 0 0 8px; line-height: 1.25; color: var(--brown); }
.nbm-why { margin: 0 0 12px; font-size: 14.5px; color: #5f5349; line-height: 1.55; }
.nbm-step { font-size: 14px; color: var(--brown); background: #f5f0e9; border-radius: var(--radius-md); padding: 11px 14px; }
.nbm-step strong { color: var(--brown); }

/* ---- Today's priorities ---- */
.prio-list { display: flex; flex-direction: column; gap: 12px; }
.prio-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--rust);
  border-radius: var(--radius-md); padding: 15px 16px;
}
.prio-item.done { opacity: 0.55; border-left-color: var(--flow-net); }
.prio-check {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; cursor: pointer;
  border: 1.5px solid var(--tan); border-radius: 6px; background: var(--white); position: relative;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.prio-check:hover { border-color: var(--rust); }
.prio-item.done .prio-check { background: var(--flow-net); border-color: var(--flow-net); }
.prio-item.done .prio-check::after {
  content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.prio-main { flex: 1; }
.prio-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.prio-title { font-size: 15.5px; font-weight: 600; color: var(--brown); }
.prio-item.done .prio-title { text-decoration: line-through; }
.prio-why { margin: 0 0 6px; font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.prio-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-soft); }
.prio-meta .due { font-weight: 600; }
.prio-meta .due.overdue { color: var(--rust); }

/* ---- Badges (shared by priorities, checklist, calendar) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.badge.urgent { background: #f6e2d6; color: var(--rust); }
.badge.high { background: #f0e6da; color: #9a6a2f; }
.badge.normal { background: var(--cream); color: var(--text-soft); }
.badge.low { background: var(--cream); color: var(--tan); }
.badge.contract { background: var(--brown); color: var(--tan); }
.badge.overdue { background: var(--rust); color: #fff; }
.badge.client { background: #e7ddcf; color: #6f5a3f; }

/* ---- Master checklist ---- */
.checklist-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cl-progress-track { flex: 1; height: 10px; border-radius: var(--radius-pill); background: var(--tan); overflow: hidden; }
.cl-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--flow-net); transition: width 0.4s var(--ease); }
.cl-progress-label { font-size: 13.5px; color: var(--text-soft); font-weight: 600; white-space: nowrap; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.filter-chip {
  background: var(--white); border: 1px solid var(--border); color: var(--brown);
  padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.filter-chip:hover { border-color: var(--tan); }
.filter-chip.active { background: var(--brown); border-color: var(--brown); color: #fff; }
.filter-chip .count { opacity: 0.65; font-weight: 500; margin-left: 3px; }

.stage-group { margin-bottom: 22px; }
.stage-group-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--rust); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.stage-group-head .sg-count { color: var(--text-soft); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.stage-group.is-before .stage-group-head { color: var(--text-soft); }

.task-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--white); margin-bottom: 8px;
}
.task-row.done { background: #f8f5f0; opacity: 0.7; }
.task-row.na { opacity: 0.5; }
.task-check {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; cursor: pointer;
  border: 1.5px solid var(--tan); border-radius: 6px; background: var(--white); position: relative;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.task-check:hover { border-color: var(--rust); }
.task-row.done .task-check { background: var(--flow-net); border-color: var(--flow-net); }
.task-row.done .task-check::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.task-body { flex: 1; min-width: 0; }
.task-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.task-title { font-size: 14.5px; color: var(--brown); font-weight: 500; }
.task-row.done .task-title { text-decoration: line-through; color: var(--text-soft); }
.task-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--text-soft); }
.task-sub .due.overdue { color: var(--rust); font-weight: 600; }
.task-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.task-mini {
  background: none; border: 1px solid transparent; color: var(--text-soft);
  border-radius: var(--radius-sm); width: 30px; height: 30px; cursor: pointer; font-size: 13px; line-height: 1;
  transition: background 0.14s var(--ease), color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.task-mini:hover { background: var(--cream); color: var(--brown); border-color: var(--border); }
.task-mini.danger:hover { background: var(--rust); color: #fff; border-color: var(--rust); }
.empty-note { color: var(--text-soft); font-size: 14.5px; padding: 20px; text-align: center; background: var(--cream); border-radius: var(--radius-md); }

/* ---- Deadline calendar / timeline ---- */
.cal-list { display: flex; flex-direction: column; gap: 2px; }
.cal-row {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cal-row:last-child { border-bottom: none; }
.cal-date { flex: 0 0 auto; width: 92px; text-align: center; }
.cal-date-mon { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); font-weight: 600; }
.cal-date-day { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--brown); line-height: 1; }
.cal-row.is-today .cal-date-day { color: var(--rust); }
.cal-row.is-overdue .cal-date-day { color: var(--rust); }
.cal-body { flex: 1; min-width: 0; }
.cal-title { font-size: 14.5px; color: var(--brown); font-weight: 500; }
.cal-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.cal-marker { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--tan); }
.cal-row.is-today .cal-marker, .cal-row.is-overdue .cal-marker { background: var(--rust); }
.cal-row.is-contract .cal-marker { background: var(--brown); }

/* ---- Trackers (documents, vendors, contacts) ---- */
.tracker { display: flex; flex-direction: column; gap: 8px; }
.tracker-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white);
}
.tracker-name { font-size: 14.5px; color: var(--brown); font-weight: 600; flex: 1 1 180px; }
.tracker-name .tracker-role { display: block; font-size: 12.5px; color: var(--text-soft); font-weight: 400; margin-top: 2px; }
.tracker-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-soft); flex: 2 1 200px; }
.tracker-copy {
  background: none; border: 1px solid var(--border); color: var(--rust);
  border-radius: var(--radius-pill); padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.tracker-copy:hover { background: var(--cream); border-color: var(--tan); }
.tracker-copy.is-copied { background: var(--rust); color: #fff; border-color: var(--rust); }
.doc-status {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--cream); color: var(--text-soft);
}
.doc-status.received, .doc-status.reviewed, .doc-status.signed, .doc-status.complete, .doc-status.booked { background: #e2ebdb; color: var(--flow-net); }
.doc-status.missing, .doc-status.not-started { background: #f6e2d6; color: var(--rust); }
.doc-status.requested, .doc-status.contacted, .doc-status.in-progress, .doc-status.waiting { background: #f0e6da; color: #9a6a2f; }

/* ---- Client communication plan ---- */
.comm-list { display: flex; flex-direction: column; gap: 14px; }
.comm-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.comm-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 16px; background: var(--cream); border-bottom: 1px solid var(--border);
}
.comm-timing { font-size: 13px; font-weight: 600; color: var(--brown); flex: 1 1 auto; }
.comm-purpose { font-size: 12.5px; color: var(--text-soft); }
.comm-channel { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--brown); color: var(--tan); }
.comm-body { padding: 14px 16px; }
.comm-subject { font-size: 13.5px; color: var(--brown); margin: 0 0 8px; }
.comm-subject strong { color: var(--text-soft); font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
.comm-message { font-size: 14.5px; color: var(--brown); line-height: 1.6; white-space: pre-wrap; margin: 0; }
.comm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 14px; }
.comm-followup { font-size: 12.5px; color: var(--text-soft); }
.comm-followup strong { color: var(--brown); }

/* ---- Weekly summary tabs ---- */
.wk-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wk-tab {
  background: var(--white); border: 1px solid var(--border); color: var(--brown);
  padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.wk-tab:hover { border-color: var(--tan); }
.wk-tab.active { background: var(--rust); border-color: var(--rust); color: #fff; }
.wk-internal { display: flex; flex-direction: column; gap: 8px; }
.wk-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--brown); line-height: 1.5; }
.wk-line::before { content: "•"; color: var(--rust); font-weight: 700; flex: 0 0 auto; }
.wk-client { font-size: 15px; color: var(--brown); line-height: 1.65; white-space: pre-wrap; }

/* ---- Before you move forward (risks) ---- */
.risk-list { display: flex; flex-direction: column; gap: 10px; }
.risk-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; background: #f6efe7; border-left: 3px solid var(--flow-brokerage); border-radius: var(--radius-md); }
.risk-icon { flex: 0 0 auto; color: var(--flow-brokerage); font-weight: 700; margin-top: 1px; }
.risk-main { flex: 1; }
.risk-q { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--brown); }
.risk-note { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }
.risk-clear { display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: #e2ebdb; border-radius: var(--radius-md); font-size: 14.5px; color: var(--flow-net); }

/* ---- Loader: clipboard building a checklist ---- */
.ck-loader { display: flex; justify-content: center; margin: 0 auto 30px; }
.ck-svg { width: 210px; height: auto; overflow: visible; }
.ck-clip-back { fill: var(--brown); }
.ck-clip-paper { fill: var(--white); stroke: var(--border); stroke-width: 2; }
.ck-clip-clasp { fill: var(--tan); }
.ck-item-box { fill: none; stroke: var(--tan); stroke-width: 2.5; }
.ck-item-line { stroke: var(--border); stroke-width: 4; stroke-linecap: round; }
.ck-item-check { stroke: var(--rust); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ck-cal { fill: var(--white); stroke: var(--tan); stroke-width: 2.5; }
.ck-cal-top { fill: var(--rust); }
.ck-cal-dot { fill: var(--rust); }
.ck-sign-post { stroke: var(--brown); stroke-width: 3.5; stroke-linecap: round; }
.ck-sign { fill: var(--rust); }
.ck-key { fill: var(--rust); }
.ck-key-ring { fill: none; stroke: var(--rust); stroke-width: 4; }
.ck-doc { fill: var(--white); stroke: var(--tan); stroke-width: 2.5; }
.ck-coin { fill: var(--tan); stroke: var(--rust); stroke-width: 2.5; }

/* Checklist items draw in one by one; the check marks pop after. */
.ck-item { opacity: 0; }
.ck-item.i1 { animation: ck-item-in 5.5s ease-in-out infinite; animation-delay: 0.3s; }
.ck-item.i2 { animation: ck-item-in 5.5s ease-in-out infinite; animation-delay: 1.0s; }
.ck-item.i3 { animation: ck-item-in 5.5s ease-in-out infinite; animation-delay: 1.7s; }
.ck-item.i4 { animation: ck-item-in 5.5s ease-in-out infinite; animation-delay: 2.4s; }
@keyframes ck-item-in {
  0% { opacity: 0; transform: translateX(-6px); }
  8% { opacity: 1; transform: translateX(0); }
  82% { opacity: 1; }
  100% { opacity: 1; }
}
.ck-accent { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ck-accent.a-cal { animation: ck-pop 5.5s ease-in-out infinite; animation-delay: 3.0s; }
.ck-accent.a-extra { animation: ck-pop 5.5s ease-in-out infinite; animation-delay: 3.6s; }
.ck-accent.a-key { animation: ck-pop 5.5s ease-in-out infinite; animation-delay: 4.2s; }
@keyframes ck-pop {
  0% { opacity: 0; transform: scale(0.5); }
  10% { opacity: 1; transform: scale(1.08); }
  16% { transform: scale(1); }
  90% { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-item, .ck-accent { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 520px) {
  .choice-grid { grid-template-columns: 1fr; }
  .overview-card { padding: 20px 18px; }
  .cal-date { width: 68px; }
  .task-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }
}

/* =========================================================================
   PRINT / SAVE AS PDF
   ========================================================================= */
@media print {
  .tool-header-cta, .tool-header .tool-subhead, .tool-header .tool-support,
  #start, #form, #loading,
  .results-toolbar, .results-again, .step-nav, .step-progress,
  .filter-bar, .task-actions, .task-check, .prio-check,
  .wk-tabs, .tracker-copy, .btn-copy, .comm-foot,
  .site-footer .footer-disclaimer { display: none !important; }
  body { background: #fff; }
  .app { padding: 0; max-width: 100%; }
  .result-card, .overview-card, .nbm-card, .comm-card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .overview-card, .nbm-card, .comm-channel, .badge, .cl-progress-fill, .cal-marker {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .screen { display: block !important; }
  #start, #form, #loading { display: none !important; }
  .task-row.done, .task-row.na { opacity: 1; }
  /* Show all checklist stages in print. */
  .stage-group[hidden] { display: block !important; }
}