/* ──────────────────────────────────────────────────────────────────────────
   Project page. Deliberately thin: the body of the page is the shared .tile /
   .home-grid / .task markup in theme.css, so almost everything here is the
   header block and a few row types. Tokens only — no new palette.
   ────────────────────────────────────────────────────────────────────────── */

.pj-head{
  --pj-accent:var(--accent);
  display:flex; align-items:flex-start; gap:var(--sp-6);
  padding:2px 0 22px; margin-bottom:20px; border-bottom:1px solid var(--border);
}
.pj-head-main{flex:1; min-width:0}

.pj-title{display:flex; align-items:center; gap:11px; flex-wrap:wrap; position:relative}
/* The negative margin lives on the heading, not on the button inside it: on the button it also
   shortened the button's own max-width:100% by 4px, which put an ellipsis in a seven-letter
   title with 800px of empty room beside it. */
.pj-h1{font-size:var(--fs-h1); font-weight:650; letter-spacing:-.02em; line-height:1.15; min-width:0; margin-left:-6px}

/* The title is the switcher. With no rail entry it is the only control every project page is
   guaranteed to have, so it carries the way out to the other projects. It has to still read as
   a heading first and a control second: the caret is the only permanent hint. */
.pj-switch{
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  background:none; border:0; padding:1px 6px 3px; border-radius:var(--radius-sm);
  font:inherit; color:var(--text-bright); cursor:pointer; text-align:left;
  transition:background var(--dur-fast) var(--ease);
}
.pj-switch:hover{background:var(--bg-surface)}
.pj-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pj-switch .pj-dot{width:10px; height:10px}
.pj-caret{font-size:13px; color:var(--text-faint); flex:0 0 auto; transition:color var(--dur-fast)}
.pj-switch:hover .pj-caret,.pj-switch[aria-expanded=true] .pj-caret{color:var(--accent)}
/* The project's accent as a dot: in the menu the only fast way to tell nine similar rows apart at
   a glance, and in the header it leads the name. */
.pj-dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--pj-accent,var(--accent));
}

.pj-blurb{margin:10px 0 0; color:var(--text-dim); font-size:var(--fs-body); max-width:64ch}

.pj-stats{display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 0; font-size:var(--fs-small); color:var(--text-dim)}
.pj-stats b{color:var(--text-bright); font-weight:650; font-size:var(--fs-lead); margin-right:3px}
.pj-stats .over b{color:var(--warning)}          /* meaning, not decoration */
.pj-stats .muted{color:var(--text-faint)}
.pj-stats .muted b{color:var(--text-faint)}
.pj-stats .pj-last{white-space:nowrap}

/* Where this project's work lives, as the rail's own symbols; then what you can do here. */
.pj-links{display:flex; align-items:center; gap:4px 6px; flex-wrap:wrap; margin:16px 0 0 -8px}
.pj-links .btn{text-decoration:none}
.pj-links-gap{flex:1}
.pj-go{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 10px 0 8px; border:0; border-radius:var(--radius-sm); background:none; color:var(--text-dim); font:inherit; font-size:var(--fs-small); font-weight:600; text-decoration:none; cursor:pointer; transition:background var(--dur-fast),color var(--dur-fast)}
.pj-go:hover{background:var(--bg-hover); color:var(--text-bright); text-decoration:none}
.pj-state{font-size:var(--fs-small); font-weight:600; color:var(--text-faint)}
.pj-state.st-paused{color:var(--warning)} .pj-state.st-shipped{color:var(--teal)}

/* ── the switcher menu ───────────────────────────────────────────────────── */
.pj-menu{
  /* Reset the accent inside the menu. It sits inside .pj-head, so every project without one of
     its own inherited THIS page's colour and eight rows came up wearing Vice Station's violet. */
  --pj-accent:var(--accent);
  position:absolute; z-index:60; top:calc(100% + 9px); left:0;
  width:340px; max-width:calc(100vw - 32px);
  background:var(--bg-elevated); border:1px solid var(--border-light);
  border-radius:var(--radius); box-shadow:0 18px 40px rgba(0,0,0,.5);
  padding:8px; display:flex; flex-direction:column; gap:6px;
}
.pj-menu[hidden]{display:none}
.pj-menu-find{
  width:100%; background:var(--bg-base); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:8px 10px; font-size:var(--fs-small);
}
.pj-menu-find:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pj-menu-list{max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:1px}
.pj-menu-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:0; border-radius:var(--radius-sm); padding:8px 9px;
  font:inherit; color:var(--text); cursor:pointer;
}
.pj-menu-item:hover{background:var(--bg-hover)}
.pj-menu-item.here{background:var(--bg-selected)}
.pj-menu-item.here .pj-mi-n{color:var(--text-bright); font-weight:650}
.pj-mi-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-small)}
.pj-mi-s{font-size:var(--fs-tiny); color:var(--text-faint); flex:0 0 auto; white-space:nowrap}
.pj-mi-s b{color:var(--text-dim); font-weight:700}
.pj-mi-s b.over{color:var(--warning)}            /* meaning, not decoration */
.pj-mi-quiet{color:var(--text-faint); opacity:.7}
.pj-menu-empty{padding:16px 10px; text-align:center; font-size:var(--fs-small); color:var(--text-faint)}

