/* ============================================================================
   TestKav · صفحهٔ دسته — چیدمان صفحه: نوار مسیر (بدون عنوان و زیرعنوان)، نوار ابزار، ستون فیلتر هدفمند و شبکهٔ سه‌ستونهٔ کارت‌ها.
   روی market-category-v2.css (بخش‌های مشترک) سوار می‌شود. همهٔ قواعد زیر .tk3 هستند.
   گوشه‌ها در کل صفحه هم‌خانواده‌اند: جعبه‌ها ۸px (مثل کارت آزمون)، کنترل‌های داخل جعبه‌ها ۶px و دکمه‌های درون گروه‌ها ۴px.
   ============================================================================ */

/* ---------- top strip: only the breadcrumb. No title box, no lede, no line underneath; the toolbar follows right after it ---------- */
.tk3 .tk3-intro{padding-bottom:0;border-bottom:0}
.tk3 .tk3-intro h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tk3 .tk3-intro h1::after{content:none}
.tk3 .tkc-bar{margin-top:4px}

/* ---------- toolbar: 8px box, controls inside it slightly tighter ---------- */
.tk3 .tkc-bar-in{border-radius:8px}
.tk3 .tkc-fbtn,.tk3 .tkc-search .mls,.tk3 .tkc-sort,.tk3 .tkc-view{border-radius:6px}
.tk3 .tkc-bar .tkc-sbtn,.tk3 .tkc-vbtn{border-radius:4px}
.tk3 .tkc-more{border-radius:8px}

/* ---------- two columns: targeted filters beside the list ---------- */
.tk3-layout{display:grid;grid-template-columns:276px minmax(0,1fr);align-items:start;gap:28px;padding-top:18px}
.tk3-main{min-width:0}
.tk3 #marketItems{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tk3 #marketItems.is-list{gap:16px}

/* the side column follows the page: it sticks right under the (sticky) toolbar and scrolls its own list if long */
.tk3-side{position:sticky;top:calc(var(--tkc-hdr,0px) + var(--tkc-barh,76px) + 14px);align-self:start;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - var(--tkc-hdr,0px) - var(--tkc-barh,76px) - 30px)}
.tk3 .tk3-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:8px;background:var(--sk-surface-2)}
.tk3 .tk3-seg button{height:38px;padding:0 4px;border:0;border-radius:6px;background:transparent;color:var(--sk-ink-soft);font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tk3 .tk3-seg button:hover{color:var(--sk-ink)}
.tk3 .tk3-seg button.is-on{background:var(--sk-surface);color:var(--sk-ink);box-shadow:0 0 0 1px var(--sk-line),0 2px 6px -3px rgba(10,14,40,.18)}
/* no scroll containment: once a long list reaches its end, the wheel keeps scrolling the page */
.tk3-list{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto;padding:6px;border:1px solid var(--sk-line);border-radius:8px;background:var(--sk-surface);scrollbar-width:thin;scrollbar-color:var(--sk-line-strong) transparent}
.tk3-list[hidden]{display:none}
.tk3 .tk3-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:8px 12px;border-radius:6px;color:var(--sk-ink);font-size:13.5px;line-height:1.6;text-decoration:none;transition:background-color .15s ease}
.tk3 .tk3-opt:hover{background:var(--sk-surface-2)}
.tk3 .tk3-opt .t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tk3 .tk3-opt .c{flex:none;display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 8px;border-radius:999px;background:var(--sk-surface-2);color:var(--sk-ink-soft);font-size:11.5px;font-weight:700}
/* گزینهٔ فعال فهرست: ته‌رنگ خنثی (نه زرد) و شمارندهٔ سفید با خط مویی (نه مشکی توپر) */
.tk3 .tk3-opt.is-on{background:color-mix(in srgb,var(--sk-ink) 7%,transparent);font-weight:800}
.tk3 .tk3-opt.is-on .c{background:var(--sk-surface);color:var(--sk-ink);box-shadow:0 0 0 1px var(--sk-line-strong)}
.tk3 .tk3-opt:focus-visible,.tk3 .tk3-seg button:focus-visible{outline:2px solid var(--sk-amber);outline-offset:1px}
.tk3-none{margin:0;padding:12px;font-size:12.5px;color:var(--sk-ink-faint)}

