.container{ max-width: var(--container-wide); }  /* 1200px */


/* Hero */
.hero{
  margin-bottom:40px;
}
/* page-title / page-sub のサイズは theme.css に集約。
   このページ固有のレイアウト差分のみここで定義。*/

/* Section */
.section{
  margin-bottom:40px;
}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:16px;
  gap:12px;
}
.section-title{
  font-size: var(--fs-body); font-weight:600;
  color:var(--ink);
}
.section-title .count{
  color:var(--ink-mute); font-weight:400;
  margin-left:4px;
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-small);
}
/* Clients grid — workspace.html の .guideline-grid と同じ minmax(280px, 1fr) で統一 */
.workspaces-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.workspace-card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:all .12s;
  display:flex; flex-direction:column; gap:10px;
}
.workspace-card:hover{
  border-color:var(--accent);
  background:var(--bg-subtle);
}

/* Add card — ワークスペース新規追加（dashed） */
.workspace-card.add{
  border:1px dashed var(--border-strong);
  background:var(--bg-subtle);
  align-items:center; justify-content:center;
  text-align:center;
  color:var(--ink-soft);
  min-height:100%;
}
.workspace-card.add:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
}
.workspace-card.add .plus{
  width:32px; height:32px;
  border-radius:6px;
  background:#fff;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
  color:inherit;
}
.workspace-card.add .label{
  font-size: var(--fs-small); font-weight:500;
}
.workspace-head{
  display:flex; align-items:center; gap:10px;
}
.workspace-icon{
  width:36px; height:36px;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:600;
  font-size: var(--fs-lead);
  flex-shrink:0;
}
.workspace-name{
  font-size: var(--fs-body); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.workspace-guideline{
  font-size: var(--fs-caption); color:var(--ink-soft);
}
.workspace-stats{
  display:flex; gap:12px;
  font-family:'JetBrains Mono', monospace;
  font-size: var(--fs-caption);
  color:var(--ink-mute);
  padding-top:10px;
  border-top:1px solid var(--border-soft);
}
.workspace-stats .num{ color:var(--ink); font-weight:500 }

/* Empty workspace state */
.workspace-empty{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:32px 24px;
  text-align:center;
  background:var(--bg-subtle);
  color:var(--ink-soft);
  font-size: var(--fs-small);
}
.workspace-empty .cta{
  display:inline-block;
  margin-top:16px;
  padding:10px 20px;
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:500;
  font-size: var(--fs-small);
}
.workspace-empty .cta:hover{ background:var(--accent-hover) }

/* Recent jobs リストは jobs-list.js + theme.css の .past-jobs-* class を共用。
   未審査時の空状態だけここで定義。 */
.no-jobs{
  padding:32px 16px;
  text-align:center;
  color:var(--ink-mute);
  font-size: var(--fs-small);
  background:var(--bg-subtle);
  border-radius:10px;
}

/* Footer (dev) */
.app-footer{
  display:flex; justify-content:center; gap:16px;
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
  font-size: var(--fs-caption);
}
.app-footer a, .app-footer button{
  color:var(--ink-mute);
  text-decoration:none;
  background:none; border:none;
  cursor:pointer; font-family:inherit;
  font-size: var(--fs-caption);
}
.app-footer a:hover, .app-footer button:hover{ color:var(--ink-soft) }