/* From prototype: post-task.html */
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:68px;background:rgba(250,247,242,0.96);border-bottom:1px solid var(--border)}
  .nav-logo{font-family:var(--font-body);font-weight:800;font-size:22px;color:var(--olive);text-decoration:none}
  .save-draft{font-size:14px;color:var(--mid);cursor:pointer;text-decoration:none}
  .save-draft:hover{color:var(--olive)}

  .post-layout{max-width:900px;margin:0 auto;padding:48px 24px}
  .post-header{text-align:center;margin-bottom:40px}
  .post-header h1{font-family:var(--font-body);font-weight:800;font-size:32px;margin-bottom:8px}
  .post-header p{font-size:16px;color:var(--mid)}

  /* PROGRESS */
  .progress-wrap{display:flex;align-items:center;justify-content:center;margin-bottom:40px;gap:0}
  .prog-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
  .prog-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:700;font-size:14px;transition:all 0.2s;cursor:pointer}
  .prog-dot.done{background:var(--lime);color:var(--olive)}
  .prog-dot.active{background:var(--olive);color:white;box-shadow:0 0 0 4px rgba(114,140,20,0.15)}
  .prog-dot.pending{background:white;color:var(--mid);border:2px solid var(--border)}
  .prog-label{font-size:11px;font-weight:600;color:var(--mid);white-space:nowrap}
  .prog-dot.active~.prog-label,.prog-step:has(.prog-dot.active) .prog-label{color:var(--olive)}
  .prog-line{width:80px;height:2px;background:var(--border);margin-top:-20px;flex-shrink:0;transition:background 0.3s}
  .prog-line.done{background:var(--lime)}

  /* FORM CARD */
  .step-card{background:white;border:1.5px solid var(--border);border-radius:20px;padding:40px;display:none}
  .step-card.active{display:block}
  .step-card h2{font-family:var(--font-body);font-weight:800;font-size:24px;margin-bottom:6px}
  .step-card .step-desc{font-size:15px;color:var(--mid);margin-bottom:32px}

  .field{margin-bottom:20px}
  .field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--mid);margin-bottom:8px}
  .field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:var(--font-body);outline:none;transition:border-color 0.15s;background:white}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive)}
  .field textarea{height:120px;resize:none;line-height:1.6}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

  /* CATEGORY GRID */
  .cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .cat-option{border:2px solid var(--border);border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;transition:all 0.15s;background:white}
  .cat-option:hover{border-color:var(--olive)}
  .cat-option.selected{border-color:var(--olive);background:rgba(114,140,20,0.06)}
  .cat-option .emoji{font-size:26px;margin-bottom:6px}
  .cat-option .name{font-size:12px;font-weight:700;color:var(--charcoal)}

  /* BUDGET */
  .budget-toggle{display:flex;background:var(--sand);border-radius:10px;padding:4px;margin-bottom:20px}
  .budget-tab{flex:1;padding:10px;border:none;background:transparent;font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;border-radius:8px;transition:all 0.15s;color:var(--mid)}
  .budget-tab.active{background:white;color:var(--charcoal);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
  .suggested-prices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .price-chip{padding:8px 18px;border:1.5px solid var(--border);border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;background:white}
  .price-chip:hover,.price-chip.selected{background:var(--olive);color:white;border-color:var(--olive)}
  .people-stepper{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:10px;padding:8px 12px;background:white}
  .people-stepper:focus{outline:none;border-color:var(--olive)}
  /* Category and Timeline as Enter stops: a green ring shows where the arrow keys will act */
  .cat-grid:focus,.timeline-opts:focus{outline:2px solid var(--olive);outline-offset:6px;border-radius:12px}
  .people-stepper-btn{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:white;font-size:20px;line-height:1;cursor:pointer;color:var(--charcoal)}
  .people-stepper-btn:hover{border-color:var(--olive);color:var(--olive)}
  .people-stepper-value{min-width:28px;text-align:center;font-weight:700;font-size:16px}

  /* TIMELINE */
  .timeline-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .timeline-card{border:2px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:12px}
  .timeline-card:hover,.timeline-card.selected{border-color:var(--olive);background:rgba(114,140,20,0.04)}
  .timeline-icon{font-size:24px}
  .timeline-title{font-weight:700;font-size:14px;margin-bottom:2px}
  .timeline-desc{font-size:12px;color:var(--mid)}

  /* PHOTO UPLOAD */
  .upload-zone{border:2px dashed var(--border);border-radius:14px;padding:40px;text-align:center;cursor:pointer;transition:all 0.15s}
  .upload-zone:hover{border-color:var(--olive);background:rgba(114,140,20,0.02)}
  .upload-icon{font-size:40px;margin-bottom:12px}
  .upload-text{font-size:15px;color:var(--mid)}
  .upload-text strong{color:var(--olive)}

  /* PREVIEW / STEP 4 */
  .preview-card{border:1.5px solid var(--border);border-radius:14px;padding:24px;background:var(--sand);margin-bottom:20px}
  .preview-field{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
  .preview-field:last-child{border:none}
  .preview-field .key{color:var(--mid);font-weight:600}
  .preview-field .val{font-weight:600;text-align:right;max-width:60%}

  /* BUTTONS */
  .btn-row{display:flex;justify-content:space-between;align-items:center;margin-top:28px}
  .btn-back{padding:12px 24px;border:1.5px solid var(--border);border-radius:10px;background:white;color:var(--charcoal);font-family:var(--font-body);font-size:15px;cursor:pointer;font-weight:600;transition:all 0.15s}
  .btn-back:hover{border-color:var(--olive);color:var(--olive)}
  .btn-next{padding:12px 32px;background:var(--olive);border:none;border-radius:10px;color:white;font-family:var(--font-body);font-weight:700;font-size:15px;cursor:pointer;transition:all 0.15s}
  .btn-next:hover{background:#1e3317;transform:translateY(-1px)}
  .btn-publish{padding:14px 40px;background:var(--olive);border:none;border-radius:10px;color:white;font-family:var(--font-body);font-weight:700;font-size:16px;cursor:pointer;transition:all 0.15s}
  .btn-publish:hover{background:#1e3317;transform:translateY(-1px)}

  /* SUCCESS */
  .success-screen{display:none;text-align:center;padding:60px 20px}
  .success-screen.show{display:block}
  .success-icon{font-size:80px;margin-bottom:24px}
  .success-screen h2{font-family:var(--font-body);font-weight:800;font-size:32px;margin-bottom:12px}
  .success-screen p{font-size:16px;color:var(--mid);max-width:400px;margin:0 auto 32px;line-height:1.7}
  .success-actions{display:flex;gap:12px;justify-content:center}
  .btn-view{padding:14px 28px;background:var(--rust);border:none;border-radius:10px;color:white;font-family:var(--font-body);font-weight:700;font-size:15px;cursor:pointer;text-decoration:none}
  .btn-dash{padding:14px 28px;border:1.5px solid var(--olive);border-radius:10px;color:var(--olive);font-family:var(--font-body);font-weight:700;font-size:15px;cursor:pointer;background:white;text-decoration:none}
  .tip-box{background:rgba(114,140,20,0.12);border:1px solid rgba(114,140,20,0.3);border-radius:12px;padding:16px;margin-top:20px;display:flex;gap:12px;align-items:flex-start}
  .tip-icon{font-size:20px;flex-shrink:0}
  .tip-text{font-size:13px;color:var(--olive);line-height:1.5}
  .tip-text strong{display:block;font-weight:700;margin-bottom:2px}
  /* --- SHARED FOOTER --- */
  footer{margin-top:auto;background:var(--charcoal);color:white;padding:52px 48px 28px;}
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 40px}
  .footer-brand p{color:rgba(255,255,255,0.5);font-size:14px;line-height:1.7;margin-top:10px;max-width:280px}
  .footer-col h4{font-family:var(--font-body);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.4);margin-bottom:14px}
  .footer-col a{display:block;color:rgba(255,255,255,0.68);text-decoration:none;font-size:14px;margin-bottom:9px;transition:color 0.2s}
  .footer-col a:hover{color:var(--lime)}
  .footer-bottom{max-width:1200px;margin:0 auto;padding-top:22px;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,0.4)}
  .footer-logo{font-family:var(--font-body);font-weight:800;font-size:20px;color:white}

/* --- Mobile: post a task wizard --------------------------------- */
.post-task-page {
  overflow-x: clip;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .post-task-page.post-layout,
  .post-layout.post-task-page {
    padding: 24px 16px 40px;
  }

  .post-header {
    margin-bottom: 28px;
  }

  .post-header h1 {
    font-size: clamp(24px, 6.5vw, 32px);
    line-height: 1.2;
  }

  .post-header p {
    font-size: 15px;
    line-height: 1.55;
  }

  .progress-wrap {
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
    padding: 0 4px;
    gap: 0;
  }

  .prog-step {
    flex-shrink: 0;
    width: 52px;
  }

  .prog-line {
    width: auto;
    flex: 1 1 auto;
    min-width: 12px;
    margin-left: -6px;
    margin-right: -6px;
  }

  .prog-dot {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .prog-label {
    font-size: 10px;
  }

  .step-card {
    padding: 24px 18px;
    border-radius: 16px;
  }

  .step-card h2 {
    font-size: clamp(20px, 5.5vw, 24px);
  }

  .step-card .step-desc {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cat-option {
    padding: 12px 8px;
  }

  .cat-option .emoji {
    font-size: 22px;
  }

  .timeline-opts {
    grid-template-columns: 1fr;
  }

  .budget-toggle {
    flex-wrap: wrap;
    gap: 4px;
  }

  .budget-tab {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 13px;
    padding: 10px 8px;
  }

  .upload-zone {
    padding: 28px 16px;
  }

  .preview-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
  }

  .preview-field .val {
    max-width: 100%;
    text-align: left;
    word-break: break-word;
  }

  .btn-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px;
  }

  .btn-back,
  .btn-next,
  .btn-publish {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .btn-next,
  .btn-publish {
    padding: 14px 20px;
  }

  .success-screen {
    padding: 40px 12px;
  }

  .success-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-view,
  .btn-dash {
    width: 100%;
    text-align: center;
  }

  .tip-box {
    flex-direction: column;
  }

  .post-task-page .step-card > div:has(> .budget-tab) {
    flex-direction: column;
  }

  .post-task-page .step-card > div:has(> .budget-tab) .budget-tab {
    width: 100%;
    flex: none;
  }

  .post-task-page .deposit-v2 {
    padding: 16px !important;
  }
}

@media (max-width: 380px) {
  .post-task-page .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .budget-tab {
    flex: 1 1 100%;
  }

  .price-chip {
    padding: 8px 14px;
    font-size: 13px;
  }
}

.btn-publish:disabled, .btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Budget and hours boxes: no up and down arrows (QA round 5) */
.post-task-page input[type="number"]::-webkit-outer-spin-button,
.post-task-page input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.post-task-page input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Expected headcount (QA round 12): text on the left, stepper on the right, on one row */
.headcount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.headcount-text {
  min-width: 0;
}
.headcount-row .people-stepper {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .headcount-row {
    flex-wrap: wrap;
  }
}

/* AI Suggestion (QA round 12): the task from step 1, then the AI answers as a conversation */
.ai-task-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fafbf7;
}
.ai-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.ai-task-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--olive);
  font: 600 12px var(--font-body);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.ai-task-title {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
}
.ai-task-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--mid);
}
.ai-task-desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--charcoal);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-chat {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.ai-bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ai-bubble.old {
  opacity: 0.6;
}
.ai-bubble-avatar {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--olive);
  color: white;
}
.ai-bubble-body {
  flex: 1;
  min-width: 0;
  background: #f1f5e6;
  border-radius: 4px 14px 14px 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}