/* Doc + art + file rows — same rhythm as .act in the Recent changes tile. */
.pj-doc,.pj-art,.pj-file{
  display:flex; align-items:center; gap:9px; padding:8px 4px; width:100%;
  border-bottom:1px solid var(--border); text-decoration:none; color:inherit;
  background:none; border-left:0; border-right:0; border-top:0; font:inherit; text-align:left;
}
.pj-doc:last-child,.pj-art:last-child,.pj-file:last-child{border-bottom:0}
.pj-doc:hover,.pj-art:hover,.pj-file:hover{background:var(--bg-hover)}
.pj-doc:hover,.pj-file:hover{text-decoration:none}
.pj-art{cursor:pointer}
.pj-doc-n,.pj-art-n{flex:1; min-width:0; font-size:13.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pj-doc-t,.pj-art-t{font-size:var(--fs-tiny); color:var(--text-faint); flex:0 0 auto}
/* Two docs called "Run Log" in different folders are not the same doc. */
.pj-doc-dir{margin-left:7px; font-size:var(--fs-tiny); color:var(--text-faint)}
.pj-file-i{flex:0 0 auto; display:flex; color:var(--text-faint)}
.pj-file-s{font-size:var(--fs-tiny); color:var(--text-faint); flex:0 0 auto; font-variant-numeric:tabular-nums}

/* Truncation used to be silent: the tile head said 23 and the body showed 8. */
.pj-more{
  display:block; width:100%; margin-top:6px; padding:8px 6px;
  background:none; border:0; border-radius:var(--radius-sm);
  color:var(--text-dim); font:inherit; font-size:var(--fs-small); cursor:pointer; text-align:center;
}
.pj-more:hover{background:var(--bg-surface); color:var(--accent)}
/* .link ships as a <span> elsewhere; here it is a real button so it can be tabbed to. */
.tile-head button.link{background:none; border:0; padding:0; font:inherit; font-size:12.5px}

.pj-retry{text-align:center; margin-top:-8px}

/* ── an empty project ─────────────────────────────────────────────────────
   Four tiles all saying "nothing" read as a page that failed to load. This one
   says what will land here and why — the join is not guessable, since a task
   has to carry this exact project name to appear. */
.pj-new{max-width:620px; margin:8px auto 0; padding:34px 28px 30px; text-align:center}
.pj-new-ico{display:flex; justify-content:center; margin-bottom:12px}
.pj-new-ico .pj-dot{width:12px; height:12px}
.pj-new h2{font-size:var(--fs-h2); font-weight:700; color:var(--text-bright)}
.pj-new p{margin:8px auto 0; max-width:46ch; font-size:var(--fs-small); color:var(--text-dim)}
.pj-new-list{
  list-style:none; margin:22px auto 0; max-width:420px;
  display:flex; flex-direction:column; gap:9px; text-align:left;
}
.pj-new-list li{display:flex; align-items:baseline; gap:10px; font-size:var(--fs-small); color:var(--text-faint)}
.pj-new-list li span{flex:0 0 auto; width:18px; display:flex; justify-content:center; color:var(--text-faint); transform:translateY(2px)}
.pj-new-list li b{color:var(--text-dim); font-weight:650}
.pj-new-steps{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:24px}

/* Doc status pills reuse .pill; these are the doc-hub vocabulary. The base rule matters and is
   scoped to the doc row: the hub is a folder of markdown anyone can put a frontmatter word in,
   and an unlisted one ("living") rendered as bare uppercase text with no pill around it. Listed
   below it, so the specific colours still win on equal specificity. */
.pj-doc .pill{background:none; padding:0; font-weight:500; color:var(--text-faint)}
.pj-doc .pill[class*=st-]{background:none}
.pill.st-complete,.pill.st-active{background:rgba(91,185,140,.14); color:var(--success)}
.pill.st-in-progress,.pill.st-draft{background:rgba(var(--accent-rgb),.14); color:var(--accent)}
.pill.st-concept,.pill.st-stub{background:var(--bg-elevated); color:var(--text-faint)}
.pill.st-paused{background:rgba(217,162,58,.14); color:var(--warning)}
.pill.st-shipped{background:rgba(108,179,201,.14); color:var(--teal)}
.pill.st-archived{background:var(--bg-elevated); color:var(--text-faint)}

@media(max-width:860px){
  .pj-head{flex-direction:column; gap:18px}
}
@media(max-width:720px){
  #proj{padding-top:calc(18px + var(--safe-top))}
  .pj-h1{font-size:22px}
  .pj-stats{gap:14px}
  .pj-links{gap:6px}
  .pj-menu{width:100%; left:0; right:0}
  /* 16px or iOS zooms the whole page on focus. */
  .pj-menu-find{font-size:16px}
  /* Name, status and time all fit; the folder made a third truncated string on one 343px line. */
  .pj-doc-dir{display:none}
  .pj-new{padding:28px 18px 24px}
}
@media (hover:none){
  /* Touch targets. Measured before this: rows 37px, the header buttons 30px, the switcher 31px —
     all a coin-toss with a thumb. Keyed to the pointer, not the viewport, and mouse density is
     untouched. */
  .pj-doc,.pj-art,.pj-file,.pj-menu-item,.pj-more{min-height:44px}
  .pj-switch{min-height:44px}
  .pj-links .btn{min-height:44px}
  .tile-head button.link{min-height:44px; display:inline-flex; align-items:center}
}