/* Yero5 · עמוד פרויקט (מסלול שלבים, כותרת) וחיפוש. נטען אחרי styles.css */
/* ---------- search ---------- */
.search-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 10px;border:1px solid var(--line);background:var(--surface);border-radius:999px;color:var(--muted);font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.search-btn svg{flex:none}
.search-btn kbd{font:500 11px/1 Assistant,system-ui;border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:var(--muted);background:var(--bg)}
.search-btn.on{border-color:var(--ink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .search-btn:hover{color:var(--ink);border-color:#cfc6b8} }
.sfield{display:flex;align-items:center;gap:10px;margin:14px 0 6px;padding:0 16px;height:52px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);transition:border-color .15s,box-shadow .15s}
.sfield:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(36,33,29,.06)}
.sfield svg{width:18px;height:18px;flex:none}
.sfield input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:18px;color:var(--ink);padding:0}
.sfield input::placeholder{color:#a79e92}
.sfield input::-webkit-search-cancel-button{cursor:pointer}
.shint{color:var(--muted);font-size:14px;margin:10px 2px;max-width:60ch}
.scount{color:var(--muted);font-size:13px;margin:12px 2px 0}
.sh{display:flex;align-items:baseline;gap:8px;font-size:15px;margin:22px 2px 8px}
.sh span{color:var(--muted);font-weight:500;font-size:13px}
mark{background:#f6e3c9;color:inherit;border-radius:3px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.srow{display:flex;gap:12px;align-items:center;width:100%;padding:12px 16px;border:0;border-bottom:1px solid var(--line);background:none;text-align:start;cursor:pointer}
.srow:last-child{border-bottom:0}
.srow:hover{background:#fbf8f3}
.srow-main{flex:1;min-width:0;display:flex;flex-direction:column}
.srow .title{font-weight:600}
.srow .info{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px;font-size:13px;color:var(--muted)}
.srow .info>span:not(.chip)+span:not(.chip)::before{content:"·";margin-inline-end:6px;color:#c4baac}
.srow .notes{font-size:13px;color:var(--muted);margin-top:3px}
.srow-go{color:#c4baac;flex:none}

/* ---------- project header ---------- */
.phero{margin:6px 0 0}
.phero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.phero h1{font-size:34px;line-height:1.15;margin:8px 0 6px;text-wrap:balance;min-width:0;overflow-wrap:anywhere}
.phero-top .btn{margin-top:14px;flex:none}
.pmeta{margin:0;color:var(--muted);font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.pmeta i{font-style:normal;margin:0 8px;color:#c4baac}
.pmeta .chip{margin-inline-start:10px}

/* stage track */
.track{margin:30px 0 4px}
.track-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.track-step{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.track-name{font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--accent);margin-top:2px}
.track-tasks{font-size:14px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.track-tasks b{color:var(--ink);font-weight:700}
.track-line{--dot:28px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);position:relative}
.track-line::before,.track-line::after{content:"";position:absolute;top:calc(var(--dot)/2 - 1px);height:2px;border-radius:2px;inset-inline-start:calc(50% / var(--n))}
.track-line::before{inset-inline-end:calc(50% / var(--n));background:var(--line)}
.track-line::after{width:calc((100% - 100% / var(--n)) * var(--i) / (var(--n) - 1));background:var(--accent);transition:width .25s var(--ease-out)}
.track-line li{display:flex;justify-content:center;position:relative;z-index:1}
.dot{width:var(--dot);height:var(--dot);padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;position:relative}
.dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px #d8cfc2;transition:transform .15s var(--ease-out),box-shadow .15s}
.dot.past::before{background:var(--accent);box-shadow:none;width:8px;height:8px}
.dot.cur::before{width:16px;height:16px;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.dot:focus-visible{outline:none}
.dot:focus-visible::before{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.dot::after{content:attr(data-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(3px);white-space:nowrap;font-size:12px;font-weight:600;color:#fff;background:var(--ink);padding:4px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .15s var(--ease-out),transform .15s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .dot:hover::before{transform:scale(1.25)}
  .dot.cur:hover::before{transform:none}
  .dot:hover::after{opacity:1;transform:translateX(-50%)}
  .track-line li:first-child .dot::after{left:auto;right:0;transform:translateY(3px)}
  .track-line li:first-child .dot:hover::after{transform:none}
  .track-line li:last-child .dot::after{left:0;transform:translateY(3px)}
  .track-line li:last-child .dot:hover::after{transform:none}
}
.track-next{margin-top:10px;font-size:13px;color:var(--muted)}

@media (max-width:760px){
  .search-btn{width:38px;padding:0;justify-content:center}
  .search-btn span,.search-btn kbd{display:none}
  .topbar .search-btn{margin-inline-start:auto}
  .phero h1{font-size:27px}
  .pmeta{font-size:14px}
  .track{margin-top:24px}
  .track-name{font-size:19px}
  .track-head{flex-wrap:wrap;gap:6px}
  .track-line{--dot:24px}
  .sfield{height:48px}
  .sfield input{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .track-line::after,.dot::before,.dot::after,.search-btn,.sfield{transition:none}
}
.sfield input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#d8cfc2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}