.ai-bubble-summary {
  margin: 6px 0 0;
  color: var(--mid);
  font-size: 13px;
}
.ai-bubble-label {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.ai-bubble-factors {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  list-style-type: disc;
  font-size: 13px;
}
.ai-bubble-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* Smaller than the page's main Next and Back buttons, so they sit lightly inside the answer */
.ai-bubble-actions > .btn-next,
.ai-bubble-actions > .btn-back,
.btn-back.ai-ask-again {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .ai-bubble-actions > button {
    width: 100%;
  }
}

/* AI Suggestion deciding factors (QA round 14): each row is one equal column per choice across the full width, so the
   rows line up like the budget tabs; two columns on phones. The full wording of the chosen one shows under it. */
.ai-factor-chips { display: grid; grid-template-columns: repeat(var(--chip-cols, 3), minmax(0, 1fr)); gap: 8px; }
.ai-factor-chips .price-chip {
  width: 100%; min-height: 40px; padding: 8px 10px; font-size: 13px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .ai-factor-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A long label wraps instead of being cut off; the row's buttons stay the same height */
  .ai-factor-chips .price-chip { white-space: normal; line-height: 1.25; }
}
.ai-factor-hint { margin: 6px 0 0; font-size: 12px; color: var(--mid); }

/* QA round 14, phones only: no subtitle under "Post A Task", and less space between the title, the step dots, the card
   and the rows inside it. Tablets and desktop keep their spacing. */
@media (max-width: 600px) {
  .post-task-page.post-layout,
  .post-layout.post-task-page {
    padding-top: 12px;
  }
  .post-header {
    margin-bottom: 12px;
  }
  .post-header h1 {
    margin-bottom: 0;
  }
  /* Keep "Get competitive offers from local taskers", drop "Tell us what you need." */
  .post-header .post-header-sub {
    margin-top: 2px;
    font-size: 14px;
  }
  .post-header .post-header-sub-lead {
    display: none;
  }
  .progress-wrap {
    margin-bottom: 14px;
  }
  /* theme.css forces 24px on top of cards (room for the coloured bar); 18px still clears it */
  .post-task-page .step-card {
    padding: 18px 14px !important;
  }
  .step-card .step-desc {
    margin-bottom: 14px;
  }
  .step-card .field {
    margin-bottom: 14px;
  }
  .preview-card {
    padding: 8px 14px;
    margin-bottom: 14px;
  }
  .review-row {
    padding: 8px 0 !important;
  }
}