/* 首页。颜色和字体在 tokens.css，和技能树共用。 */
@import 'tokens.css';

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
main { max-width: 1248px; margin: 0 auto; padding: 0 24px 40px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
.muted { color: var(--ink-2); }

/* 顶栏 */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.logo svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }



/* 卡片 */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; transition: border-color .2s var(--ease), background .2s var(--ease); }
.chip:hover { border-color: var(--ink); background: var(--wash); }
.chip svg { color: var(--ink-2); }

/* 首页。三种字号：大 40（标题、编号、详情里的岗位名）、中 16（岗位名、正文、按钮）、小 13（一句话、需求、说明、技能选项）。
   像一本职业年鉴的目录：标题下面一张表，一行一个岗位，近几年需求涨得越多越靠前，行和行之间一条细灰线。
   电脑上两栏（各 --half 行），窄屏一栏 --n 行；行高按屏幕剩下的高度算，一屏放下。
   点一行，它从原地放大铺满屏幕变成详情，关上再缩回去 */
.jobs { --row: clamp(52px, calc((100svh - 60px - 150px) / var(--half)), 76px); }
.home { max-width: 1200px; margin: 0 auto; padding: 28px 0 24px; }
.hello { margin-bottom: 20px; animation: tile .6s var(--ease) backwards; }
.hello h1 { margin: 0; font-size: 40px; line-height: 1.2; }
.hello p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--half), var(--row)); grid-auto-flow: column; column-gap: 56px; border-top: 1px solid var(--ink); }
.job { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 0 12px 0 4px; border-bottom: 1px solid var(--line-2); text-decoration: none; white-space: nowrap; animation: tile .6s var(--ease) backwards; animation-delay: calc(var(--i) * 30ms + 100ms); transition: background .3s var(--ease), color .3s var(--ease); }
@keyframes tile { from { opacity: 0; transform: translateY(8px); } }
/* 每栏最后一行：底下一条黑线收住（第 10 个是左栏最后一行，和 --half 对应） */
.job:nth-child(10), .job:last-child { border-bottom-color: var(--ink); }
.job .no { width: 2ch; font: 300 40px/1 var(--mono); color: var(--line); transition: color .3s var(--ease); }
.job .nm { display: flex; flex-direction: column; min-width: 0; }
.job b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; transition: transform .35s var(--ease); }
.job .br, .job .ct { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.job .meta { display: flex; flex-direction: column; align-items: flex-end; }
.job .tr { font-size: 13px; color: var(--ink-2); }
.job .tr.t-hot { color: var(--ink); font-weight: 700; }
.job .tr.t-down { color: var(--ink-3); }
.job .tag { display: none; }
/* 指到这一行：浅灰底，编号变黑，名字往右挪一点 */
.job:hover { background: var(--wash); }
.job:hover .no { color: var(--ink); }
.job:hover b { transform: translateX(4px); }
/* 点亮了多少：行底一条黑线从左往右铺开 */
.job::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .7s var(--ease); }
/* 正在学的那行：黑底白字，后面写“在学” */
.job.mine { background: var(--ink); color: #fff; }
.job.mine .no { color: #fff; }
.job.mine .br, .job.mine .ct, .job.mine .tr { color: rgba(255,255,255,.72); }
.job.mine .tag { display: inline; color: #fff; }
.job.mine::before { background: #fff; }

/* 详情：铺满屏幕。四条边从点的那一格出发（--t --r --b --l），放大开、缩回去；里面的东西等它铺开再浮上来 */
html.lock { overflow: hidden; }
.pick { --t: 50%; --r: 50%; --b: 50%; --l: 50%; position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; gap: 56px; padding: 72px max(24px, calc((100vw - 1200px) / 2)) 48px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); clip-path: inset(var(--t) var(--r) var(--b) var(--l)); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s .6s; }
.pick.open { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--ease); }
.pk-l, .pk-r { opacity: 0; transform: translateY(14px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.pick.open .pk-l, .pick.open .pk-r { opacity: 1; transform: none; transition: opacity .5s var(--ease) .3s, transform .6s var(--ease) .3s; }
.pick.open .pk-r { transition-delay: .4s; }
.pk-l { display: flex; flex-direction: column; }
.pick .x { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.pick .x path { stroke: var(--ink); stroke-width: 1.6; }
.pick .x:hover { background: var(--wash); }
.pk-name { font-size: 40px; line-height: 1.2; }
.pk-meta { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.pk-intro { margin: 16px 0 0; font-size: 16px; }
/* 这个岗位的技能分在技能树的哪几个领域，点了打开那一页 */
.dom { display: none; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 0; font-size: 13px; }
.dom.on { display: flex; }
.dom a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); transition: color .2s var(--ease), border-color .2s var(--ease); }
.dom a:hover { color: var(--ink); border-color: var(--ink); }
.minis { margin-bottom: 28px; }
.mini, .has { display: none; height: 100%; }
.mini.on, .has.on { display: block; }
.has.on { height: auto; }
.mini svg { width: 100%; height: 100%; }
.mini .side, .mini.is-side .up { display: none; }
.mini.is-side .side { display: block; }
.pk-ask { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick .chip { padding: 3px 10px 3px 8px; gap: 5px; background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; line-height: 1.6; cursor: pointer; }
.quick .chip svg { width: 14px; height: 14px; }
.quick .chip:hover { color: var(--ink); }
.quick .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.quick .chip[aria-pressed="true"] svg { color: #fff; }
.go { margin-top: 32px; padding: 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.go:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }

/* 小树 */
.mini .e { fill: none; stroke: var(--off-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .45s var(--ease) forwards; }
.mini .n > g { opacity: 0; transform: scale(.3); animation: pop .4s var(--ease) forwards; }
.mini .n > g > circle, .mini .n > g > path { fill: #fff; stroke: var(--off-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .3s; }
.mini .n.lit > g > circle, .mini .n.lit > g > path { fill: var(--ink); stroke: var(--ink); }
.mini .n use { color: var(--off-ink); }
.mini .n.lit use { color: #fff; }
.defs { position: absolute; }
.mini .tip > g > circle { stroke: var(--ink); stroke-width: 2.5; }
.mini .tip svg { color: var(--ink); }
.mini .you { fill: var(--ink); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mini .e, .mini .n > g { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .hello, .job { animation: none; }
  .pick, .pick.open, .pk-l, .pk-r, .pick.open .pk-l, .pick.open .pk-r { transition: none; }
}

.foot { max-width: 1200px; margin: 40px auto 0; padding: 28px 24px 48px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; }
.foot p { margin: 4px 0; }

/* 窄屏一栏 17 行：一行里放名字、一句话和需求，编号小一号；详情变成一栏 */
@media (max-width: 900px) {
  .jobs { --row: clamp(32px, calc((100svh - 60px - 140px) / var(--n)), 56px); }
  .home { padding-top: 18px; }
  .hello { margin-bottom: 14px; }
  .jobs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-rows: var(--row); }
  .job:nth-child(10) { border-bottom-color: var(--line-2); }
  .job { column-gap: 12px; }
  .job .no { font-size: 16px; font-weight: 400; color: var(--ink-3); }
  .job .nm { flex-direction: row; align-items: baseline; gap: 10px; }
  .job b { flex: none; }
  .job .ct { display: none; }
}
@media (max-width: 640px) {
  .hello h1 { font-size: 32px; }
  .pick { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 64px 16px 32px; }
  .pick .x { top: 12px; right: 12px; }
  .pk-name { font-size: 32px; }
}
@media (max-width: 560px) {
  main { padding: 0 16px 32px; }
  .top { padding: 0 16px; }
}