/* ═══ TASKS AND SEARCH (Ren 2026-10-30, canvas "Tasks and search").
   Phone first. Search: grouped suggestions with pastel icon tiles, results
   with removable filter chips, a pill-style Filters sheet and a no-results
   screen that offers to post the search as a task. Tasks: Post a task in 2
   steps, a task details sheet for the client and the provider, applicant
   cards, the Apply sheet and "Application sent". Markup: tasks.js,
   clientView.js (renderProfessionals), firebase-config.js (applicants),
   providerView.js (apply). Colours: the --ag-* tokens from agreements.css. ═══ */

/* ── Search suggestions (#nhSuggest client, #phSuggest provider) ── */
@media (max-width: 900px) {
  .cc-suggest { border-radius: 18px !important; padding: 6px 0 8px !important; }
  .cc-sug-h { padding: 12px 16px 6px !important; font-size: 12px !important; letter-spacing: 1px !important; color: var(--ag-label) !important; }
  .cc-sug-clear, .cc-sug-link { font-size: 13px !important; font-weight: 700 !important; color: var(--ag-green-ink) !important; }
  .cc-sug-item { min-height: 56px; padding: 8px 16px !important; gap: 12px !important; color: var(--ag-ink) !important; }
  .cc-sug-ic { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--ag-soft) !important; color: var(--ag-label) !important; }
  .cc-sug-ic.cc-k-skill, .cc-sug-ic.cc-k-task { background: var(--ag-blue-bg) !important; color: var(--ag-blue-ink) !important; }
  .cc-sug-ic.cc-k-place { background: var(--ag-teal-bg) !important; color: var(--ag-teal-ink) !important; }
  .cc-sug-ic.cc-k-person { background: var(--ag-purple-bg) !important; color: var(--ag-purple) !important; }
  .cc-sug-ic.cc-k-go { background: var(--ag-green-bg) !important; color: var(--ag-green-ink) !important; }
  .cc-sug-ic .cc-ic { width: 18px !important; height: 18px !important; }
  .cc-sug-av { width: 40px !important; height: 40px !important; font-size: 14px !important; background-color: var(--ag-green-bg) !important; color: var(--ag-green-ink) !important; }
  .cc-sug-av[style*="background-image"] { color: transparent !important; }
  .cc-sug-av[data-tone="1"] { background-color: var(--ag-pink-bg) !important; color: var(--ag-pink-ink) !important; }
  .cc-sug-av[data-tone="2"] { background-color: var(--ag-blue-bg) !important; color: var(--ag-blue-ink) !important; }
  .cc-sug-av[data-tone="3"] { background-color: var(--ag-purple-bg) !important; color: var(--ag-purple) !important; }
  .cc-sug-av[data-tone="4"] { background-color: var(--ag-orange-bg) !important; color: var(--ag-orange-ink) !important; }
  .cc-sug-av[data-tone="5"] { background-color: var(--ag-teal-bg) !important; color: var(--ag-teal-ink) !important; }
  .cc-sug-main { font-size: 14px !important; font-weight: 700 !important; }
  .cc-sug-main b { color: var(--ag-green-ink) !important; }
  .cc-sug-sub { font-size: 12px !important; color: var(--ag-label) !important; margin-top: 2px !important; }
  .cc-sug-x { width: 40px !important; height: 40px !important; border-radius: 10px !important; color: var(--ag-label) !important; }
  .cc-sug-chips { gap: 8px !important; padding: 4px 16px 12px !important; }
  .cc-sug-chip { height: 40px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important; background: var(--ag-green-bg) !important; color: var(--ag-green-ink) !important; display: inline-flex; align-items: center; gap: 6px; }
  .cc-sug-chip:nth-child(6n+2) { background: var(--ag-blue-bg) !important; color: var(--ag-blue-ink) !important; }
  .cc-sug-chip:nth-child(6n+3) { background: var(--ag-pink-bg) !important; color: var(--ag-pink-ink) !important; }
  .cc-sug-chip:nth-child(6n+4) { background: var(--ag-orange-bg) !important; color: var(--ag-orange-ink) !important; }
  .cc-sug-chip:nth-child(6n+5) { background: var(--ag-purple-bg) !important; color: var(--ag-purple) !important; }
  .cc-sug-chip:nth-child(6n) { background: var(--ag-teal-bg) !important; color: var(--ag-teal-ink) !important; }
  .cc-sug-chip span { color: inherit !important; opacity: .75; font-weight: 800 !important; }
  .cc-sug-empty { padding: 16px !important; font-size: 14px !important; color: var(--ag-label) !important; }
  body.dark-mode .cc-suggest { background: var(--ag-card) !important; border-color: var(--ag-line) !important; }
}

