/* ═══════════════════════════════════════════════════════════════════════
   Jobs workspace (features/job_tracker/templates/jobs.html)
   Nate's "Jobs Workspace" design (Design/Career-Fast-Pass-Jobs-Workspace-
   Final.html): a calm grey-blue page with teal only as the accent
   (core/app_shell.py TOOL_COLORS "jobs": --color-primary #087c74, --tool-
   bright #0f9f94). A school account's colour replaces the teal.
   Each stage has its own colour (the design's stage strip), set by
   [data-stage]. Text 13px and up (16px in fields), 44px touch targets; on
   phones the application detail is a full-screen sheet.
   ═══════════════════════════════════════════════════════════════════════ */

.jw {
  --jw-navy: #071a42;
  --jw-ink: #0f172a;
  --jw-text: #24324a;
  --jw-muted: #64748b;
  --jw-line: #dbe4ef;
  --jw-line-2: #c8d4e2;
  --jw-accent: var(--color-primary, #087c74);
  --jw-accent-dk: var(--color-primary-hover, #05675f);
  --jw-bright: var(--tool-bright, var(--color-primary, #0f9f94));
  --jw-mint: color-mix(in srgb, var(--jw-bright) 10%, #fff);
  --jw-mint-line: color-mix(in srgb, var(--jw-bright) 32%, #fff);
  --jw-shadow: 0 10px 26px rgba(15, 23, 42, .06);
  padding: 0;
  color: var(--jw-text); font-size: 15px; line-height: 1.5;
}
.jw *, .jw *::before, .jw *::after { box-sizing: border-box; }
.jw [hidden] { display: none !important; }
.jw h1, .jw h2, .jw h3 { color: var(--jw-ink); letter-spacing: -.02em; margin: 0; }
.jw h2 { font-size: 17px; line-height: 1.3; }
.jw h3 { font-size: 15px; margin-bottom: 8px; }
.jw p { margin: 0; }
.jw svg { width: 18px; height: 18px; flex: 0 0 auto; }
.jw :focus-visible { outline: 3px solid color-mix(in srgb, var(--jw-bright) 40%, transparent); outline-offset: 2px; }
.jw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jw-muted { color: var(--jw-muted); }
.jw-small { font-size: 13px; margin-top: 8px !important; }
.jw-mini { display: block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8793a4; }
.jw-hint { font-size: 13px; font-weight: 500; color: var(--jw-muted); }

/* Stage colours (the design's) */
.jw [data-stage="preparing"]           { --st: #64748b; --st-bg: #f1f5f9; --st-line: #cbd5e1; }
.jw [data-stage="applied"]             { --st: #2563eb; --st-bg: #eff6ff; --st-line: #bfdbfe; }
.jw [data-stage="interview_scheduled"] { --st: #7c3aed; --st-bg: #f5f3ff; --st-line: #ddd6fe; }
.jw [data-stage="interviewed"]         { --st: #4f46e5; --st-bg: #eef2ff; --st-line: #c7d2fe; }
.jw [data-stage="offer_received"]      { --st: #c2410c; --st-bg: #fff7ed; --st-line: #fed7aa; }
.jw [data-stage="hired"]               { --st: #15803d; --st-bg: #f0fdf4; --st-line: #bbf7d0; }
.jw [data-stage="rejected"]            { --st: #dc2626; --st-bg: #fef2f2; --st-line: #fecaca; }
.jw [data-stage="withdrawn"]           { --st: #6b7280; --st-bg: #f3f4f6; --st-line: #d1d5db; }
.jw [data-stage="saved"]               { --st: #087c74; --st-bg: #effbfa; --st-line: #b7ebe3; }

/* Header, tabs */
/* The header is the same slim white bar as the builders' (Nate, 2026-10-15,
   option B). The page itself sits centred in .jw-body. */
.jw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 12px 24px; min-height: 72px;
  background: #fff; border-bottom: 3px solid var(--jw-accent); }
.jw .jw-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: var(--tool-ink, var(--jw-accent)); }
.jw-title-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--jw-accent); color: #fff; }
.jw-title-ic svg { width: 20px; height: 20px; }
.jw-head-meta { margin: 0; font-size: 14px; color: var(--jw-muted); }
.jw-body { max-width: 1240px; margin: 0 auto; padding: 20px 28px 40px; }
.jw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jw-tabs { display: flex; width: min(540px, 100%); background: #fff; border: 1px solid var(--jw-line); border-radius: 12px; padding: 4px; box-shadow: 0 2px 5px rgba(15, 23, 42, .03); }
.jw-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 0; border-radius: 9px;
  background: transparent; font: inherit; font-size: 14px; font-weight: 750; color: #53627a; cursor: pointer; white-space: nowrap; }
.jw-tab:hover { color: var(--jw-ink); }
.jw-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--jw-bright), var(--jw-accent)); color: #fff; box-shadow: 0 5px 12px color-mix(in srgb, var(--jw-bright) 22%, transparent); }
.jw-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #eef2f6; color: var(--jw-navy);
  font-size: 12px; font-weight: 800; letter-spacing: 0; }
.jw-tab[aria-selected="true"] .jw-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* Buttons */
.jw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1.5px solid transparent; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; text-decoration: none; white-space: nowrap; }
.jw-btn:disabled { opacity: .6; cursor: default; }
.jw-btn-sm { min-height: 40px; padding: 0 13px; font-size: 14px; }
.jw-btn svg { width: 16px; height: 16px; }
.jw-btn-primary { background: linear-gradient(135deg, var(--jw-bright), var(--jw-accent)); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--jw-bright) 20%, transparent); }
.jw-btn-primary:hover:not(:disabled) { filter: brightness(.95); }
.jw-btn-outline { background: #fff; border-color: var(--jw-accent); color: var(--jw-accent-dk); }
.jw-btn-outline:hover:not(:disabled) { background: var(--jw-mint); }
.jw-btn-mint { background: var(--jw-mint); border-color: var(--jw-mint-line); color: var(--jw-accent-dk); }
.jw-btn-ghost { background: #fff; border-color: var(--jw-line-2); color: var(--jw-navy); }
.jw-btn-ghost:hover:not(:disabled) { background: #f8fafc; }
.jw-plus { font-size: 20px; line-height: 1; font-weight: 600; }
.jw-link, .jw-link-danger { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; min-height: 40px; padding: 0 6px; border-radius: 8px; }
.jw-link { color: var(--jw-accent-dk); }
.jw-link:hover { text-decoration: underline; }
.jw-link-danger { color: #b91c1c; }
.jw-link-danger[data-sure="1"] { background: #fef2f2; }
.jw-row-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jw-error { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.jw-tag { display: inline-flex; width: max-content; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--jw-line); background: #f8fafc; color: #526074; font-size: 12px; font-weight: 700; }
.jw-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; background: #eef2f7; color: #59677b; font-size: 12px; font-weight: 800; white-space: nowrap; }
.jw-badge-mint { background: var(--jw-mint); color: var(--jw-accent-dk); }

/* Cards */
.jw-card { background: #fff; border: 1px solid var(--jw-line); border-radius: 14px; box-shadow: var(--jw-shadow); padding: 18px; }
.jw-card + .jw-card { margin-top: 14px; }
.jw-empty { text-align: center; padding: 36px 24px; max-width: 640px; margin: 8px auto 0; }
.jw-empty p { color: var(--jw-muted); margin: 8px auto 18px; }
.jw-empty-line { padding: 10px 2px; }
.jw-pill { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; background: #fdf0c4; border: 1px solid #e9c262; color: #7a4d00; margin-bottom: 10px; }
.jw-list-head { margin-bottom: 12px; }
.jw-list-head h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.jw-list-head h2 .jw-count { background: var(--jw-mint); color: var(--jw-accent-dk); }
.jw-list-head .jw-muted { font-size: 14px; margin-top: 4px; max-width: 720px; }
.jw-list-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Company tiles: initials in a steady colour, or the company's logo */
.jw-tile { width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #475569;
  font-weight: 850; font-size: 13px; letter-spacing: .01em; overflow: hidden; }
.jw-tile-lg { width: 46px; height: 46px; font-size: 14px; }
.jw-tile-logo { background: #fff !important; border: 1px solid #e1e6ec; box-shadow: 0 3px 8px rgba(15, 23, 42, .08); padding: 4px; }
.jw-tile img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; }

/* Inputs */
.jw-input, .jw-select { width: 100%; min-height: 44px; border: 1.5px solid var(--jw-line-2); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 16px;
  color: var(--jw-ink); background: #fff; outline: 0; }
textarea.jw-input { resize: vertical; line-height: 1.5; }
.jw-input:focus, .jw-select:focus { border-color: var(--jw-bright); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jw-bright) 12%, transparent); }
.jw-label { display: block; font-size: 14px; font-weight: 700; color: var(--jw-navy); margin: 12px 0 6px; }
.jw-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--jw-navy); }
/* minmax(0, 1fr) and min-width 0: a date or time box's built-in width can't
   push the panel wider (kit test pass F2, 2026-11-01). */
.jw-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.jw-two > *, .jw-two .jw-input { min-width: 0; }
.jw-two input[type="date"], .jw-two input[type="time"] { padding-left: 9px; padding-right: 6px; }
.jw-two .jw-label { margin-top: 12px; }
.jw-searchbox { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 13px; background: #fff; border: 1px solid var(--jw-line); border-radius: 10px; color: #7a8899; cursor: text; }
.jw-searchbox:focus-within { border-color: var(--jw-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jw-bright) 12%, transparent); }
.jw-searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--jw-ink); min-height: 42px; }
.jw-searchbox input::-webkit-search-cancel-button { cursor: pointer; }

/* ── Find Jobs ────────────────────────────────────────────────────────── */
.jw-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 52px; padding: 6px 8px 6px 16px;
  background: #fff; border: 1px solid var(--jw-line); border-radius: 12px; margin-bottom: 12px; color: var(--jw-muted); font-size: 14px; }
.jw-summary strong { color: var(--jw-ink); }
.jw-search-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; margin: 0; }
/* Tablets and zoomed laptops (live pages audit, 2026-10-15): the three-across
   row ran off the screen. Two boxes with the button underneath, then one
   column at 900px and below. */
@media (max-width: 1099px) {
  .jw-search-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jw-search-row .jw-search-go { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .jw-search-row { grid-template-columns: minmax(0, 1fr); }
}
.jw-search-go { min-height: 46px; padding: 0 20px; font-size: 15px; }
.jw-search-go svg { width: 17px; height: 17px; }
.jw-sites-label { align-self: center; font-size: 14px; font-weight: 600; color: var(--jw-muted); margin-right: 2px; }
.jw-search-help { font-size: 14px; margin: 12px 0 10px !important; }
.jw-sites { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.jw-site { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--jw-line-2);
  background: #fff; color: var(--jw-navy); font-size: 14px; font-weight: 750; text-decoration: none; }
.jw-site svg { width: 15px; height: 15px; color: var(--jw-accent); }
.jw-site:hover { border-color: var(--jw-bright); background: var(--jw-mint); }

/* Job / place / saved cards */
.jw-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jw-jobcard { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px;
  border: 1px solid var(--jw-line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.jw-jobcard:hover { border-color: var(--jw-mint-line); box-shadow: 0 5px 16px color-mix(in srgb, var(--jw-bright) 8%, transparent); }
.jw-jobcard .jw-tile { margin-top: 2px; }
.jw-jobcard-body { min-width: 0; display: grid; gap: 3px; }
.jw-jc-title { color: var(--jw-ink); font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; padding-right: 44px; }
.jw-jc-sub { color: var(--jw-muted); font-size: 14px; }
.jw-jc-note { font-size: 14px; color: #475569; margin-top: 4px !important; }
.jw-jc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--jw-muted); margin-top: 4px !important; }
.jw-jc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jw-tip { font-size: 14px; color: var(--jw-ink); background: #f8fafc; border: 1px solid var(--jw-line); border-radius: 8px; padding: 6px 10px; margin-top: 6px !important; overflow-wrap: anywhere; }
.jw-places .jw-jc-title, #jwPlaces .jw-jc-title { padding-right: 0; }
.jw-unsave { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 40px; justify-content: center;
  padding: 0 9px; border: 0; border-radius: 9px; background: none; color: var(--jw-accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.jw-unsave svg { width: 20px; height: 20px; fill: currentColor; }
.jw-unsave:hover { background: var(--jw-mint); }
.jw-unsave[data-sure="1"] { background: #fef2f2; color: #b91c1c; }
.jw-unsave-t:empty { display: none; }

/* ── Saved ────────────────────────────────────────────────────────────── */
.jw-intro { display: flex; align-items: flex-start; gap: 12px; background: var(--jw-mint); border: 1px solid var(--jw-mint-line); padding: 13px 16px; border-radius: 12px;
  margin-bottom: 12px; color: var(--jw-accent-dk); }
.jw-intro svg { width: 20px; height: 20px; margin-top: 1px; }
.jw-intro strong { font-size: 15px; color: var(--jw-accent-dk); }
.jw-intro p { font-size: 14px; color: color-mix(in srgb, var(--jw-accent-dk) 75%, #475569); margin-top: 2px !important; }

/* ── My Applications ─────────────────────────────────────────────────── */
.jw-rec { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; min-height: 82px; padding: 14px 16px; margin-bottom: 12px;
  border-radius: 13px; color: #fff; background: linear-gradient(112deg, var(--jw-accent-dk), var(--jw-bright) 62%, var(--jw-accent));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--jw-accent-dk) 20%, transparent); }
.jw-rec .jw-tile { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.jw-rec .jw-tile:not(.jw-tile-logo) { background: #fff !important; color: var(--jw-accent-dk); }
.jw-rec-main { min-width: 0; }
.jw-rec-eyebrow { font-size: 12px; font-weight: 700; opacity: .88; }
.jw .jw-rec-title { color: #fff; font-size: 18px; margin: 1px 0 2px; overflow-wrap: anywhere; }
.jw-rec-sub { font-size: 13px; opacity: .92; }
.jw-rec-due { display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .28); font-size: 12px; white-space: nowrap; }
.jw-rec-due span { opacity: .85; }
.jw-rec-due strong { display: inline-flex; align-items: center; gap: 6px; color: #ffd58a; font-size: 15px; }
.jw-rec-due svg { width: 16px; height: 16px; }
.jw-rec-go { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .7);
  background: #fff; color: var(--jw-accent-dk); font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.jw-rec-go:hover { background: #f0fdfa; }
.jw-rec-go svg { width: 16px; height: 16px; }

.jw-stages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); background: #fff; border: 1px solid var(--jw-line); border-radius: 11px;
  overflow: hidden; margin-bottom: 12px; }
.jw-stage { display: grid; gap: 3px; justify-items: center; align-content: center; min-height: 66px; padding: 10px 4px 8px; border: 0; border-right: 1px solid var(--jw-line);
  background: #fff; cursor: pointer; font: inherit; color: var(--st); box-shadow: inset 0 4px 0 var(--st); transition: background .15s; }
.jw-stage:last-child { border-right: 0; }
.jw-stage:hover { background: var(--st-bg); }
.jw-stage-on { background: var(--st-bg); box-shadow: inset 0 4px 0 var(--st), inset 0 0 0 2px var(--st-line); }
.jw-stage-l { font-size: 12px; font-weight: 750; text-align: center; line-height: 1.2; }
.jw-stage-n { font-size: 18px; font-weight: 800; color: var(--st); line-height: 1.1; }

.jw-tools { display: grid; grid-template-columns: minmax(200px, 1fr) 160px auto; gap: 8px; margin-bottom: 14px; align-items: center; }
.jw-select { min-height: 46px; font-size: 14px; font-weight: 700; padding: 0 10px; border-width: 1px; border-color: var(--jw-line); }
.jw-filters { display: flex; gap: 6px; }
.jw-filters button { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--jw-line); background: #fff;
  font: inherit; font-size: 13px; font-weight: 750; color: var(--jw-navy); cursor: pointer; white-space: nowrap; }
.jw-filters button svg { width: 16px; height: 16px; color: #526074; }
.jw-filters button:hover { border-color: var(--jw-line-2); }
.jw-filters button[aria-pressed="true"] { border-color: var(--jw-bright); background: var(--jw-mint); color: var(--jw-accent-dk); }
.jw-filters button[aria-pressed="true"] svg { color: var(--jw-accent-dk); }
.jw-filters [data-filter="attention"][aria-pressed="true"] { border-color: #f2b6b8; background: #fff2f2; color: #b4232b; }
.jw-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }

.jw-apps-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.jw-has-detail .jw-apps-wrap { grid-template-columns: minmax(0, 1fr) 360px; }
.jw-group + .jw-group { margin-top: 16px; }
.jw-group-h { display: flex; align-items: center; gap: 8px; font-size: 15px !important; color: var(--jw-accent-dk) !important; margin-bottom: 6px !important; }
.jw-group-n { font-size: 12px; border-radius: 999px; background: var(--jw-mint); padding: 1px 8px; }
.jw-group-attention .jw-group-h { color: #c2410c !important; }
.jw-group-attention .jw-group-n { background: #fff0dd; }
.jw-group-archived .jw-group-h { color: #64748b !important; }
.jw-group-archived .jw-group-n { background: #eef2f6; }
/* The list is a table on desktop: Application · Stage · Next action · Due · ⋯ */
.jw-thead, .jw-row { display: grid; grid-template-columns: minmax(180px, 1.35fr) minmax(130px, .85fr) minmax(130px, 1fr) 104px; gap: 10px; align-items: center; }
.jw-thead { padding: 0 54px 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8491a4; }
.jw-rows { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--jw-line); border-radius: 11px; overflow: hidden; }
.jw-tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; padding-right: 6px; }
.jw-tr + .jw-tr { border-top: 1px solid var(--jw-line); }
.jw-tr:hover { background: #fbfefe; }
.jw-tr-open { background: color-mix(in srgb, var(--jw-bright) 6%, #fff); box-shadow: inset 3px 0 0 var(--jw-bright); }
.jw-row { width: 100%; min-height: 62px; padding: 9px 4px 9px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--jw-text); cursor: pointer; }
.jw-cell-co { display: flex; align-items: center; gap: 11px; min-width: 0; }
.jw-cell-co .jw-tile { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
.jw-row-main { display: grid; min-width: 0; }
.jw-row-main strong { color: var(--jw-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-row-main .jw-muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-cell-stage { min-width: 0; }
.jw-stage-pill { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--st-line); background: var(--st-bg); color: var(--st);
  font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.jw-cell-nd { display: contents; }
.jw-cell-next { color: var(--jw-accent-dk); font-size: 14px; font-weight: 750; line-height: 1.3; }
.jw-cell-due { font-size: 13px; color: var(--jw-muted); font-weight: 650; }
.jw-due-soon { color: #c2410c; font-weight: 800; }
.jw-due-late { color: #dc2626; font-weight: 800; }
.jw-more { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: #475569; cursor: pointer; }
.jw-more:hover, .jw-more[aria-expanded="true"] { background: #f1f5f9; color: var(--jw-ink); }
.jw-more svg { width: 20px; height: 20px; }

/* ⋯ menu */
.jw-menu { position: fixed; z-index: 160; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; background: #fff; border: 1px solid var(--jw-line);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); display: grid; }
.jw-menu-item { min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; font-weight: 650; color: var(--jw-ink);
  text-align: left; cursor: pointer; }
.jw-menu-item:hover, .jw-menu-item:focus { background: #f1f5f9; outline: 0; }
.jw-menu-danger { color: #b91c1c; }

/* ── Application detail ──────────────────────────────────────────────── */
.jw-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border: 1px solid var(--jw-line);
  border-radius: 14px; box-shadow: 0 14px 36px rgba(15, 23, 42, .08); padding: 16px; }
.jw-d-back { display: none; }
.jw-d-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 40px 40px; gap: 10px; align-items: center; }
.jw-d-titles h2 { font-size: 17px; overflow-wrap: anywhere; }
.jw-d-titles p { font-size: 14px; }
.jw-d-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--jw-muted); cursor: pointer; border-radius: 9px; }
.jw-d-close:hover { background: #f1f5f9; }
.jw-d-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 10px; }
.jw-d-btns .jw-btn { width: 100%; padding: 0 10px; }
.jw-quick { position: relative; display: grid; align-content: center; min-height: 40px; padding: 2px 30px 2px 11px; border: 1.5px solid var(--st-line); border-radius: 10px;
  background: var(--st-bg); color: var(--st); cursor: pointer; }
.jw-quick::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); }
.jw-quick-t { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .8; line-height: 1.2; }
.jw-quick-v { font-size: 14px; font-weight: 800; line-height: 1.2; }
.jw-quick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.jw-quick:focus-within { outline: 3px solid color-mix(in srgb, var(--st) 30%, transparent); outline-offset: 2px; }
.jw-dtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: #f3f6fa; border: 1px solid #e4eaf1; border-radius: 11px; margin-bottom: 12px; }
.jw-dtab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 800; color: #6b7a8f; cursor: pointer; }
.jw-dtab[aria-selected="true"] { background: #fff; color: var(--jw-ink); box-shadow: 0 3px 10px rgba(15, 23, 42, .09); }
.jw-dtab-n { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #e9eef5; color: #66758a; font-size: 12px; }
.jw-dtab[aria-selected="true"] .jw-dtab-n { background: var(--jw-mint); color: var(--jw-accent-dk); }
.jw-dpanel { display: grid; gap: 12px; }

.jw-journey { border: 1px solid #e2e8f0; border-radius: 13px; padding: 14px; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); box-shadow: 0 5px 15px rgba(15, 23, 42, .04); }
.jw-journey-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.jw-journey-h strong { display: block; color: var(--jw-ink); font-size: 16px; margin-top: 3px; }
.jw-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 12px 0; }
.jw-progress i { height: 5px; border-radius: 999px; background: #e2e8f0; }
.jw-progress i.jw-p-done, .jw-progress i.jw-p-cur { background: var(--st); }
.jw-progress i.jw-p-cur { box-shadow: 0 0 0 2px var(--st-bg); }
.jw-upcoming { display: grid; grid-template-columns: 40px 1fr; gap: 11px; align-items: center; padding: 11px; margin-bottom: 12px; border-radius: 11px;
  border: 1px solid #ddd6fe; background: linear-gradient(135deg, #faf8ff, #f3efff); }
.jw-upcoming .jw-mini { color: #7c3aed; }
.jw-upcoming strong { display: block; color: var(--jw-ink); font-size: 14px; }
.jw-upcoming small { color: var(--jw-muted); font-size: 13px; }
.jw-up-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #7c3aed; border: 1px solid #ddd6fe; }
.jw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.jw-stile { position: relative; min-width: 0; min-height: 50px; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 6px 9px;
  border: 1px solid #e1e7ef; border-radius: 10px; background: #fff; text-align: left; font: inherit; color: #526075; cursor: pointer; }
.jw-stile:hover { border-color: var(--st-line); background: var(--st-bg); }
.jw-stile-dot { grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--st-line); background: var(--st-bg);
  color: var(--st); font-size: 11px; font-weight: 850; }
.jw-stile-dot svg { width: 13px; height: 13px; stroke-width: 3; }
.jw-stile strong { font-size: 13px; line-height: 1.2; color: #526075; }
.jw-stile strong:last-child { grid-row: 1 / 3; }
.jw-stile small { font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--st); }
.jw-stile-done { border-color: var(--st-line); }
.jw-stile-done .jw-stile-dot, .jw-stile-cur .jw-stile-dot { background: var(--st); border-color: var(--st); color: #fff; }
.jw-stile-cur { border-color: var(--st); background: linear-gradient(135deg, #fff, var(--st-bg)); box-shadow: 0 5px 13px color-mix(in srgb, var(--st) 13%, transparent); }
.jw-stile-cur strong { color: var(--st); }

.jw-ivedit { display: grid; gap: 10px; padding: 14px; border: 1px solid #ddd6fe; border-radius: 13px; background: #fbfaff; }
.jw-ivedit h3 { margin: 0; }
.jw-next { display: grid; gap: 10px; border: 1px solid var(--jw-mint-line); border-radius: 13px; padding: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--jw-bright) 4%, #fff), var(--jw-mint)); box-shadow: 0 5px 15px color-mix(in srgb, var(--jw-bright) 7%, transparent); }
.jw-next .jw-mini { color: var(--jw-accent-dk); }
.jw-next-t { display: block; color: var(--jw-ink); font-size: 16px; margin-top: 3px; }
.jw-next small { display: block; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--jw-accent-dk) 60%, #475569); margin-top: 3px; }
.jw-next-go { width: 100%; }
.jw-next .jw-row-acts { gap: 2px; margin: -4px 0 -6px -6px; }
.jw-custom { display: grid; gap: 10px; }

.jw-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jw-path-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; min-height: 60px; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; color: inherit; text-decoration: none; }
.jw-path-row:hover { border-color: var(--jw-line-2); background: #fbfcfe; }
.jw-path-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.jw-path-resume .jw-path-ic { background: #eff6ff; color: #2563eb; }
.jw-path-cover .jw-path-ic { background: #eefcef; color: #0e8118; }
.jw-path-iv .jw-path-ic { background: #fff4ec; color: #c2410c; }
.jw-path-text { display: grid; min-width: 0; }
.jw-path-text strong { color: var(--jw-ink); font-size: 14px; }
.jw-path-text small { color: var(--jw-muted); font-size: 13px; }
.jw-path-row b { font-size: 12px; color: var(--jw-accent-dk); }
.jw-chev { width: 16px !important; height: 16px !important; color: #94a3b8; }
.jw-d-sec { padding-top: 12px; border-top: 1px solid var(--jw-line); display: grid; gap: 10px; }
.jw-d-sec .jw-btn { justify-self: start; }
.jw-d-sec h3 { margin: 0; }
.jw-d-edit > summary { cursor: pointer; font-weight: 750; color: var(--jw-navy); min-height: 32px; }
.jw-d-foot { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--jw-line); }
.jw-archive { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #64748b;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.jw-archive:hover { background: #f1f5f9; color: var(--jw-ink); }

.jw-feed { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
.jw-feed::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: 30px; width: 1px; background: #dfe6ef; }
.jw-feed li { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #e2e8f0; border-radius: 11px;
  background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .035); }
.jw-feed-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #f1f4f8; color: #718096; z-index: 1; }
.jw-feed-ic svg { width: 16px; height: 16px; }
.jw-feed strong, .jw-feed small { display: block; }
.jw-feed strong { color: var(--jw-ink); font-size: 14px; }
.jw-feed small { color: #6b7a8e; font-size: 13px; }
.jw-feed-latest { border-color: var(--jw-mint-line) !important; background: linear-gradient(135deg, #fff, var(--jw-mint)) !important; }
.jw-feed-latest .jw-feed-ic { background: var(--jw-mint); color: var(--jw-accent-dk); }

/* ── Email reminders + Add to calendar ───────────────────────────────── */
.jw-remind { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; margin-bottom: 12px;
  border-radius: 13px; border: 1px solid var(--jw-mint-line); background: #fff; box-shadow: var(--jw-shadow); }
.jw-remind-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--jw-mint); color: var(--jw-accent-dk); }
.jw-remind-text strong { display: block; color: var(--jw-ink); font-size: 15px; }
.jw-remind-text p { font-size: 14px; color: var(--jw-muted); }
.jw-remind .jw-row-acts { flex-wrap: nowrap; }
.jw-remind-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 16px; padding: 8px 4px; font-size: 14px; color: var(--jw-text); }
.jw-remind-row svg { width: 17px; height: 17px; color: var(--jw-accent-dk); }
.jw-remind-row strong { color: var(--jw-ink); }
.jw-upcoming .jw-cal { grid-column: 1 / -1; justify-self: start; border-color: #c4b5fd; color: #6d28d9; background: #fff; }
.jw-upcoming .jw-cal:hover:not(:disabled) { background: #f5f3ff; }

/* ── Application Pack (Pro) ──────────────────────────────────────────── */
.jw-btn-pack { background: #f5f1ff; border-color: #d3c5f6; color: #5b21b6; }
.jw-btn-pack:hover:not(:disabled) { background: #ede6ff; }
.jw-pro-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 7px; background: #fdf0c4; border: 1px solid #e9c262; color: #7a4d00; font-size: 12px; font-weight: 800; }
.jw-tag-age { border-color: #fde68a; background: #fffbeb; color: #92400e; }
button.jw-path-row { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.jw-path-pack .jw-path-ic { background: #f5f1ff; color: #6d28d9; }
.jw-path-pack b.jw-pro-pill { color: #7a4d00; }
.jw-dlg.jw-pack { width: min(720px, calc(100vw - 32px)); padding: 0; }
.jw-pack-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 16px 20px;
  background: #fff; border-bottom: 1px solid var(--jw-line); }
.jw-pack-head .jw-mini { color: #6d28d9; }
.jw-pack-titles h2 { font-size: 19px; overflow-wrap: anywhere; }
/* The title only takes focus so reading starts there; it isn't a control, so no ring. */
.jw #jwPackTitle:focus, .jw #jwPackTitle:focus-visible { outline: none; box-shadow: none; }
.jw-pack-titles p { font-size: 14px; }
.jw-pack-body { padding: 16px 20px 22px; display: grid; gap: 14px; }
.jw-pack-start { display: grid; gap: 10px; }
.jw-pack-start > p:first-child { font-size: 15px; color: var(--jw-ink); }
.jw-pack-go { justify-self: start; }
.jw-pack-wait { display: grid; justify-items: center; gap: 12px; padding: 34px 10px; text-align: center; color: var(--jw-muted); }
.jw-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #e9e3fb; border-top-color: #6d28d9; animation: jw-spin 0.9s linear infinite; }
@keyframes jw-spin { to { transform: rotate(360deg); } }
.jw-jd > summary { cursor: pointer; font-weight: 750; color: var(--jw-accent-dk); min-height: 36px; display: flex; align-items: center; }
.jw-jd textarea { margin-top: 6px; }
.jw-pack-gaps { border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 12px 14px; color: #78350f; font-size: 14px; }
.jw-pack-gaps ul { margin: 6px 0 0; padding-left: 20px; }
.jw-pack-sec { border: 1px solid var(--jw-line); border-radius: 13px; padding: 14px; background: #fff; display: grid; gap: 10px; }
.jw-pack-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jw-pack-sec h3 { margin: 0; font-size: 16px; }
.jw-copy { min-height: 36px; min-width: 64px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--jw-line-2); background: #fff; font: inherit; font-size: 13px;
  font-weight: 750; color: var(--jw-accent-dk); cursor: pointer; flex: 0 0 auto; }
.jw-copy:hover { background: var(--jw-mint); }
.jw-qa { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid #eef2f6; }
.jw-qa:first-of-type { border-top: 0; padding-top: 0; }
.jw-qa-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jw-qa-h strong { color: var(--jw-ink); font-size: 14px; }
.jw-qa p, .jw-letter p, .jw-pack-list li { font-size: 15px; line-height: 1.55; color: var(--jw-text); }
.jw-letter { display: grid; gap: 10px; padding: 14px; border-radius: 10px; background: #fbfcfe; border: 1px solid #eef2f6; }
.jw-gap { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 0 3px; font-weight: 650; }
.jw-pack-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.jw-pack-sec .jw-btn { justify-self: start; }
.jw-confirm { display: grid; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid #ddd6fe; background: #faf8ff; font-size: 14px; color: var(--jw-ink); }
.jw-pack-rebuild { background: #f8fafc; }

/* Dialogs, ask card, toast */
.jw-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 16px; padding: 22px; color: var(--jw-text);
  font-size: 15px; box-shadow: 0 28px 70px rgba(7, 26, 66, .25); }
.jw-dlg::backdrop { background: rgba(7, 26, 66, .5); backdrop-filter: blur(3px); }
.jw-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jw-dlg h2 { margin: 0; font-size: 21px; color: var(--jw-ink); }
.jw-x { width: 40px; height: 40px; border: 0; background: #f2f5f8; font-size: 22px; line-height: 1; color: var(--jw-muted); cursor: pointer; border-radius: 50%; }
.jw-dlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.jw-dlg-acts-wrap { flex-wrap: wrap; }
.jw-draft { font-size: 15px; }
.jw-ask { position: fixed; right: 22px; bottom: 22px; z-index: 140; width: min(380px, calc(100vw - 32px)); background: #fff; color: var(--jw-text);
  border: 1px solid var(--jw-line); border-radius: 16px; padding: 18px; box-shadow: 0 28px 70px rgba(7, 26, 66, .22); display: grid; gap: 12px; }
.jw-ask p { font-weight: 750; color: var(--jw-ink); font-size: 16px; }
.jw-ask-acts { display: flex; gap: 8px; }
.jw-ask-acts .jw-btn { flex: 1; }
.jw-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 150; max-width: min(420px, calc(100vw - 32px)); background: var(--jw-navy); color: #fff;
  border-radius: 12px; padding: 12px 16px; font-size: 14px; box-shadow: 0 14px 40px rgba(15, 23, 42, .25); }

@media (max-width: 1180px) {
  .jw-tools { grid-template-columns: minmax(0, 1fr) 160px; }
  .jw-filters { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 1080px) {
  .jw-stages { display: flex; overflow-x: auto; scrollbar-width: none; }
  .jw-stages::-webkit-scrollbar { display: none; }
  .jw-stage { min-width: 104px; flex: 1 0 auto; }
  .jw-rec { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .jw-rec-go { grid-column: 2 / -1; justify-self: start; }
}

/* A narrow list (a small screen, or the detail panel open beside it): each
   row stacks into two lines instead of a table. */
.jw-groups { container: jwlist / inline-size; }
@container jwlist (max-width: 760px) {
  .jw-thead { display: none; }
  .jw-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co stage" "nd nd"; row-gap: 4px; }
  .jw-cell-co { grid-area: co; }
  .jw-cell-stage { grid-area: stage; justify-self: end; }
  .jw-cell-nd { grid-area: nd; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-left: 47px; }
  .jw-cell-due { flex: 0 0 auto; text-align: right; }
}

/* The application detail becomes a full-screen sheet. */
@media (max-width: 860px) {
  .jw-has-detail .jw-apps-wrap { grid-template-columns: minmax(0, 1fr); }
  .jw-detail { position: fixed; inset: 0; z-index: 130; max-height: none; border-radius: 0; border: 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain; background: #f8fafc; }
  .jw-d-back { display: flex; align-items: center; width: 100%; min-height: 44px; margin-bottom: 6px; padding: 0 4px; border: 0; background: none; font: inherit;
    font-size: 15px; font-weight: 750; color: var(--jw-accent-dk); cursor: pointer; }
  .jw-d-close { display: none; }
  .jw-d-head { grid-template-columns: auto minmax(0, 1fr) 40px; }
  body.jw-sheet-open { overflow: hidden; }
}

@media (max-width: 720px) {
  .jw-body { padding: 14px 16px 28px; }
  /* Phone: the builders' phone header — title only, no tile, thin line. */
  .jw-head { display: block; min-height: 0; padding: 10px 16px; border-bottom: 1px solid var(--jw-line); }
  .jw .jw-title { font-size: 18px; }
  .jw-title-ic { display: none; }
  .jw-head-meta { margin-top: 2px; font-size: 13px; }
  .jw-bar { flex-direction: column; align-items: stretch; }
  .jw-tabs { width: 100%; }
  .jw-tab { font-size: 13px; gap: 5px; padding: 0 4px; flex-direction: column; gap: 0; line-height: 1.15; min-height: 46px; }
  .jw-tab .jw-count { height: 18px; font-size: 12px; min-width: 20px; margin-top: 1px; }
  #jwAddBtn { align-self: flex-end; }
  .jw-card { padding: 14px; border-radius: 13px; }
  .jw-search-row, .jw-two { grid-template-columns: minmax(0, 1fr); }
  .jw-search-go { width: 100%; }
  .jw-sites .jw-site { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .jw-sites-label { flex: 1 1 100%; }
  .jw-summary { padding: 10px 12px; }
  .jw-summary .jw-btn { width: 100%; }
  .jw-jobcard { grid-template-columns: 42px minmax(0, 1fr); padding: 13px; }
  .jw-jc-acts .jw-btn { flex: 1 1 auto; }
  .jw-rec { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 13px; }
  .jw-rec .jw-tile { width: 40px; height: 40px; }
  .jw .jw-rec-title { font-size: 16px; line-height: 1.25; }
  .jw-rec-due { grid-column: 2; padding-left: 0; border-left: 0; display: flex; gap: 6px; align-items: center; }
  .jw-rec-go { grid-column: 1 / -1; width: 100%; justify-content: center; min-height: 44px; }
  .jw-remind { grid-template-columns: 40px minmax(0, 1fr); }
  .jw-remind .jw-row-acts { grid-column: 1 / -1; }
  .jw-remind .jw-btn { flex: 1; }
  .jw-tools { grid-template-columns: minmax(0, 1fr); }
  .jw-select { min-height: 44px; }
  .jw-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .jw-filters::-webkit-scrollbar { display: none; }
  .jw-filters button { min-height: 44px; }
  .jw-rows { background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 8px; }
  .jw-tr { background: #fff; border: 1px solid var(--jw-line) !important; border-radius: 11px; }
  .jw-tr-open { box-shadow: 0 0 0 2px var(--jw-bright); }
  .jw-row { padding: 12px 2px 12px 12px; min-height: 78px; }
  .jw-cell-next { font-size: 14px; }
  .jw-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 92vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .jw-dlg.jw-pack { width: 100vw; max-width: 100vw; padding: 0 0 env(safe-area-inset-bottom, 0px); max-height: 94vh; }
  .jw-pack-head { padding: 14px 16px; }
  .jw-pack-body { padding: 14px 16px 22px; }
  .jw-pack-sec { padding: 12px; }
  .jw-dlg-acts .jw-btn { flex: 1; }
  .jw-ask { left: 14px; right: 14px; width: auto; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .jw-toast { left: 16px; right: 16px; transform: none; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .jw * { transition: none !important; } }
/* Career Paths v2: the search starts from the chosen direction. */
.jw-dir-note { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--jw-ink, #0f766e); }


/* ── Search filters (audit/jobs_filters_plan.md, 2026-10-31) ── */
.jw-sfilt { margin-top: 12px; }
.jw-filt-toggle { display: none; }
.jw-filt-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.jw-filt { display: grid; gap: 5px; flex: 1 1 150px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--jw-navy); }
.jw-filt .jw-select { min-height: 42px; padding: 7px 10px; font-size: 15px; }
.jw-filt-off { opacity: .5; }
.jw-filt-off .jw-select { cursor: not-allowed; background: #f4f6f9; }
.jw-filt-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--jw-line-2); border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--jw-navy); background: #fff; cursor: pointer; white-space: nowrap; }
.jw-filt-check input { width: 18px; height: 18px; accent-color: var(--jw-accent); margin: 0; }
.jw-filt-check:has(input:checked) { border-color: var(--jw-bright); background: var(--jw-mint); }
.jw-filt-note { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--jw-muted); }
.jw-filt-honest { margin: 8px 0 6px; }
@media (max-width: 720px) {
  .jw-filt-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--jw-line-2); border-radius: 10px;
    background: #fff; font: inherit; font-size: 14px; font-weight: 750; color: var(--jw-navy); cursor: pointer; }
  .jw-filt-toggle svg { width: 17px; height: 17px; color: var(--jw-accent); }
  .jw-filt-n { color: var(--jw-accent); }
  .jw-sfilt.open .jw-filt-toggle { border-color: var(--jw-bright); background: var(--jw-mint); }
  .jw-filt-body { display: none; margin-top: 10px; padding: 12px; border: 1px solid var(--jw-line); border-radius: 12px; background: #f8fafc; }
  .jw-sfilt.open .jw-filt-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .jw-filt-check { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 380px) { .jw-sfilt.open .jw-filt-body { grid-template-columns: minmax(0, 1fr); } }

/* Places for the kit's job or the direction's (kit test pass K2, 2026-11-01). */
.jw-places-for { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.jw-pf { min-height: 40px; max-width: 100%; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--jw-line-2); background: #fff;
  font: inherit; font-size: 14px; font-weight: 750; color: var(--jw-text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jw-pf:hover { border-color: var(--jw-accent); }
.jw-pf[aria-pressed="true"] { background: var(--jw-mint); border-color: var(--jw-accent); color: var(--jw-accent-dk); }
.jw-places-find { border: 1px dashed var(--jw-mint-line); background: var(--jw-mint); border-radius: 12px; padding: 16px; margin: 0 0 14px; }
.jw-places-find p { margin: 0 0 12px; font-size: 14px; color: var(--jw-text); }
.jw-places-find .jw-hint { margin: 10px 0 0; font-size: 13px; color: var(--jw-muted); }