/* جستجوی کوچک و «بیشتر» در فهرست‌های بلند (ساخته‌شده با market-category-v2.js) — دسکتاپ و کشوی فیلتر موبایل */
/* جستجو بالای فهرست و «بیشتر» پایین آن می‌چسبند؛ سایهٔ هم‌رنگ سطح، گزینه‌هایی را که زیرشان رد می‌شوند می‌پوشاند */
/* سرچ‌بار بدون پس‌زمینه، با خط دور واضح: دیگر شبیه یک ردیفِ کم‌رنگِ فهرست نیست، ولی پررنگ هم نمی‌شود */
.tk3 .tk3-find{position:sticky;top:0;z-index:1;flex:none;display:flex;align-items:center;gap:8px;height:40px;min-height:40px;margin:0 0 6px;padding:0 12px;border:1px solid var(--sk-line-strong);border-radius:8px;background:var(--sk-surface);color:var(--sk-ink-soft);box-shadow:0 -6px 0 0 var(--sk-surface),0 6px 0 0 var(--sk-surface);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease}
.tk3 .tk3-find:hover{border-color:color-mix(in srgb,var(--sk-ink) 28%,transparent)}
.tk3 .tk3-find:focus-within{border-color:var(--sk-ink-soft);color:var(--sk-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--sk-ink) 9%,transparent),0 -6px 0 0 var(--sk-surface),0 6px 0 0 var(--sk-surface)}
.tk3 .tk3-find > svg{flex:none;width:17px;height:17px}
.tk3 .tk3-find input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--sk-ink);font:inherit;font-size:13.5px;outline:none;-webkit-appearance:none;appearance:none}
.tk3 .tk3-find input::placeholder{color:var(--sk-ink-soft);opacity:.8}
.tk3 .tk3-find input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.tk3 .tk3-find-x{flex:none;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:999px;background:var(--sk-line);color:var(--sk-ink-soft);cursor:pointer}
.tk3 .tk3-find-x[hidden]{display:none}
.tk3 .tk3-find-x:hover{background:var(--sk-line-strong);color:var(--sk-ink)}
.tk3 .tk3-find-x svg{width:12px;height:12px}
.tk3 .tk3-list.is-collapsed .tk3-opt.tk3-extra{display:none}
.tk3 .tk3-list.is-searching .tk3-opt{display:none}
.tk3 .tk3-list.is-searching .tk3-opt.is-match{display:flex}
.tk3 .tk3-find-empty{flex:none;margin:0;padding:14px 12px;text-align:center;font-size:12.5px;color:var(--sk-ink-faint)}
.tk3 .tk3-find-empty[hidden]{display:none}
.tk3 .tk3-more{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;flex:none;width:100%;min-height:38px;margin-top:4px;padding:0 12px;border:0;border-top:1px solid var(--sk-line);border-radius:0 0 6px 6px;background:var(--sk-surface);box-shadow:0 6px 0 0 var(--sk-surface);color:var(--sk-ink-soft);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tk3 .tk3-more[hidden]{display:none}
.tk3 .tk3-more:hover{background:var(--sk-surface-2);color:var(--sk-ink)}
.tk3 .tk3-more .n{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--sk-surface-2);color:var(--sk-ink-soft);font-size:11px;font-weight:700}
.tk3 .tk3-more:hover .n{background:var(--sk-surface)}
.tk3 .tk3-more svg{flex:none;width:15px;height:15px;transition:transform .2s ease}
.tk3 .tk3-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.tk3 .tk3-find-x:focus-visible,.tk3 .tk3-more:focus-visible{outline:2px solid var(--sk-amber);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.tk3 .tk3-more svg,.tk3 .tk3-find{transition:none}}
/* نوار اسکرول مینیمال فهرست کناری: در حالت عادی دیده نمی‌شود؛ با رفتن ماوس روی فهرست (یا فوکوس داخل آن) یک خط
   گرد ۴px بدون فلش ظاهر می‌شود و روی خودِ نوار کمی پررنگ‌تر می‌شود (تم شب با همان متغیرها).
   کروم ۱۲۱+ تا وقتی scrollbar-width/scrollbar-color تنظیم باشد ::-webkit-scrollbar را نادیده می‌گیرد و نوار ویندوزیِ
   فلش‌دار می‌کشد؛ پس در مرورگرهایی که آن شبه‌عنصر را می‌شناسند (کروم، اج، سافاری) آن دو به auto برمی‌گردند.
   فایرفاکس ::-webkit-scrollbar ندارد و همان scrollbar-width:thin با رنگ ملایم را می‌گیرد. */