/* ── Search results: count, active filter chips, post card ── */
.ccs-active, .ccs-count, .ccs-postcard, .ccs-empty { display: none; }
@media (max-width: 900px) {
  #nhListSlot .result-header-container { display: none !important; }
  .ccs-count { display: block; margin: 2px 2px 10px; font-size: 13px; color: var(--ag-muted); }
  .ccs-count b { color: var(--ag-ink); font-weight: 800; }
  .ccs-active { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
  .ccs-active button { height: 34px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: var(--ag-card); color: var(--ag-green-ink); box-shadow: inset 0 0 0 2px var(--ag-green); font-family: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .ccs-active button svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
  .ccs-active .ccs-clear { box-shadow: none; background: transparent; padding: 0 10px; }
  .ccs-postcard { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; padding: 14px; border-radius: 18px; background: var(--ag-card); }
  .ccs-postcard span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ccs-postcard b { font-size: 14px; font-weight: 800; color: var(--ag-ink); }
  .ccs-postcard small { font-size: 12px; color: var(--ag-label); }
  .ccs-postcard button { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ag-green); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; flex-shrink: 0; cursor: pointer; }

  /* no results */
  .ccs-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px 6px 12px; }
  .ccs-empty-ic { width: 96px; height: 96px; border-radius: 28px; background: var(--ag-blue-bg); color: var(--ag-blue-ink); display: flex; align-items: center; justify-content: center; }
  .ccs-empty-ic svg { width: 44px; height: 44px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ccs-empty h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ag-ink); line-height: 1.25; }
  .ccs-empty p { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--ag-muted); }
  .ccs-btn { width: 100%; height: 52px; border: 0; border-radius: 14px; background: var(--ag-green); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
  .ccs-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
  .ccs-btn-o { margin-top: -4px; background: var(--ag-card); color: var(--ag-green-ink); box-shadow: inset 0 0 0 2px var(--ag-green); }
  .ccs-try { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 10px; }
  .ccs-try > span { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--ag-label); }
  .ccs-try > div { display: flex; flex-wrap: wrap; gap: 8px; }
  .ccs-try button { height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ag-card); color: var(--ag-text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .ccs-try button b { color: var(--ag-label); font-weight: 800; margin-left: 4px; }
}

/* ── Filters sheet ── */
@media (max-width: 900px) {
  #nhFilterSheet .nh-fs-panel { background: var(--ag-card) !important; border-radius: 24px 24px 0 0 !important; max-height: 90vh !important; }
  #nhFilterSheet .nh-fs-head { border-bottom: 0 !important; padding: 6px 18px 8px !important; }
  #nhFilterSheet .nh-fs-title { font-size: 20px !important; color: var(--ag-ink) !important; }
  #nhFilterSheet .nh-fs-reset { display: none !important; }
  #nhFilterSheet .nh-fs-x { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: var(--ag-soft) !important; color: var(--ag-ink) !important; box-shadow: none !important; }
  #nhFilterSheet .nh-fs-body { padding: 4px 18px 12px !important; }
  #nhFilterSheet .nh-fs-foot { display: flex; gap: 10px; background: var(--ag-card) !important; border-top: 1px solid var(--ag-line) !important; padding: 12px 18px 18px !important; }
  #nhFilterSheet .nh-fs-foot .ccs-reset { flex: 1; height: 52px; border: 0; border-radius: 14px; background: var(--ag-soft); color: var(--ag-ink); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
  #nhFilterSheet .nh-fs-apply { flex: 2; height: 52px; padding: 0 !important; border-radius: 14px !important; background: var(--ag-green) !important; font-size: 15px !important; font-weight: 700 !important; }

  #nhFilterSlot .sidebar-label { margin: 16px 0 8px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--ag-label) !important; }
  #nhFilterSlot .sidebar-label:first-child { margin-top: 4px !important; }
  #nhFilterSlot .custom-input-container { height: 48px; border: 0 !important; border-radius: 14px !important; background: var(--ag-page) !important; box-shadow: none !important; padding: 0 14px !important; margin-bottom: 8px !important; }
  #nhFilterSlot .borderless-input { font-size: 15px !important; color: var(--ag-ink) !important; background: transparent !important; }
  #nhFilterSlot .go-btn { display: none !important; }
  #nhFilterSlot .checkbox-list { border-bottom: 0 !important; }
  #nhFilterSlot #checkboxContainer { max-height: none !important; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 0 !important; }
  #nhFilterSlot #checkboxContainer:empty { display: none; }
  /* specialties + ratings as pills (the real inputs stay, visually hidden) */
  #nhFilterSlot #checkboxContainer .custom-checkbox-label,
  #nhFilterSlot .radio-group .custom-radio-label { position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  #nhFilterSlot #checkboxContainer input, #nhFilterSlot .radio-group input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  #nhFilterSlot #checkboxContainer .custom-checkbox-label span,
  #nhFilterSlot .radio-group .custom-radio-label span { height: 38px; padding: 0 12px; border-radius: 999px; background: var(--ag-soft); color: var(--ag-text); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; cursor: pointer; }
  #nhFilterSlot #checkboxContainer input:checked + span,
  #nhFilterSlot .radio-group input:checked + span { background: var(--ag-green-bg); color: var(--ag-green-ink); box-shadow: inset 0 0 0 2px var(--ag-green); }
  #nhFilterSlot #checkboxContainer input:focus-visible + span,
  #nhFilterSlot .radio-group input:focus-visible + span { outline: 2px solid var(--ag-green); outline-offset: 2px; }
  #nhFilterSlot .radio-group { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #nhFilterSlot .radio-group .custom-radio-label span { width: 100%; justify-content: center; box-sizing: border-box; }
  /* Near me / Verified / Available as rows with a big tick box */
  #nhFilterSlot .checkbox-list:not(#checkboxContainer) .custom-checkbox-label { min-height: 44px; display: flex !important; align-items: center; gap: 12px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; font-size: 14px; font-weight: 700; color: var(--ag-ink); }
  #nhFilterSlot .checkbox-list:not(#checkboxContainer) .checkbox-input { width: 22px; height: 22px; margin: 0; accent-color: var(--ag-green); flex-shrink: 0; }
  #nhFilterSlot .checkbox-list:not(#checkboxContainer) .custom-checkbox-label span { display: inline-flex; align-items: center; gap: 6px; color: var(--ag-ink) !important; }
  #nhFilterSlot #radiusSliderContainer { border-bottom: 0 !important; }
  #nhFilterSlot #radiusSliderContainer label { display: flex; justify-content: space-between; font-size: 13px; color: var(--ag-muted); }
  #nhFilterSlot #radiusDisplay { color: var(--ag-green-ink); font-weight: 800; }
  #nhFilterSlot #radiusRange { width: 100%; accent-color: var(--ag-green); }
}

