/* =========================================================
   Tahsin Tazwar — Global Tech Sales Talent Network
   Layered on top of styles.css. Every colour, font, radius and shadow here
   resolves to a token the main sheet already defines, so both themes and the
   light/dark toggle keep working with no extra work.
   ========================================================= */

/* ---------- Sub page shell ----------
   The site is header-less by design (the dock is the nav), so a sub page needs
   exactly one quiet way back to the root. */
.subbar { padding:26px 0 0; }
.backlink { display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-head); font-size:13.5px; font-weight:600; color:var(--muted);
  transition:color .2s; }
.backlink:hover { color:var(--accent); }
.brand-mark.sm { width:31px; height:31px; border-radius:9px; font-size:12.5px; }

.tn-page { padding-top:clamp(30px,5vh,54px); }
.tn-head { max-width:820px; }
/* Hero weight, not sub page weight. This is the first thing on the page and it
   carries the whole message, so it is sized like the home page h1. */
.tn-head h1 { font-size:clamp(2.5rem,7.6vw,4.4rem); letter-spacing:-0.048em; line-height:0.96; }
.tn-lead { color:var(--muted); font-size:clamp(1.02rem,2.3vw,1.2rem); margin-top:20px; max-width:560px; }

/* ---------- Disclaimer / privacy note ---------- */
.note { max-width:740px; margin-top:30px; padding:22px 24px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.note-title { font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--text); margin-bottom:7px; }
.note p:last-child { color:var(--muted); font-size:0.97rem; }

/* ---------- The two paths ---------- */
.path-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; }
.path-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 28px; transition:transform .3s, border-color .3s, background .3s; }
.path-card:hover { transform:translateY(-6px); border-color:var(--edge); background:var(--surface-2); }
.path-card[aria-expanded="true"] { border-color:var(--edge); background:var(--surface-2); }
/* Same icon tile as the home page cards, tinted per card the same way. */
.path-ic { display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  margin-bottom:6px; color:var(--accent); background:rgba(204,255,0,0.15); }
.path-ic svg { width:26px; height:26px; }
.path-card:nth-child(2) .path-ic { color:var(--orange); background:rgba(255,138,43,0.15); }
.path-label { font-family:var(--font-head); font-size:1.24rem; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
.path-desc { color:var(--muted); font-size:0.96rem; }
.path-go { margin-top:6px; font-family:var(--font-head); font-size:0.9rem; font-weight:600; color:var(--accent); }
/* Same concentric ripple as the home page cards, so the two pages read as one
   site rather than two. */
.path-card::after { content:""; position:absolute; right:-58px; bottom:-58px;
  width:196px; height:196px; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(204,255,0,0.14) 0 1px, transparent 1px 15px);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 32%, transparent 72%);
          mask:radial-gradient(circle at 50% 50%, #000 32%, transparent 72%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.path-card:hover::after { transform:scale(1.14); }
.path-card:nth-child(2)::after { background:repeating-radial-gradient(circle at 50% 50%, rgba(255,138,43,0.14) 0 1px, transparent 1px 15px); }

/* ---------- Form panel ---------- */
.form-panel { max-width:760px; margin-top:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(26px,4.5vw,44px); box-shadow:var(--shadow); }
.form-panel > h2 { font-size:clamp(1.4rem,3.4vw,1.9rem); margin-bottom:8px; }
.form-intro { color:var(--muted); font-size:0.98rem; margin-bottom:26px; }

/* Field groups. No rules or dividers, spacing alone carries the grouping,
   which keeps the panel quiet. */
.fieldset { border:0; margin:0 0 26px; padding:0; }
.fieldset > legend { display:flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:0; margin-bottom:16px; }
/* One icon per group, so the eye can find a section without reading it. */
.fieldset > legend svg { width:15px; height:15px; flex:none; color:var(--accent); }

.field { margin-bottom:20px; }
.field:last-child { margin-bottom:0; }
/* A .field can itself be a <fieldset> (the multi select groups), and a fieldset
   carries a UA border that the global reset does not clear. */
fieldset.field { border:0; min-width:0; }
.field > label, .field-label { display:block; font-family:var(--font-head); font-size:13.5px; font-weight:600;
  color:var(--text); margin-bottom:8px; }
.req { color:var(--accent); margin-left:2px; }
.opt { color:var(--faint); font-weight:500; margin-left:6px; letter-spacing:0; }
.hint { display:block; color:var(--faint); font-size:12.5px; font-weight:400; margin-top:6px; }

/* ---------- Controls ---------- */
.input, .select, .textarea {
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-btn);
  padding:14px 16px; transition:border-color .2s, box-shadow .2s, background .2s; }
.input::placeholder, .textarea::placeholder { color:var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color:var(--edge); }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow); background:var(--surface-2); }
.textarea { min-height:132px; resize:vertical; line-height:1.55; }
/* Number spinners add visual noise and let a stray scroll change the value. */
.input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* Date inputs paint their own icon; on the dark theme it ships near black. */
.input[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.6; }
:root[data-theme="dark"] .input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1); }

/* The native select arrow differs per platform, so it is replaced with one
   chevron that matches the rest of the type. */
.select-wrap { position:relative; }
.select { appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer; }
.select-wrap::after { content:""; position:absolute; right:16px; top:50%; width:10px; height:10px;
  margin-top:-6px; pointer-events:none; border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg); border-radius:1px; }
/* Option lists are painted by the OS and need explicit colours, or they render
   dark on dark in several engines. */
.select option { background:var(--menu-solid); color:var(--text); }

