/* ============================================================================
   Answers — Tasks page
   The real 9-step first-steps checklist from content/tasks.json. Rows are
   check-off-able (state in localStorage — see answers-tasks.js) and expand
   to the guide's detail: what to bring, what you get, notes, links.
   ========================================================================== */

/* Depends on design-tokens.css and answers-shell.css being <link>ed first (no @import:
   imported URLs can't carry the ?v= cache-busting version the HTML uses). */

/* ---- Top: title + progress ---------------------------------------------- */
.tasks-top {
  flex-shrink: 0;
  padding: 22px 22px 16px;
  background: var(--ans-surface);
  border-bottom: 1px solid var(--ans-line);
}
.tasks-title {
  margin: 0 0 4px;
  font-family: var(--ans-font-display);
  font-size: 26px;
  color: var(--ans-navy-900);
}
.tasks-progress {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ans-slate);
}
.tasks-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--ans-line);
  overflow: hidden;
}
.tasks-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ans-blue-500), var(--ans-gold));
  transition: width .35s ease;
}

/* ---- Body ----------------------------------------------------------------- */
.tasks-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.tasks-loading { font-size: 14px; color: var(--ans-slate); padding: 8px 4px; }

/* ---- Task row -------------------------------------------------------------- */
.task-item {
  background: var(--ans-surface);
  border: 1px solid var(--ans-line);
  border-radius: var(--ans-r-card);
  box-shadow: var(--ans-shadow-bot);
  margin-bottom: 10px;
  overflow: hidden;
}
.task-item__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.task-item__check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #c4ceda;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.task-item__check svg { width: 13px; height: 13px; }
.task-item--done .task-item__check {
  background: var(--ans-green);
  border-color: var(--ans-green);
  color: #fff;
}
.task-item__text { flex: 1; min-width: 0; }
.task-item__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ans-navy-900);
}
.task-item--done .task-item__label {
  color: var(--ans-slate-400);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.task-item__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ans-slate);
}
.task-item__badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a5f13;
  background: rgba(212, 160, 74, .16);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.task-item__chev {
  flex-shrink: 0;
  color: #c4ceda;
  transition: transform .2s ease;
}
.task-item--open .task-item__chev { transform: rotate(90deg); }

/* ---- Expanded detail -------------------------------------------------------- */
.task-item__detail {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--ans-canvas);
}
.task-item--open .task-item__detail { display: block; }
.task-item__summary {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ans-ink);
  margin: 12px 0 0;
}
.task-item__deadline {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(212, 160, 74, .1);
  font-size: 12.5px;
  line-height: 1.5;
  color: #7a5410;
}
.task-item__h {
  margin: 14px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ans-slate);
}
.task-item__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ans-ink);
}
.task-item__list li { margin-bottom: 4px; }
.task-item__list--notes { color: var(--ans-slate); }
.task-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.task-item__action {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ans-blue-500);
  background: rgba(30, 95, 168, .08);
  border: 0;
  padding: 8px 13px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}

/* ---- Arrival card (what you received at the airport) ------------------------ */
.tasks-arrival { margin-bottom: 14px; }
.tasks-arrival .task-item__label { font-weight: 600; }
.tasks-arrival__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.tasks-note {
  margin: 18px 4px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ans-slate-400);
}