/* ── "Budget is negotiable" toggle on Post a task (Ren 2026-11-02) ── */
.cc-neg-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--border-hard, #cfd8d2); border-radius: 12px; background: var(--surface, #fff);
  padding: 10px 12px; font-family: inherit; color: var(--text-1, #1a1f1b);
}
.cc-neg-btn b { display: block; font-size: 14px; font-weight: 800; }
.cc-neg-btn small { display: block; font-size: 12px; color: var(--text-3, #5f6b63); margin-top: 2px; line-height: 1.35; }
.cc-neg-box { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 2px solid #b9c7bd; background: #fff; position: relative; }
.cc-neg-btn[aria-pressed="true"] { border-color: var(--ag-green, #2ea84a); background: var(--ag-green-bg, #e7f6ea); }
.cc-neg-btn[aria-pressed="true"] .cc-neg-box { background: var(--ag-green, #2ea84a); border-color: var(--ag-green, #2ea84a); }
.cc-neg-btn[aria-pressed="true"] .cc-neg-box::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.cc-neg-btn:focus-visible { outline: 3px solid var(--ag-green, #2ea84a); outline-offset: 2px; }
#modalBudgetInput:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 900px) {
  #taskModalOverlay.ptk-on #modalBudgetNegWrap { margin: 0 !important; }
  #taskModalOverlay.ptk-on .cc-neg-btn { min-height: 56px; border: 2px solid transparent; border-radius: 16px; background: var(--ag-card); padding: 10px 14px; }
  #taskModalOverlay.ptk-on .cc-neg-btn[aria-pressed="true"] { border-color: var(--ag-green); background: var(--ag-green-bg); }
  #taskModalOverlay.ptk-on .cc-neg-btn[aria-pressed="true"] small { color: var(--ag-green-ink); }
}

/* ── Post a task in 2 steps (phone; tasks.js adds .ptk-on + data-ptk-step) ── */
.ptk-head, .ptk-cats, .ptk-exp, .ptk-pay, .ptk-h, .ptk-next { display: none; }
@media (max-width: 900px) {
  #taskModalOverlay.ptk-on { padding: 0 !important; align-items: stretch !important; }
  #taskModalOverlay.ptk-on .modal-container {
    width: 100% !important; max-width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: none !important;
    border: 0 !important; border-radius: 0 !important; background: var(--ag-page) !important; box-shadow: none !important;
    font-family: 'Inter', system-ui, sans-serif; color: var(--ag-ink); transform: none !important;
  }
  #taskModalOverlay.ptk-on .agree-header { display: none !important; }
  #taskModalOverlay.ptk-on .ptk-head { display: block; flex-shrink: 0; padding: max(8px, env(safe-area-inset-top)) 8px 0; }
  .ptk-top { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ptk-top button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--ag-card); color: var(--ag-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
  .ptk-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ptk-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; }
  .ptk-count { width: 44px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ag-label); }
  #taskModalOverlay[data-ptk-step="1"] .ptk-back, #taskModalOverlay[data-ptk-step="2"] .ptk-x { display: none; }
  .ptk-bar { display: flex; gap: 6px; padding: 0 6px 10px; }
  .ptk-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--ag-green); }
  #taskModalOverlay[data-ptk-step="1"] .ptk-bar i + i { background: var(--ag-track); }

  #taskModalOverlay.ptk-on .agree-body {
    max-height: none !important; flex: 1; display: flex; flex-direction: column; gap: 8px;
    padding: 6px 14px 16px !important; background: transparent !important; scrollbar-width: none;
  }
  #taskModalOverlay.ptk-on .agree-body::-webkit-scrollbar { display: none; }
  #taskModalOverlay.ptk-on[data-ptk-step="1"] [data-ptk-step="2"],
  #taskModalOverlay.ptk-on[data-ptk-step="2"] [data-ptk-step="1"],
  #taskModalOverlay.ptk-on .ptk-hide { display: none !important; }
  #taskModalOverlay.ptk-on .ptk-flat { display: contents !important; }
  #taskModalOverlay.ptk-on .ptk-h { display: block; margin: 0 0 4px; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--ag-ink); }

  #taskModalOverlay.ptk-on .modal-label, #taskModalOverlay.ptk-on .ptk-lbl {
    margin: 8px 0 0 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1px; text-transform: uppercase; color: var(--ag-label) !important;
  }
  #taskModalOverlay.ptk-on .agree-input, #taskModalOverlay.ptk-on .agree-select, #taskModalOverlay.ptk-on .agree-textarea {
    width: 100%; min-height: 52px; margin: 0 !important; border: 2px solid transparent !important; border-radius: 16px !important;
    padding: 12px 14px !important; background: var(--ag-card) !important; color: var(--ag-ink) !important;
    font-family: inherit; font-size: 16px !important; font-weight: 600; box-sizing: border-box; box-shadow: none !important;
  }
  #taskModalOverlay.ptk-on .agree-textarea { min-height: 104px; line-height: 1.5; font-weight: 500; padding-right: 48px !important; }
  #taskModalOverlay.ptk-on .agree-input:focus, #taskModalOverlay.ptk-on .agree-select:focus, #taskModalOverlay.ptk-on .agree-textarea:focus { border-color: var(--ag-green) !important; outline: none; }
  #taskModalOverlay.ptk-on .agree-textarea-wrap { margin: 0 !important; }
  #taskModalOverlay.ptk-on .agree-attach-btn { width: 40px !important; height: 40px !important; top: 8px !important; right: 8px !important; border-radius: 12px; background: var(--ag-soft); color: var(--ag-green-ink); }
  #taskModalOverlay.ptk-on .agree-attach-btn .lucide-ico { width: 18px !important; height: 18px !important; }
  #taskModalOverlay.ptk-on .agree-attach-info { border-radius: 12px; background: var(--ag-teal-bg); color: var(--ag-teal-ink); }

  /* category tiles + chips */
  #taskModalOverlay.ptk-on .ptk-cats { display: flex; flex-direction: column; gap: 8px; }
  .ptk-catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ptk-catgrid button {
    min-height: 76px; border: 0; border-radius: 16px; padding: 8px 6px; background: var(--ag-card); color: var(--ag-text);
    font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  }
  .ptk-cico { width: 32px; height: 32px; border-radius: 10px; background: var(--nh-cbg, var(--ag-soft)); color: var(--nh-cfg, var(--ag-label)); display: flex; align-items: center; justify-content: center; }
  .ptk-cico svg { width: 17px; height: 17px; }
  .ptk-catgrid button[aria-pressed="true"] { background: var(--nh-cbg, var(--ag-green-bg)); color: var(--nh-cfg, var(--ag-green-ink)); box-shadow: inset 0 0 0 2px var(--nh-cfg, var(--ag-green)); }
  .ptk-catgrid button[aria-pressed="true"] .ptk-cico { background: var(--ag-card); }
  .ptk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  #taskModalOverlay.ptk-on .ptk-exp { display: flex; }
  #taskModalOverlay.ptk-on .ptk-pay { display: flex; }
  #taskModalOverlay.ptk-on .ptk-pay button[data-pay="cash"][aria-pressed="true"] { background: var(--ag-cash-bg, #fbf1d6); color: var(--ag-cash-ink, #6e4600); box-shadow: inset 0 0 0 2px var(--ag-cash, #8a5a00); }
  #taskModalOverlay.ptk-on #modalPayWrap { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; }
  #taskModalOverlay.ptk-on #modalPayHint { margin: 0; font-size: 12px; }
  .ptk-chips button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ag-card); color: var(--ag-text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .ptk-chips button[aria-pressed="true"] { background: var(--ag-green-bg); color: var(--ag-green-ink); box-shadow: inset 0 0 0 2px var(--ag-green); }
  .ptk-hint { font-size: 13px; color: var(--ag-label); padding: 4px 2px; }
  .ptk-catgrid button:focus-visible, .ptk-chips button:focus-visible, .ptk-top button:focus-visible { outline: 3px solid var(--ag-green); outline-offset: 2px; }

  /* photos */
  #taskModalOverlay.ptk-on #modalPhotoGrid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px !important; }
  #taskModalOverlay.ptk-on .modal-photo-slot { height: 72px !important; border: 2px dashed #b9c7bd !important; border-radius: 14px !important; background-color: var(--ag-card) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
  /* Filled slot shows the picked photo as a thumbnail (the old `background` shorthand above wiped it). */
  #taskModalOverlay.ptk-on .modal-photo-slot.has-photo { border-style: solid !important; border-color: var(--ag-green, #2ea84a) !important; }
  #taskModalOverlay.ptk-on .modal-photo-plus { color: var(--ag-green-ink) !important; font-size: 24px !important; }
  #taskModalOverlay.ptk-on .modal-row { margin: 0 !important; }
  #taskModalOverlay.ptk-on .modal-col { min-width: 0; }

  /* step 2: budget + duration side by side, the rest stacked */
  #taskModalOverlay.ptk-on .ptk-money { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; align-items: end; }
  #taskModalOverlay.ptk-on .ptk-money > .modal-col > div { gap: 6px !important; }
  #taskModalOverlay.ptk-on .ptk-money input[type="number"]:first-of-type { color: var(--ag-teal-ink) !important; font-weight: 800; }
  #taskModalOverlay.ptk-on #modalStarRating + #ratingText, #taskModalOverlay.ptk-on #ratingText { font-size: 13px !important; color: var(--ag-orange-ink) !important; }
  #taskModalOverlay.ptk-on #modalStarRating { gap: 8px !important; }
  #taskModalOverlay.ptk-on .ptk-flat > div[style*="border"] { align-items: center !important; }
  #taskModalOverlay.ptk-on #ratingText { align-self: center; display: inline-flex; align-items: center; line-height: 1; padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: none !important; }
  #taskModalOverlay.ptk-on .modal-star { font-size: 26px; line-height: 1; color: #e08a12; }
  #taskModalOverlay.ptk-on .ptk-flat > div[style*="border"] , #taskModalOverlay.ptk-on .ptk-flat > label[style*="border"] {
    min-height: 52px !important; border: 0 !important; border-radius: 16px !important; background: var(--ag-card) !important; padding: 0 14px !important; margin: 0 !important;
  }
  #taskModalOverlay.ptk-on .ptk-flat > label[style*="border"] span { font-size: 15px !important; font-weight: 700 !important; color: var(--ag-ink) !important; }
  #taskModalOverlay.ptk-on .status-checkbox { width: 22px !important; height: 22px !important; accent-color: var(--ag-green) !important; }
  #taskModalOverlay.ptk-on #datePickerContainer .agree-input { border-color: var(--ag-green) !important; }

  /* footer */
  #taskModalOverlay.ptk-on .agree-footer { flex-shrink: 0; display: flex; gap: 10px; border: 0 !important; background: var(--ag-page) !important; padding: 10px 14px max(16px, env(safe-area-inset-bottom)) !important; }
  #taskModalOverlay.ptk-on #cancelTaskBtn { display: none !important; }
  #taskModalOverlay.ptk-on .ptk-next, #taskModalOverlay.ptk-on #submitTaskBtn {
    flex: 1; min-height: 52px; border: 0 !important; border-radius: 14px !important; background: var(--ag-green) !important; color: #fff !important;
    font-family: inherit; font-size: 15px !important; font-weight: 700 !important; box-shadow: none !important; cursor: pointer;
  }
  #taskModalOverlay.ptk-on[data-ptk-step="1"] .ptk-next { display: block; }
  #taskModalOverlay.ptk-on[data-ptk-step="1"] #submitTaskBtn, #taskModalOverlay.ptk-on[data-ptk-step="2"] .ptk-next { display: none !important; }
}

