/* ==========================================================================
   Direcstaff hiring tools (T2). Shared components for every page in /tools/.
   Loaded after css/nav.css, so the --t2-* tokens are available.
   Every tool runs in the browser; nothing is sent anywhere until a visitor
   submits a form themselves.
   ========================================================================== */

.tl-wrap{max-width:var(--t2-max);margin:0 auto;padding:clamp(48px,6vw,88px) var(--t2-gut);box-sizing:border-box}
.tl-intro{max-width:760px;margin:0 0 40px}
.tl-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--t2-ink-3);margin:0 0 18px}
.tl-eyebrow::before{content:"";display:block;width:28px;height:1.5px;background:linear-gradient(90deg,var(--t2-cyan),var(--t2-blue))}
.tl-h2{margin:0 0 14px;font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.06;color:var(--t2-ink)}
.tl-lede{margin:0;font-size:18px;line-height:1.6;color:var(--t2-ink-2)}

/* two-column tool layout: inputs left, live answer right */
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.tl-grid.tl-grid-even{grid-template-columns:1fr 1fr}
.tl-card{background:#fff;border-radius:22px;padding:clamp(22px,3vw,34px);box-shadow:0 0 0 1px var(--t2-line) inset,0 24px 60px -36px rgba(11,26,46,.35)}
.tl-card+.tl-card{margin-top:20px}
.tl-card-title{margin:0 0 18px;font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--t2-ink)}
.tl-sticky{position:sticky;top:104px}

/* fields */
.tl-field{display:flex;flex-direction:column;gap:7px;margin:0 0 18px}
.tl-field>span,.tl-label{font-size:14px;font-weight:500;color:var(--t2-ink-2)}
.tl-field small,.tl-hint{font-size:12.5px;color:var(--t2-ink-3);line-height:1.45}
.tl-input,.tl-field input[type=number],.tl-field input[type=text],.tl-field input[type=date],.tl-field select,.tl-field textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid var(--t2-line-2);background:#fff;font:inherit;font-size:16px;color:var(--t2-ink);transition:border-color .2s,box-shadow .2s}
.tl-field textarea{min-height:200px;line-height:1.55;resize:vertical}
.tl-input:focus,.tl-field input:focus,.tl-field select:focus,.tl-field textarea:focus{outline:none;border-color:var(--t2-blue);box-shadow:0 0 0 4px rgba(31,111,235,.14)}
.tl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-range{width:100%;accent-color:var(--t2-blue-d)}
.tl-range-val{font-family:var(--t2-mono);font-size:13px;color:var(--t2-ink)}

/* segmented choices (radio groups styled as pills) */
.tl-seg{display:flex;flex-wrap:wrap;gap:8px}
.tl-seg label{position:relative}
.tl-seg input{position:absolute;opacity:0;pointer-events:none}
.tl-seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--t2-line-2);background:#fff;font-size:14px;font-weight:500;color:var(--t2-ink-2);cursor:pointer;transition:all .2s}
.tl-seg input:checked+span{background:var(--t2-ink);border-color:var(--t2-ink);color:#fff}
.tl-seg input:focus-visible+span{outline:2.5px solid var(--t2-blue);outline-offset:2px}

/* the live answer */
.tl-answer{position:relative;overflow:hidden;border-radius:22px;padding:clamp(24px,3.4vw,40px);color:#fff;background:radial-gradient(70% 90% at 92% 118%,rgba(255,178,122,.40),rgba(255,150,80,0) 70%),radial-gradient(60% 60% at 8% -10%,rgba(0,180,230,.16),rgba(0,180,230,0) 70%),linear-gradient(180deg,#0B1A2E,#13294A)}
.tl-answer-k{margin:0 0 10px;font-size:14px;color:rgba(255,255,255,.72)}
.tl-answer-v{margin:0;font-family:"Switzer",var(--t2-font);font-weight:600;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.tl-answer-s{margin:14px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.86);max-width:48ch}
.tl-answer .tl-flag{display:inline-flex;margin-top:18px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;font:500 12px/1.2 var(--t2-mono);letter-spacing:.04em;text-transform:uppercase}

/* stats row, tables, notes */
.tl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--t2-line-2);border-bottom:1px solid var(--t2-line-2);margin:22px 0}
.tl-stat{padding:18px 16px}
.tl-stat+.tl-stat{border-left:1px solid var(--t2-line)}
.tl-stat b{display:block;font-family:"Switzer",var(--t2-font);font-weight:600;font-size:26px;letter-spacing:-.04em;color:var(--t2-ink);font-variant-numeric:tabular-nums}
.tl-stat span{display:block;margin-top:6px;font:500 11.5px/1.35 var(--t2-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--t2-ink-3)}
.tl-table{width:100%;border-collapse:collapse;font-size:14.5px}
.tl-table th{text-align:left;padding:10px 12px;font:500 11.5px/1.2 var(--t2-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2-ink-3);background:var(--t2-sky-2);border-bottom:1px solid var(--t2-line-2)}
.tl-table td{padding:11px 12px;border-bottom:1px solid var(--t2-line);color:var(--t2-ink-2);vertical-align:top}
.tl-table td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--t2-ink)}
.tl-note{margin:18px 0 0;font-size:13.5px;line-height:1.55;color:var(--t2-ink-3)}
.tl-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px var(--t2-line-2) inset;font:500 11.5px/1 var(--t2-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--t2-ink-2)}
.tl-chip.is-warn{box-shadow:0 0 0 1px rgba(255,150,80,.55) inset;color:#8A4B12;background:#FFF7EF}
.tl-chip.is-good{box-shadow:0 0 0 1px rgba(31,111,235,.35) inset;color:var(--t2-blue-d);background:var(--t2-sky-2)}

/* buttons inside tools */
.tl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tl-btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--t2-line-2);background:#fff;color:var(--t2-ink);font:500 15px var(--t2-font);cursor:pointer;text-decoration:none}
.tl-btn-ghost:hover{border-color:rgba(11,26,46,.3);background:var(--t2-sky-2)}