/* Currency + amount pair */
.amount-row { display:grid; grid-template-columns:118px 1fr; gap:10px; }
.amount-row .select { padding-right:34px; }
.amount-row .select-wrap::after { right:12px; }

/* ---------- Multi select as pills ---------- */
.pill-grid { display:flex; flex-wrap:wrap; gap:10px; }
.pill { position:relative; display:inline-flex; align-items:center; cursor:pointer;
  font-family:var(--font-head); font-size:0.92rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:10px 17px; transition:color .2s, background .2s, border-color .2s, transform .18s; }
.pill:hover { color:var(--text); border-color:var(--edge); transform:translateY(-2px); }
/* The checkbox stays in the layout rather than display:none, so it keeps a real
   focus target and stays reachable by assistive tech. */
.pill input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
/* is-on is mirrored by talent.js so engines without :has() still show state. */
.pill.is-on { color:var(--on-accent); background:var(--grad); border-color:transparent; }
.pill:has(input:focus-visible) { box-shadow:0 0 0 3px var(--accent-glow); }

/* ---------- File input ---------- */
.file-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.file-btn { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-btn);
  padding:13px 20px; transition:background .2s, border-color .2s; }
.file-btn:hover { background:var(--surface-2); border-color:var(--edge); }
.file-input { position:absolute; width:1px; height:1px; opacity:0; }
.file-input:focus-visible + .file-btn { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.file-name { font-size:13.5px; color:var(--muted); overflow-wrap:anywhere; min-width:0; }
.file-name.has-file { color:var(--text); }
.file-clear { background:none; border:0; cursor:pointer; padding:4px; color:var(--faint);
  font-family:var(--font-head); font-size:13px; font-weight:600; text-decoration:underline; }
.file-clear:hover { color:var(--accent); }

/* ---------- Counters, errors, conditional blocks ---------- */
.counter { display:block; text-align:right; font-size:12px; color:var(--faint); margin-top:6px;
  font-variant-numeric:tabular-nums; }
.counter.over { color:var(--orange); }

.field-error { display:none; font-size:12.5px; color:var(--orange); margin-top:7px; }
.field.has-error .field-error { display:block; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea,
.field.has-error .file-btn { border-color:var(--orange); }
.field.has-error .pill-grid .pill { border-color:rgba(255,138,43,0.5); }

[hidden] { display:none !important; }

/* ---------- Submit area ---------- */
.form-foot { margin-top:28px; }
.privacy-note { color:var(--faint); font-size:12.8px; max-width:540px; margin-bottom:10px; }
.privacy-note:last-of-type { margin-bottom:18px; }
.btn[disabled] { opacity:.6; cursor:not-allowed; }
.btn[disabled]:hover { transform:none; }

/* Spinner reuses the lime that already signals activity elsewhere. */
.spinner { width:15px; height:15px; border-radius:50%; border:2px solid rgba(13,20,0,0.3);
  border-top-color:var(--on-accent); animation:spin .7s linear infinite; }

.progress { height:4px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:16px; }
.progress-bar { height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .2s ease; }
/* In flight, where no real percentage exists. See the note above post() in
   talent.js: measuring the upload would force a CORS preflight that an Apps
   Script Web App cannot answer. */
.progress-bar.indeterminate { width:38%; transition:none; animation:progressSlide 1.15s ease-in-out infinite; }
@keyframes progressSlide { from { transform:translateX(-110%); } to { transform:translateX(300%); } }
.progress-label { display:block; font-size:12.5px; color:var(--muted); margin-top:8px; }

.form-alert { margin-top:18px; padding:14px 16px; border-radius:var(--radius-btn);
  font-size:14px; color:var(--text);
  background:rgba(255,138,43,0.1); border:1px solid rgba(255,138,43,0.42); }

/* ---------- Success ---------- */
.form-done { text-align:center; padding:clamp(30px,6vw,54px) 24px; }
.done-mark { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 22px;
  border-radius:50%; background:var(--grad); color:var(--on-accent); }
.done-mark svg { width:28px; height:28px; }
.form-done h2 { font-size:clamp(1.3rem,3.4vw,1.75rem); margin-bottom:12px; }
.form-done p { color:var(--muted); font-size:1rem; max-width:440px; margin:0 auto; }
.form-done .btn { margin-top:26px; }

/* Hidden from the screen, still announced. Used where the visible label sits on
   the group rather than on the individual control. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- Honeypot ----------
   Positioned off screen rather than display:none: some bots skip fields that
   are never rendered, and this one exists to be filled in. */
.hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- Focus states ---------- */
.path-card:focus-visible, .btn:focus-visible, .backlink:focus-visible,
.file-clear:focus-visible, .dock-item:focus-visible, .dock-center:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; }

.noscript-note { margin-top:24px; }

/* ---------- Responsive ---------- */
@media (max-width:760px) {
  .path-cards { grid-template-columns:1fr; gap:14px; }
  .path-card { padding:24px 22px; }
}
@media (max-width:560px) {
  .form-panel { padding:24px 18px; border-radius:var(--radius); }
  .note { padding:20px 18px; }
  /* 16px is the threshold below which iOS zooms the page on field focus. */
  .input, .select, .textarea { font-size:16px; padding:13px 14px; }
  .amount-row { grid-template-columns:104px 1fr; gap:8px; }
  .pill { font-size:0.88rem; padding:9px 15px; }
  .pill-grid { gap:8px; }
  .form-foot .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .path-card:hover, .pill:hover { transform:none; }
  .path-card:hover::after { transform:none; }
  .spinner { animation:none; }
  /* The bar still has to say "something is happening", so it fills rather
     than disappears. */
  .progress-bar.indeterminate { animation:none; width:100%; }
}