/* ── Task details sheet (client T4 + provider P2; markup CCTasks.detail) ── */
@media (max-width: 900px) {
  #phTaskSheet .ph-ts-panel { background: var(--ag-page); max-height: 92vh; font-family: 'Inter', system-ui, sans-serif; }
  #phTaskSheet .ph-ts-grip { background: var(--ag-track); }
  #phTaskSheet .ph-ts-head { border-bottom: 0; padding: 4px 14px 8px; }
  #phTaskSheet .ph-ts-title { font-size: 16px; color: var(--ag-ink); }
  #phTaskSheet .ph-ts-x { width: 44px; height: 44px; border-radius: 12px; background: var(--ag-card); color: var(--ag-ink); box-shadow: none; }
  #phTaskSheet .ph-ts-body { padding: 2px 14px 0; flex: 1 1 auto; min-height: 0; }
}
.tk-detail { display: flex; flex-direction: column; color: var(--ag-ink); font-family: 'Inter', system-ui, sans-serif; }
.tk-scroll { display: flex; flex-direction: column; gap: 10px; }
.tk-card { background: var(--ag-card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tk-head { display: flex; gap: 12px; align-items: flex-start; }
.tk-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--nh-cbg, var(--ag-soft)); color: var(--nh-cfg, var(--ag-label)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-ico svg { width: 22px; height: 22px; }
.tk-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-title { font-size: 19px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.tk-head-txt small { font-size: 13px; color: var(--ag-label); }
.tk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tk-steps span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tk-steps i { height: 6px; border-radius: 3px; background: var(--ag-track); }
.tk-steps span.on i { background: var(--ag-green); }
.tk-steps em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ag-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-steps span.on em, .tk-steps span.cur em { color: var(--ag-green-ink); }
.tk-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.tk-tile { border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.tk-tile b { font-size: 16px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-tile span { font-size: 11px; font-weight: 700; color: var(--ag-muted); }
.tk-teal { background: var(--ag-teal-bg); color: var(--ag-teal-ink); }
.tk-blue { background: var(--ag-blue-bg); color: var(--ag-blue-ink); }
.tk-purple { background: var(--ag-purple-bg); color: var(--ag-purple); }
.tk-orange { background: var(--ag-orange-bg); color: var(--ag-orange-ink); }
.tk-cash { background: var(--ag-cash-bg, #fbf1d6); color: var(--ag-cash-ink, #6e4600); }
.tk-pink { background: var(--ag-pink-bg); color: var(--ag-pink-ink); }
body.dark-mode .tk-purple { color: #c4b2f0; }
.tk-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ag-text); white-space: pre-line; overflow-wrap: anywhere; }
.tk-media { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-media img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; cursor: zoom-in; background: var(--ag-soft); }
.tk-pdf { height: 44px; padding: 0 12px; border-radius: 12px; background: var(--ag-soft); color: var(--ag-ink); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-decoration: none; max-width: 100%; }
.tk-pdf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-pdf svg, .tk-row-ic svg, .tk-btn svg, .tk-person svg, .tk-ap-ok svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-pdf svg { width: 18px; height: 18px; flex-shrink: 0; }
.tk-row { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ag-line); }
.tk-card > .tk-row:first-child { padding-top: 0; border-top: 0; }
.tk-row-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-row-ic svg { width: 16px; height: 16px; }
.tk-row-k { flex: 0 0 auto; font-size: 13px; color: var(--ag-label); }
.tk-row-v { flex: 1; min-width: 0; text-align: right; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.tk-person { border: 0; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; font-family: inherit; text-align: left; color: var(--ag-ink); cursor: pointer; width: 100%; }
.tk-person[disabled] { cursor: default; }
.tk-person > svg { width: 18px; height: 18px; color: var(--ag-label); flex-shrink: 0; }
.tk-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; background: var(--ag-green-bg); color: var(--ag-green-ink); }
.tk-av[data-tone="1"], .ap-av[data-tone="1"] { background: var(--ag-pink-bg); color: var(--ag-pink-ink); }
.tk-av[data-tone="2"], .ap-av[data-tone="2"] { background: var(--ag-blue-bg); color: var(--ag-blue-ink); }
.tk-av[data-tone="3"], .ap-av[data-tone="3"] { background: var(--ag-purple-bg); color: var(--ag-purple); }
.tk-av[data-tone="4"], .ap-av[data-tone="4"] { background: var(--ag-orange-bg); color: var(--ag-orange-ink); }
.tk-av[data-tone="5"], .ap-av[data-tone="5"] { background: var(--ag-teal-bg); color: var(--ag-teal-ink); }
.tk-person-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-person-txt b { font-size: 15px; font-weight: 800; }
.tk-person-txt small { font-size: 12px; color: var(--ag-label); }
.tk-note { margin: 0; font-size: 12px; color: var(--ag-label); text-align: center; }
.tk-actions {
  position: sticky; bottom: 0; z-index: 1; margin-top: 10px; padding: 12px 0 max(16px, env(safe-area-inset-bottom));
  background: var(--ag-page); display: flex; flex-direction: column; gap: 4px;
}
.tk-row2 { display: flex; gap: 10px; }
.tk-row2 .tk-btn { flex: 1.6; }
.tk-row2 .tk-btn-soft:first-child:not(:only-child) { flex: 1; }
.tk-btn {
  width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--ag-green); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.tk-btn svg { width: 18px; height: 18px; }
.tk-btn-soft { background: var(--ag-card); color: var(--ag-ink); }
.tk-btn-o { background: var(--ag-card); color: var(--ag-green-ink); box-shadow: inset 0 0 0 2px var(--ag-green); }
.tk-btn[disabled] { cursor: default; }
.tk-btn-done[disabled] { background: var(--ag-green-bg); color: var(--ag-green-ink); opacity: 1; }
.tk-btn:focus-visible, .tk-links button:focus-visible, .tk-person:focus-visible { outline: 3px solid var(--ag-green); outline-offset: 2px; }
/* Post guard (2026-11-04): why a post is hidden, shown to its owner */
.cc-hidden-note {
  display: flex; flex-direction: column; gap: 3px; margin: 10px 0 8px; padding: 12px 14px; border-radius: 14px;
  background: var(--ag-pink-bg, #fde8ee); color: var(--ag-pink-ink, #93203f); font-size: 13px; line-height: 1.45;
}
.cc-hidden-note b { font-size: 14px; font-weight: 800; }
.tk-links { display: flex; justify-content: center; gap: 18px; }
.tk-links button { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ag-green-ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tk-links .tk-link-red { color: var(--ag-pink-ink); }

/* ── Apply sheet (phone; tasks.js adds .apl-on) ── */
.apl-rates, .apl-etas, .apl-net { display: none; }
@media (max-width: 900px) {
  #applyModalOverlay.apl-on { padding: 0 !important; align-items: flex-end !important; }
  #applyModalOverlay.apl-on .apply-modal-container {
    width: 100% !important; max-width: 100% !important; height: auto !important; max-height: calc(100dvh - 48px) !important;
    border: 0 !important; border-radius: 24px 24px 0 0 !important; background: var(--ag-card) !important;
    font-family: 'Inter', system-ui, sans-serif; color: var(--ag-ink); display: flex; flex-direction: column;
  }
  #applyModalOverlay.apl-on .apply-modal-header { background: var(--ag-card) !important; padding: 16px 12px 8px 18px !important; border: 0 !important; align-items: flex-start; }
  #applyModalOverlay.apl-on .apply-modal-task-title { color: var(--ag-ink) !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.25; }
  #applyModalOverlay.apl-on .apply-modal-task-budget { color: var(--ag-label) !important; font-size: 13px !important; margin-top: 4px; }
  #applyModalOverlay.apl-on .task-detail-close-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--ag-soft); color: var(--ag-ink); border: 0; font-size: 24px; flex-shrink: 0; }
  #applyModalOverlay.apl-on .apply-modal-body { padding: 4px 18px 12px !important; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; background: var(--ag-card) !important; }
  #applyModalOverlay.apl-on .apply-field-label { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1px; text-transform: uppercase; color: var(--ag-label) !important; }
  #applyModalOverlay.apl-on .apl-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  #applyModalOverlay.apl-on .apl-etas { display: flex; flex-wrap: wrap; gap: 6px; }
  .apl-rates button, .apl-etas button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--ag-soft); color: var(--ag-text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .apl-etas button { border-radius: 999px; }
  .apl-rates button[aria-pressed="true"], .apl-etas button[aria-pressed="true"] { background: var(--ag-green-bg); color: var(--ag-green-ink); box-shadow: inset 0 0 0 2px var(--ag-green); }
  .apl-rates button:focus-visible, .apl-etas button:focus-visible { outline: 3px solid var(--ag-green); outline-offset: 2px; }
  #applyModalOverlay.apl-on #offerRateType { display: none !important; }
  #applyModalOverlay.apl-on .apl-pricegrid { display: block !important; }
  #applyModalOverlay.apl-on .apply-offer-row { position: relative; }
  #applyModalOverlay.apl-on .apply-offer-row::before { content: '₱'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 800; color: var(--ag-teal-ink); pointer-events: none; }
  #applyModalOverlay.apl-on #offerPrice { width: 100%; height: 56px; border: 2px solid transparent; border-radius: 14px; background: var(--ag-page); padding: 0 14px 0 36px; font-family: inherit; font-size: 22px; font-weight: 800; color: var(--ag-teal-ink); box-sizing: border-box; }
  #applyModalOverlay.apl-on #offerTotalPreview { font-size: 12px !important; color: var(--ag-label) !important; font-weight: 600 !important; }
  #applyModalOverlay.apl-on .apl-net { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ag-teal-bg); color: var(--ag-teal-ink); display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
  #applyModalOverlay.apl-on .apl-net b { white-space: nowrap; }
  #applyModalOverlay.apl-on .apl-etarow { display: none !important; margin-top: 8px; }
  #applyModalOverlay.apl-on.apl-own .apl-etarow { display: grid !important; }
  #applyModalOverlay.apl-on .apl-etarow input, #applyModalOverlay.apl-on .apl-etarow select,
  #applyModalOverlay.apl-on #offerMessage { min-height: 48px; border: 2px solid transparent; border-radius: 14px; background: var(--ag-page); padding: 10px 14px; font-family: inherit; font-size: 15px; color: var(--ag-ink); box-sizing: border-box; }
  #applyModalOverlay.apl-on #offerMessage { width: 100%; line-height: 1.5; resize: none; }
  #applyModalOverlay.apl-on #offerPrice:focus, #applyModalOverlay.apl-on #offerMessage:focus, #applyModalOverlay.apl-on .apl-etarow input:focus { border-color: var(--ag-green); outline: none; }
  #applyModalOverlay.apl-on .apply-modal-footer { display: flex; gap: 10px; background: var(--ag-card) !important; border-top: 1px solid var(--ag-line) !important; padding: 12px 18px max(18px, env(safe-area-inset-bottom)) !important; }
  #applyModalOverlay.apl-on #cancelApplyBtn { flex: 1; min-height: 52px; border: 0; border-radius: 14px; background: var(--ag-soft); color: var(--ag-ink); font-family: inherit; font-size: 15px; font-weight: 700; }
  #applyModalOverlay.apl-on #submitApplyBtn { flex: 2; min-height: 52px; border: 0; border-radius: 14px; background: var(--ag-green); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; box-shadow: none; }
}

/* ── Application sent (#tkApplied, phone) ── */
#tkApplied {
  position: fixed; inset: 0; z-index: 10050; display: none; flex-direction: column; background: var(--ag-page);
  font-family: 'Inter', system-ui, sans-serif; color: var(--ag-ink); opacity: 0; transition: opacity .2s ease;
}
#tkApplied.open { opacity: 1; }
.tk-ap-main { flex: 1; overflow-y: auto; padding: max(56px, env(safe-area-inset-top)) 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tk-ap-ok { width: 96px; height: 96px; border-radius: 50%; background: var(--ag-green-bg); color: var(--ag-green-ink); display: flex; align-items: center; justify-content: center; }
.tk-ap-ok svg { width: 46px; height: 46px; stroke-width: 2.4; }
.tk-ap-main h2 { margin: 0; font-size: 24px; font-weight: 800; }
.tk-ap-main p { margin: 0; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--ag-muted); }
.tk-ap-card { width: 100%; box-sizing: border-box; text-align: left; margin-top: 6px; padding: 14px; }
.tk-ap-card .tk-ico { width: 44px; height: 44px; border-radius: 12px; }
.tk-ap-card .tk-ico svg { width: 20px; height: 20px; }
.tk-ap-card .tk-title { font-size: 15px; }
.tk-ap-card .tk-head-txt small { font-size: 12px; }
.tk-ap-price { font-size: 15px; font-weight: 800; color: var(--ag-teal-ink); white-space: nowrap; }
.tk-ap-foot { flex-shrink: 0; padding: 12px 14px max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }

/* ── Applicants list (#applicantsListPopup; cards from firebase-config.js) ── */
#applicantsListPopup .apply-modal-container { background: var(--ag-page) !important; font-family: 'Inter', system-ui, sans-serif; color: var(--ag-ink); }
#applicantsListPopup .apply-modal-header { background: var(--ag-page) !important; border: 0 !important; padding: 14px 12px 8px 18px !important; }
#applicantsListPopup .apply-modal-task-title { color: var(--ag-ink) !important; font-size: 18px !important; font-weight: 800 !important; }
#applicantsListPopup .apply-modal-task-title svg { display: none; }
#applicantsListPopup .apply-modal-task-budget { color: var(--ag-label) !important; font-size: 13px !important; }
#applicantsListPopup .task-detail-close-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--ag-card); color: var(--ag-ink); border: 0; font-size: 24px; flex-shrink: 0; }
#_applicantsListBody { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
#_applicantsListBody > div:not(.ap-card) { color: var(--ag-label) !important; }
#applicantsListPopup .ap-card { background: var(--ag-card); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border: 0; }
#applicantsListPopup .ap-card:hover { background: var(--ag-card); box-shadow: 0 0 0 2px var(--ag-line); }
#applicantsListPopup .ap-card:focus-visible { outline: 3px solid var(--ag-green); outline-offset: 2px; }
.ap-top { display: flex; gap: 12px; align-items: center; }
.ap-av { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; background: var(--ag-green-bg); color: var(--ag-green-ink); }
.ap-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ap-name b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ver { width: 18px; height: 18px; border-radius: 50%; background: var(--ag-blue-bg); color: var(--ag-blue-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-ver svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ap-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ag-label); min-width: 0; }
.ap-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-star { font-weight: 800; color: var(--ag-orange-ink); flex-shrink: 0; }
.ap-offer { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.ap-offer b { font-size: 16px; font-weight: 800; color: var(--ag-teal-ink); white-space: nowrap; }
.ap-offer small { font-size: 11px; color: var(--ag-label); }
.ap-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--ag-soft); font-size: 13px; line-height: 1.5; color: var(--ag-text); overflow-wrap: anywhere; }
.ap-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-btns button { min-height: 44px; border: 0; border-radius: 12px; background: var(--ag-soft); color: var(--ag-ink); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ap-btns .ap-hire { background: var(--ag-green); color: #fff; }
.ap-btns button:focus-visible { outline: 3px solid var(--ag-green); outline-offset: 2px; }
.ap-when { font-size: 11px; color: var(--ag-label); }
@media (max-width: 900px) {
  #applicantsListPopup { padding: 0 !important; align-items: stretch !important; }
  #applicantsListPopup .apply-modal-container { max-width: 100% !important; max-height: none !important; height: 100%; border-radius: 0 !important; box-shadow: none !important; }
  #applicantsListPopup .apply-modal-header { padding-top: max(14px, env(safe-area-inset-top)) !important; }
}
@media (max-width: 900px) {
  /* the old drawn circles: pills need none, the rows use the real tick box */
  #nhFilterSlot .custom-radio-label::before, #nhFilterSlot .custom-checkbox-label::before { display: none !important; }
  #nhFilterSlot .checkbox-list:not(#checkboxContainer) .checkbox-input { display: block !important; }
  #nhFilterSlot .custom-checkbox-label:hover { transform: none !important; }
  #nhFilterSlot .checkbox-list:not(#checkboxContainer) .custom-checkbox-label:has(input:checked) { background: none !important; color: var(--ag-ink) !important; }
}