.tk3-list{scrollbar-width:thin;scrollbar-color:transparent transparent}
.tk3-list:hover,.tk3-list:focus-within{scrollbar-color:color-mix(in srgb,var(--sk-ink) 22%,transparent) transparent}
@supports selector(::-webkit-scrollbar){.tk3-list,.tk3-list:hover,.tk3-list:focus-within{scrollbar-width:auto;scrollbar-color:auto}}
.tk3-list::-webkit-scrollbar{width:8px;height:8px}
.tk3-list::-webkit-scrollbar-track{background:transparent;margin:10px 0}
.tk3-list::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background-color:transparent;background-clip:padding-box}
.tk3-list:hover::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--sk-ink) 20%,transparent)}
.tk3-list:focus-within::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--sk-ink) 20%,transparent)}
.tk3-list::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--sk-ink) 36%,transparent)}
.tk3-list::-webkit-scrollbar-button{display:none;width:0;height:0}
.tk3-list::-webkit-scrollbar-corner{background:transparent}
/* کشوی فیلتر موبایل: فهرست بلند حالا خودش به ۱۰ مورد محدود است، پس اسکرول تو‌در‌تو (۳۲۰px) لازم نیست و کل کشو اسکرول می‌خورد */
.tk3 .tkc-drawer .tk3-list.tk3-long{max-height:none;overflow:visible}
/* در کشو ظرف اسکرول خودِ کشوست (با padding خودش)؛ چسباندن در آن‌جا باعث دیده‌شدن گزینه‌ها از زیر دکمه می‌شد */
.tk3 .tkc-drawer .tk3-find,.tk3 .tkc-drawer .tk3-more{position:static}
.tk3 .tkc-drawer .tk3-find{box-shadow:none}
.tk3 .tkc-drawer .tk3-more{box-shadow:none}

/* narrow screens: the same targeted filters open inside the filter drawer, as its first section
   (JS moves the element there below 1024px and back beside the list above it) */
.tkc-drawer .tk3-side{position:static;top:auto;max-height:none;display:flex;flex-direction:column;gap:10px;padding:14px 0 16px;border-bottom:1px solid var(--sk-line)}
.tk3 .tkc-drawer .tk3-list{flex-direction:column;gap:2px;max-height:320px;overflow-x:hidden;overflow-y:auto;padding:6px;border:1px solid var(--sk-line);border-radius:8px;background:var(--sk-surface)}
.tk3 .tkc-drawer .tk3-list[hidden]{display:none}
.tk3 .tkc-drawer .tk3-opt{flex:initial;min-height:42px;border:0;border-radius:6px;background:transparent}
.tk3 .tkc-drawer .tk3-opt.is-on{background:color-mix(in srgb,var(--sk-ink) 7%,transparent)}

/* the drawer keeps everything else; jobs, skills and tools now live in the side column */
.tk3 .tkc-drawer [data-fg="job"],.tk3 .tkc-drawer [data-fg="skill"],.tk3 .tkc-drawer [data-fg="tool"]{display:none}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .tk3 #marketItems:not(.is-list){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .tk3-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  /* the side column moves into the filter drawer (JS); hidden here so it never flashes above the list */
  .tk3-layout > .tk3-side{display:none}
}
@media (max-width:720px){
  .tk3 #marketItems:not(.is-list){grid-template-columns:minmax(0,1fr)}
}