/* explainer copy under the tool */
.tl-prose{max-width:760px}
.tl-prose h2{font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.03em;margin:48px 0 14px;color:var(--t2-ink)}
.tl-prose h3{font-size:19px;font-weight:500;margin:28px 0 8px;color:var(--t2-ink)}
.tl-prose p,.tl-prose li{font-size:17px;line-height:1.7;color:var(--t2-ink-2)}
.tl-prose a{color:var(--t2-blue-d);text-underline-offset:3px}

/* related tools and pages */
.tl-related{margin-top:64px;padding-top:40px;border-top:1px solid var(--t2-line-2)}
.tl-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.tl-related a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--t2-line) inset;text-decoration:none;transition:box-shadow .25s,transform .25s var(--t2-ease)}
.tl-related a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--t2-line-2) inset,0 16px 34px -22px rgba(11,26,46,.4)}
.tl-related a b{font-size:16px;font-weight:500;color:var(--t2-ink)}
.tl-related a span{font-size:14px;color:var(--t2-ink-3);line-height:1.45}
.tl-related a em{font-style:normal;font:500 11px/1 var(--t2-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2-blue-d)}

/* tools hub */
.tl-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--t2-line-2);border-left:1px solid var(--t2-line-2)}
@media (min-width:900px){.tl-hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tl-hub a{position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:30px 28px;border-right:1px solid var(--t2-line-2);border-bottom:1px solid var(--t2-line-2);text-decoration:none;background:transparent;transition:background .3s}
.tl-hub a::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 0% 0%,rgba(0,180,230,.09),rgba(0,180,230,0) 70%)}
.tl-hub a:hover{background:#fff}
.tl-hub a em{font-style:normal;font:500 11.5px/1 var(--t2-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2-ink-3)}
.tl-hub a b{font-size:21px;font-weight:500;letter-spacing:-.02em;color:var(--t2-ink)}
.tl-hub a span{font-size:15px;line-height:1.55;color:var(--t2-ink-2)}
.tl-hub a i{margin-top:auto;font-style:normal;font-size:14px;font-weight:500;color:var(--t2-blue-d)}

@media (max-width:900px){
  .tl-grid,.tl-grid.tl-grid-even{grid-template-columns:1fr}
  .tl-sticky{position:static}
  .tl-row{grid-template-columns:1fr}
}
@media print{
  #site-nav,#site-footer,.tl-related,.tl-actions,.hero{display:none!important}
  .tl-card,.tl-answer{box-shadow:none;border:1px solid #ccc;color:#000;background:#fff}
}

/* One hero for every tool page: left aligned to the same column as .tl-wrap.
   Overrides the per-page hero styles so the nine pages match. */
html body section.hero:not(#hero){padding:clamp(120px,13vw,160px) max(var(--t2-gut),calc((100% - var(--t2-max)) / 2 + var(--t2-gut))) clamp(56px,6vw,84px)!important;text-align:left!important;min-height:0!important;display:block!important}
html body section.hero:not(#hero) .hero-inner,html body section.hero:not(#hero) .hero-content,html body section.hero:not(#hero) .container{max-width:none!important;margin:0!important;padding:0!important;text-align:left!important}
html body section.hero:not(#hero) .breadcrumb{margin:0 0 18px!important;font-size:14px!important;justify-content:flex-start}
html body section.hero:not(#hero) h1{font-size:clamp(40px,5.2vw,76px)!important;line-height:1!important;letter-spacing:-.045em!important;max-width:16ch!important;margin:0 0 18px!important}
html body section.hero:not(#hero) h1+p,html body section.hero:not(#hero) p:not(.breadcrumb){max-width:58ch!important;margin-left:0!important;margin-right:0!important;font-size:18px!important;line-height:1.55!important}