/* Job application tracker (2026-09-27). On top of tools.css + resume-scanner/scanner.css.
   Layout after the category leader (Huntr): a board of stage columns with cards, a job window with
   tabs, list / tasks / contacts / numbers / log views. Our tokens only; no canvas. */

.jt-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter) 72px; flex: 1; box-sizing: border-box; }
.jt-hero { text-align: center; margin: 8px auto 22px; max-width: 780px; }
.jt-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; margin: 12px 0; }
.jt-hero p { color: var(--ink-3); font-size: 17px; line-height: 1.55; }
.jt-app [hidden], .jt-dlg [hidden], .jt-toast[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; }
.danger { color: var(--bad) !important; }

.jt-app { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: clip; }
.jt-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: var(--paper-2); position: relative; }
.jt-bar-l, .jt-bar-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jt-bar select, .jt-bar input[type=search], .jt-list-bar select, .jt-list-bar input { height: 38px; border: 1px solid var(--hair-2); border-radius: 9px; padding: 0 10px; font: 14px var(--sans); background: var(--surface); color: var(--ink); }
.jt-bar input[type=search] { width: 200px; }
.jt-views { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.jt-views button { border: 0; background: none; border-radius: 7px; padding: 7px 12px; font: 600 13.5px var(--sans); color: var(--ink-3); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 34px; }
.jt-views button.on { background: var(--accent-soft); color: var(--accent-ink); }
.cnt:empty { display: none; }
.cnt { font-size: 11px; font-weight: 700; background: var(--paper-3); color: var(--ink-2); border-radius: 99px; padding: 1px 7px; }
.cnt.late { background: var(--bad); color: #fff; }
.btn.mini { height: 38px; padding: 0 14px; font-size: 13.5px; }
.btn.mini svg { margin-right: 2px; }
.jt-menu { position: absolute; right: 16px; top: 58px; z-index: 30; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 230px; display: flex; flex-direction: column; }
.jt-menu button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 8px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; }
.jt-menu button:hover { background: var(--paper-2); }

.jt-sample { background: var(--warn-soft); border-bottom: 1px solid var(--warn-line); padding: 10px 16px; font-size: 14px; }
.jt-next { padding: 12px 16px; border-bottom: 1px solid var(--hair); background: linear-gradient(90deg, var(--accent-soft), var(--surface)); display: flex; gap: 14px; align-items: flex-start; }
.jt-next-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); padding-top: 7px; white-space: nowrap; }
.jt-next ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.jt-next li { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 6px 8px 6px 12px; flex-wrap: wrap; }
.jt-next li .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.jt-next li.k-deadline, .jt-next li.k-decide { border-color: var(--warn-line); }
a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }
.mini-btn { min-height: 30px; }
.mini-btn.ghost { border-color: transparent; background: none; color: var(--ink-3); }

/* ---------- board ---------- */
.jt-view { min-height: 420px; }
.jt-cols { display: flex; gap: 12px; padding: 16px; overflow-x: auto; align-items: stretch; min-height: min(56vh, 520px); scroll-snap-type: x proximity; }
/* Columns run the board's full height, so a card let go below a short column still lands in it. While a card is
   held the board does not snap back, so it can scroll to a column past the edge. */
.jt-dragging .jt-cols { scroll-snap-type: none; }
#v-board { position: relative; }
#v-board.more-r::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(to right, transparent, var(--surface)); }
.jt-col { flex: 0 0 272px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 14px; display: flex; flex-direction: column; max-height: 76vh; scroll-snap-align: start; }
.jt-col.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.jt-col-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.jt-col-h b { font-size: 14px; }
.jt-col-h .n { font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface); border: 1px solid var(--hair); border-radius: 99px; padding: 0 8px; }
.jt-col::before { content: ''; display: block; height: 4px; border-radius: 14px 14px 0 0; background: var(--ink-4); }
.jt-col.k-saved::before { background: var(--ink-4); } .jt-col.k-applied::before { background: var(--accent); } .jt-col.k-interview::before { background: #0EA5E9; } .jt-col.k-offer::before { background: var(--ok); } .jt-col.k-closed::before { background: var(--bad); }
.jt-col-add { margin-left: auto; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--hair-2); background: var(--surface); font: 600 18px var(--sans); color: var(--ink-3); cursor: pointer; line-height: 1; }
.jt-col-add:hover { color: var(--accent-ink); border-color: var(--accent-line); }
.jt-col-b { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; flex: 1; }
.jt-col-new { flex: 0 0 180px; height: 52px; align-self: flex-start; border: 1.5px dashed var(--hair-3); border-radius: 14px; background: none; font: 600 14px var(--sans); color: var(--ink-3); cursor: pointer; }
.jt-card { position: relative; background: var(--surface); border: 1px solid var(--hair); border-left: 4px solid var(--hair-2); border-radius: 10px; padding: 10px 12px 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-sm); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.jt-card:hover { border-color: var(--accent-line); }
.jt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jt-card .co { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; padding-right: 18px; }
.jt-card .ti { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.jt-card .me { font-size: 12px; color: var(--ink-3); }
.jt-card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip-s { font-size: 11.5px; font-weight: 600; background: var(--paper-2); color: var(--ink-2); border-radius: 6px; padding: 2px 7px; }
.chip-s.late { background: var(--bad-soft); color: var(--bad); }
.chip-s.now { background: var(--warn-soft); color: var(--warn); }
.jt-card .grip { position: absolute; right: 6px; top: 8px; width: 16px; height: 22px; cursor: grab; touch-action: none; background: radial-gradient(circle, var(--ink-4) 1.3px, transparent 1.6px) 0 0 / 6px 6px; opacity: .6; }
.jt-card .grip::before { content: ''; position: absolute; inset: -10px -8px; }   /* a finger-size place to grab */
.jt-card.c-blue { border-left-color: #3B82F6; } .jt-card.c-green { border-left-color: var(--ok); } .jt-card.c-amber { border-left-color: #F59E0B; } .jt-card.c-red { border-left-color: var(--bad); } .jt-card.c-purple { border-left-color: #A855F7; } .jt-card.c-teal { border-left-color: #14B8A6; } .jt-card.c-gray { border-left-color: var(--ink-4); }
.jt-card.lifted { opacity: .35; }
.jt-card.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: var(--shadow-lg); transform-origin: 0 0; rotate: 2deg; }
.jt-ph { border: 2px dashed var(--accent-line); border-radius: 10px; background: var(--accent-soft); }
.jt-dragging, .jt-dragging * { cursor: grabbing !important; }
.jt-st { display: inline-flex; gap: 2px; }
.jt-st i { width: 9px; height: 9px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: var(--paper-3); }
.jt-st i.on { background: #F59E0B; }
.jt-empty { border: 1.5px dashed var(--accent-line); background: var(--surface); border-radius: 10px; padding: 18px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; font: 14px var(--sans); color: var(--ink-3); }
.jt-empty b { color: var(--accent-ink); }

/* ---------- list, tasks, contacts, log ---------- */
.jt-list-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.jt-view > .tbl-wrap, .jt-view > .jt-none, .jt-view > p, .jt-view > h3, .jt-view > ul, .jt-view > details { margin-left: 16px; margin-right: 16px; }
.jt-view > .tbl-wrap { margin-top: 14px; margin-bottom: 14px; }
.jt-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jt-tbl th, .jt-tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.jt-tbl th { background: var(--paper-2); font-size: 12px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.jt-tbl .th { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.jt-tbl td.late { color: var(--bad); font-weight: 600; }
.jt-tbl.sm td, .jt-tbl.sm th { padding: 6px 8px; }
.stg { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--paper-2); white-space: nowrap; }
.stg.k-applied { background: var(--accent-soft); color: var(--accent-ink); } .stg.k-interview { background: #E0F2FE; color: #0369A1; } .stg.k-offer { background: var(--ok-soft); color: var(--ok); } .stg.k-closed { background: var(--bad-soft); color: var(--bad); }
.jt-none { padding: 18px 0; }
.tg { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
.jt-grp { font-size: 14px; margin-top: 18px; margin-bottom: 8px; }
.jt-grp span { font-size: 12px; color: var(--ink-3); }
.jt-grp.late { color: var(--bad); } .jt-grp.now { color: var(--warn); }
.jt-tasks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jt-task { display: flex; gap: 10px; align-items: center; border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; background: var(--surface); }
.jt-task input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ok); flex: none; }
.jt-task .tx { flex: 1; min-width: 180px; display: flex; flex-direction: column; font-size: 14px; }
.jt-task .tx span { font-size: 12.5px; color: var(--ink-3); }
.jt-task .due { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.jt-task.done .tx b { text-decoration: line-through; color: var(--ink-3); }
.jt-done { margin-top: 18px; margin-bottom: 16px; }
.jt-done summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* ---------- numbers ---------- */
.jt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.jt-card-s { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; }
.jt-card-s.wide { grid-column: 1 / -1; }
.jt-card-s h3 { font-size: 15px; margin-bottom: 12px; }
.jt-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.jt-funnel .fr { display: grid; grid-template-columns: 76px 1fr 36px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.jt-funnel i { height: 18px; border-radius: 5px; background: var(--accent); display: block; }
.jt-funnel .fr:nth-child(3) i { background: #0EA5E9; } .jt-funnel .fr:nth-child(4) i { background: var(--ok); } .jt-funnel .fr:nth-child(1) i { background: var(--ink-4); }
.jt-funnel b { text-align: right; }
.jt-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.kpi { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-size: 22px; letter-spacing: -.02em; }
.kpi span { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.jt-weeks { position: relative; display: flex; gap: 6px; align-items: flex-end; height: 150px; padding-top: 18px; border-bottom: 1px solid var(--hair-2); margin-bottom: 26px; }
.jt-weeks::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--goal); border-top: 2px dashed var(--ok); opacity: .7; }
.jt-weeks .wk { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.jt-weeks .wk i { display: block; background: var(--accent-line); border-radius: 5px 5px 0 0; position: relative; min-height: 2px; }
.jt-weeks .wk.met i { background: var(--ok); } .jt-weeks .wk.now i { outline: 2px solid var(--accent); }
.jt-weeks .wk i span { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.jt-weeks .wk em { position: absolute; bottom: -20px; left: -4px; right: -4px; text-align: center; font-style: normal; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; }
.jt-bystage { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jt-bystage li { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }

/* ---------- dialogs ---------- */
.jt-dlg { margin: auto; inset: 0; position: fixed; height: fit-content; border: 0; padding: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); color: var(--ink); background: var(--surface); overflow: auto; }
.jt-dlg::backdrop { background: rgba(14, 16, 32, .42); }
.jt-dlg.jt-side { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: var(--r-lg) 0 0 var(--r-lg); width: min(720px, 100vw); }
.jt-dlg-in { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.jt-dlg-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.jt-dlg-h h2 { font-size: 20px; letter-spacing: -.01em; }
.jt-job-h .kicker { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.jt-dlg .x { border: 0; background: var(--paper-2); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-3); flex: none; }
.jt-dlg-f { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 4px; }
.jt-dlg-f select { height: 38px; border: 1px solid var(--hair-2); border-radius: 9px; padding: 0 10px; font: 14px var(--sans); }
.jt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hair); overflow-x: auto; }
.jt-tabs button { border: 0; background: none; padding: 10px 12px; font: 600 14px var(--sans); color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.jt-tabs button.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.jt-dlg label.small, .jt-form label.small { display: block; font-weight: 600; color: var(--ink-2); margin: 8px 0 4px; }
.jt-dlg input:not([type=checkbox]):not([type=radio]), .jt-dlg select, .jt-dlg textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--hair-2); border-radius: 9px; padding: 9px 11px; font: 14.5px/1.45 var(--sans); color: var(--ink); background: var(--surface); }
.jt-dlg input:focus, .jt-dlg select:focus, .jt-dlg textarea:focus { outline: 2px solid var(--accent-line); border-color: var(--accent); }
.jt-dlg .jt-dlg-f select { width: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; }
.jt-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.jt-inline input, .jt-inline select { flex: 1; min-width: 180px; }
.jt-inline .btn { height: 42px; white-space: nowrap; }
.jt-hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 8px; }
.jt-add-msg { font-size: 13.5px; min-height: 0; }
.jt-add-msg:empty { display: none; }
.jt-add-msg.ok { color: var(--ok); } .jt-add-msg.err { color: var(--bad); } .jt-add-msg.warn { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 9px; padding: 8px 12px; }
.jt-desc { margin-top: 10px; }
.jt-desc summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.jt-desc textarea { margin-top: 6px; }
.jt-job-move { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jt-job-move select { width: auto !important; min-width: 180px; }
.jt-stars { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.jt-stars .small { margin-right: 6px; color: var(--ink-3); }
.jt-stars button { width: 26px; height: 26px; border: 0; cursor: pointer; background: var(--paper-3); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.jt-stars button.on { background: #F59E0B; }
.jt-job-body { min-height: 200px; }
.jt-offer { border: 1px solid var(--ok); border-radius: 12px; padding: 4px 14px 12px; margin-top: 12px; background: var(--ok-soft); }
.jt-offer legend { font-weight: 700; font-size: 13.5px; padding: 0 6px; color: var(--ok); }
.jt-sub { font-size: 14px; margin-top: 16px; }
.jt-people { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jt-people li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; flex-wrap: wrap; }
.jt-people li > div { flex: 1; display: flex; flex-direction: column; font-size: 14px; min-width: 160px; }
.jt-people li span { font-size: 12.5px; color: var(--ink-3); }
.jt-match { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0; }
.jt-match .rate { flex: none; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid var(--paper-3); }
.jt-match .rate b { font-size: 24px; } .jt-match .rate span { font-size: 11px; color: var(--ink-3); }
.jt-match .rate.ok { border-color: var(--ok); } .jt-match .rate.mid { border-color: var(--warn); } .jt-match .rate.bad { border-color: var(--bad); }
.jt-match p { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.jt-email { margin-top: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 12px; padding: 4px 14px 14px; }
.jt-time { list-style: none; padding: 0 0 0 16px; border-left: 2px solid var(--hair-2); display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.jt-time li { position: relative; display: flex; flex-direction: column; font-size: 14px; }
.jt-time li::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.jt-time time { font-size: 12px; color: var(--ink-3); }
.jt-stages { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.jt-stages li { display: flex; gap: 6px; align-items: center; }
.jt-stages li input { flex: 1; }
.jt-stages li select { width: auto !important; flex: none; }
.jt-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; line-height: 1.55; }
.jt-bm { cursor: grab; margin-left: 6px; }
.jt-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font-size: 14px; box-shadow: var(--shadow-lg); z-index: 200; max-width: calc(100vw - 32px); }
.jt-app > .privacy-line { padding: 10px 16px 14px; margin: 0; border-top: 1px solid var(--hair); }
/* The one line above the board: where the board is saved, sign in / sign out (sync.js, 2026-10-03). */
.jt-sync { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--hair); font-size: 13px; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.jt-sync a { color: var(--accent-ink); }
.jt-sync b { color: var(--ink-2); }
.jt-sync .link-btn { font-size: 13px; }

/* feature mock-ups */
.jt-mock-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.jt-mock-board div { background: var(--paper-2); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.jt-mock-board b { font-size: 11px; }
.jt-mock-board i { height: 22px; border-radius: 5px; background: var(--surface); border-left: 3px solid var(--accent); display: block; }
.jt-mock-board i.c2 { border-left-color: #0EA5E9; } .jt-mock-board i.c3 { border-left-color: var(--ok); }
.jt-mock-link { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.jt-mock-link span { font-size: 12px; color: var(--ink-3); background: var(--paper-2); border-radius: 6px; padding: 6px 8px; }
.jt-mock-link b { font-size: 16px; } .jt-mock-link em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.jt-mock-next { padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.jt-mock-next p { background: var(--surface); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; }
.jt-howto { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 860px) {
  .jt-stats { grid-template-columns: 1fr; }
  .row4 { grid-template-columns: 1fr 1fr; }
  .jt-bar input[type=search] { width: 140px; }
}
@media (max-width: 760px) {
  .jt-bar { padding: 10px 12px; }
  .jt-bar-l, .jt-bar-r { width: 100%; }
  .jt-bar-r input[type=search] { flex: 1; width: auto; min-width: 0; }
  .jt-views { width: 100%; }
  .jt-views button { flex: 1 1 auto; padding: 7px 8px; }
  .jt-col { flex-basis: 82vw; max-height: none; }
  .jt-cols { padding: 12px; }
  .row2 { grid-template-columns: 1fr; }
  .jt-kpis { grid-template-columns: 1fr; }
  .jt-next { flex-direction: column; gap: 6px; }
  .jt-dlg.jt-side { border-radius: 0; }
  .jt-card .grip { width: 28px; height: 32px; right: 2px; top: 4px; }
  .jt-menu { left: 12px; right: 12px; top: auto; }
}
@media print {
  .nav-outer, .breadcrumbs, .jt-hero, .below, footer, .jt-bar, .jt-next, .jt-list-bar, .privacy-line, .jt-sync { display: none !important; }
  .jt-print-log .jt-view:not(#v-log) { display: none !important; }
  .jt-app { box-shadow: none; border: 0; }
}

/* The board picker stays the size of its name (tools.css makes selects full width). */
#board-pick { width: auto; max-width: 240px; }
@media (max-width: 760px) {
  #board-pick { max-width: none; width: 100%; }
  .jt-views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .jt-views button { flex: 0 0 auto; }
}

/* ---------- 2026-09-27 keyword-page pass: notes, undo, spreadsheets, phone tabs ---------- */
/* A note under the bar that stays until closed (import results, another tab's changes). */
.jt-note { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.5; background: var(--paper-2); }
.jt-note.ok { background: var(--ok-soft); color: var(--ink); }
.jt-note.warn { background: var(--warn-soft); border-bottom-color: var(--warn-line); }
.jt-note.err { background: var(--warn-soft); border-bottom-color: var(--warn-line); color: var(--ink); font-weight: 500; }
.jt-note .x { flex: none; border: 0; background: none; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-3); }
.jt-toast .jt-undo { margin-left: 12px; border: 0; background: none; color: #A8BCFF; font: 700 14px var(--sans); text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.jt-first { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 16px; color: var(--ink-3); }
.jt-first b { color: var(--ink); font-size: 16px; }
.jt-first .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* The spreadsheet panel on the template page: the files, and the one-click way in and out. */
.jt-sheet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 24px; padding: 16px; border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); }
.jt-sheet h2 { font-size: 16px; margin: 0 0 4px; letter-spacing: -.01em; }
.jt-sheet p { font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.jt-sheet .files, .jt-sheet .moves { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.jt-sheet .btn { height: 42px; }
.jt-sheet .btn small { font-weight: 500; opacity: .75; margin-left: 4px; }
.jt-sheet .how { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.jt-sheet .how a { color: var(--accent-ink); }

/* Template page: the sheet preview and the column list. */
.kw-sheet { overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; margin: 14px 0; background: var(--surface); }
.kw-sheet table { border-collapse: collapse; font-size: 13.5px; min-width: 640px; width: 100%; }
.kw-sheet th { background: #3553C6; color: #fff; text-align: left; padding: 8px 10px; font-weight: 700; white-space: nowrap; }
.kw-sheet td { padding: 8px 10px; border-top: 1px solid var(--hair); white-space: nowrap; color: var(--ink-2); }
.kw-sheet tr.s-offer td { background: #E6F4EA; color: #1E7B34; } .kw-sheet tr.s-interview td { background: #E8F0FE; color: #1A4FA0; } .kw-sheet tr.s-closed td { color: #8A8F98; }
.kw-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.kw-cols li { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); background: var(--surface); }
.kw-cols li b { display: block; color: var(--ink); }
.kw-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.kw-out { border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; background: var(--paper-2); font-size: 14.5px; line-height: 1.6; }
.kw-out ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 760px) {
  /* Every tab in view without a sideways swipe: views and window tabs wrap into rows of three. */
  .jt-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .jt-views button { justify-content: center; padding: 8px 4px; min-height: 40px; }
  .jt-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 0; }
  .jt-tabs button { white-space: normal; text-align: center; padding: 10px 4px; line-height: 1.25; font-size: 13.5px; min-height: 44px; }
  /* Finger-size targets. */
  .jt-stars button { width: 34px; height: 34px; }
  .jt-tbl input[type=checkbox] { width: 22px; height: 22px; }
  .jt-tbl .th { min-height: 36px; padding: 6px 0; }
  .mini-btn { min-height: 38px; }
  .jt-sheet { grid-template-columns: 1fr; padding: 14px 12px; }
  .jt-sheet .btn { flex: 1 1 auto; }
}
.kw-h3 { font-size: 16px; margin: 6px 0 8px; }
.kw-steps + .kw-h3 { margin-top: 18px; }
.kw-p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
/* Filters keep their own width (tools.css makes selects full width), so the row stays one line. */
.jt-list-bar select { width: auto; max-width: 260px; }
.jt-list-bar input[type=date] { width: auto; }
.jt-sheet .moves .or { font-size: 13px; color: var(--ink-3); margin-left: 6px; }
.kw-sheet td:nth-child(2) { white-space: normal; min-width: 150px; }
@media (max-width: 760px) { .jt-sheet .moves .or { flex-basis: 100%; margin: 4px 0 0; } }
.jt-sheet .moves { align-items: center; }
.jt-sheet .moves .btn, .jt-sheet .files .btn { padding: 0 16px; font-size: 14.5px; }
.jt-sheet .moves .or { margin-left: 4px; }

/* "Paste an email" window (C.7, 2026-10-03) */
.jm-body { display: flex; flex-direction: column; gap: 10px; }
.jm-intro { line-height: 1.5; margin: 0; }
.jm-kind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--paper-2); border-left: 4px solid var(--ink-4); }
.jm-kind b { font-size: 17px; }
.jm-kind.k-applied { border-left-color: var(--accent); background: var(--accent-soft); }
.jm-kind.k-assessment, .jm-kind.k-interview { border-left-color: #0EA5E9; background: #E0F2FE; }
.jm-kind.k-offer { border-left-color: var(--ok); background: var(--ok-soft); }
.jm-kind.k-rejected { border-left-color: var(--bad); background: var(--bad-soft); }
.jm-conf { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--hair-2); }
.jm-conf.c-low, .jm-conf.c-medium { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.jm-why { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.jm-why q { color: var(--ink-2); font-style: italic; }
.jm-why q + q::before { content: " "; }
.jm-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jm-hints li { font-size: 13.5px; line-height: 1.45; padding: 8px 12px; border-radius: 9px; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink-2); }
.jm-hints li.h-html, .jm-hints li.h-forward, .jm-hints li.h-thread, .jm-hints li.h-reply, .jm-hints li.h-tz { background: var(--paper-2); border-color: var(--hair); color: var(--ink-3); }
.jm-said { margin: 2px 0 0; }
.jm-target { border-top: 1px solid var(--hair); padding-top: 4px; }
.jm-target p { margin: 6px 0 0; }
.jm-do { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.jm-do ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.jt-mail-in { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); }
#mail-btn svg { vertical-align: -2px; }
/* Wide screens: a narrower search box keeps the board picker, the views and the four controls on one line. */
@media (min-width: 761px) { .jt-bar input[type=search] { width: 150px; } }
/* Phones: search on its own line, then More, Paste an email and Add a job side by side. */
@media (max-width: 760px) {
  .jt-bar-r input[type=search] { flex: 1 1 100%; }
  .jt-bar-r .btn.mini { flex: 1 1 auto; justify-content: center; padding-left: 10px; padding-right: 10px; }
}

/* World-class wave 1 (2026-10-03): on a wide screen the toast sits in the bottom-right corner, narrow, so it does not
   cover the middle of the board while its Undo is open (audit F5). */
@media (min-width: 900px) { .jt-toast { left: auto; right: 24px; transform: none; max-width: 380px; border-radius: 14px; } }
/* A toast of two or three lines on a phone keeps square-ish corners (a pill radius turned it into a circle). */
@media (max-width: 899px) { .jt-toast { border-radius: 14px; } }
.jt-advice ul { margin: 6px 0 10px; padding-left: 20px; line-height: 1.55; }
.jt-advice li + li { margin-top: 6px; }