/* Projects index / comparison use the shared SpeakerLab application shell.
 * Project workspaces keep their dedicated engineering layout. */

.projects-page>.page-content{width:100%;max-width:none;margin:0}
.project-index-toolbar{margin-bottom:var(--space-3)}
.project-index-toolbar .button--quiet{color:#5d687a}
.project-import-button{position:relative;overflow:hidden}
.project-index-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}
.project-index-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  min-height:112px;
  gap:16px;
  padding:20px 22px;
  border:1px solid var(--app-surface-border);
  border-radius:var(--app-surface-radius);
  background:#fff;
  box-shadow:var(--app-surface-shadow);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.project-index-card:hover{
  border-color:#efb0cf;
  box-shadow:0 14px 36px rgba(58,28,45,.07);
  transform:translateY(-1px);
}
.project-index-card:focus-visible{outline:3px solid rgba(255,46,145,.22);outline-offset:2px}
.project-index-card .project-dot{width:12px;height:12px;background:var(--projects-color);box-shadow:0 0 0 6px rgba(255,46,145,.09)}
.project-index-card h3{margin:0;font-size:18px;line-height:1.25;letter-spacing:-.015em}
.project-index-card p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.project-index-card>b{font-size:20px;color:var(--projects-color)}
.project-empty-state{min-height:320px}
.project-empty-state .empty-icon{margin-bottom:4px;color:var(--projects-color)}
.project-empty-state .empty-icon svg{width:54px;height:54px}

.project-compare-host{
  display:grid;
  gap:18px;
  min-width:0;
}
.project-compare-section{
  min-width:0;
  padding:clamp(18px,1.4vw,26px);
}
.project-compare-section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.project-compare-section__head h2{margin:0;font-size:var(--font-xl);letter-spacing:-.02em}
.project-compare-section__head p{margin:4px 0 0;color:var(--muted);font-size:var(--font-md);line-height:1.5}
.project-compare-section__head>strong{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:5px 9px;border-radius:999px;
  background:#f6efff;color:#641ac6;font-size:12px;white-space:nowrap;
}
.project-compare-page{max-width:none;margin:0}
.project-compare-page>.workspace-card{width:100%;max-width:none;margin:0}
.compare-pickers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.compare-pick{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px 10px;
  align-items:start;
  min-height:58px;
  padding:12px 14px;
  border:1px solid #dfe4eb;
  border-radius:11px;
  background:#fbfcfe;
  overflow-wrap:anywhere;
}
.compare-pick:hover{border-color:#d3c1eb;background:#fcfaff}
.compare-pick input{grid-row:1/3;width:18px;height:18px;margin:1px 0 0;accent-color:var(--purple)}
.compare-pick span{font-size:13px;font-weight:700}
.compare-pick small{font-size:11px;color:var(--muted)}
.project-compare-empty{display:grid;gap:4px;padding:18px;border:1px dashed #d7dde7;border-radius:11px;color:var(--muted)}
.project-compare-empty strong{color:var(--ink)}
[data-ineligible-projects] details{margin-top:14px;padding:12px 14px;border:1px solid #e6e9ee;border-radius:10px;background:#fafbfd}
[data-ineligible-projects] summary{cursor:pointer;font-weight:700}
[data-ineligible-projects] p{margin:8px 0 0;color:var(--muted);font-size:12px}

.compare-conditions{
  display:flex;
  align-items:center;
  gap:14px 20px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.compare-conditions label{display:flex;align-items:center;gap:8px;color:#4f5b6d;font-size:13px;font-weight:650}
.compare-conditions select{
  min-height:40px;
  padding:0 34px 0 11px;
  border:1px solid #d7dde7;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
}
.compare-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:12px 0 16px;font-size:12px;font-weight:650}
.compare-chart-scroll{max-width:100%;overflow-x:auto}
.project-comparison-chart{display:block;width:100%;max-height:440px;background:white;font:12px var(--font-family-ui)}

.project-compare-table-section{padding-bottom:20px}
.project-compare-table-section .compare-table-scroll{margin:0}
.compare-table-scroll{
  max-width:100%;
  overflow:auto;
  border:1px solid #dfe4eb;
  border-radius:12px;
  background:#fff;
}
.compare-table-scroll table{border-collapse:collapse;min-width:720px;width:100%;font-size:13px;background:#fff}
.compare-table-scroll th,.compare-table-scroll td{padding:11px 13px;text-align:left;border-bottom:1px solid #e8ebf0;vertical-align:top}
.compare-table-scroll th{font-weight:700}
.compare-table-scroll small{display:block;margin-top:3px;color:#667085;font-weight:400}
.compare-section{background:#f5f7fa}
.compare-different td{background:#fff9ec}

@media(max-width:900px){
  .project-index-grid,.compare-pickers{grid-template-columns:1fr}
}
@media(max-width:780px){
  .project-index-toolbar .module-toolbar__main{grid-template-columns:1fr 1fr}
  .project-index-toolbar .module-toolbar__nav{grid-template-columns:1fr 1fr}
  .project-index-toolbar [data-open-workshop-example]{grid-column:1/-1}
  .project-index-card{min-height:100px;padding:17px 18px}
  .project-empty-state{min-height:250px}
  .project-compare-section{padding:16px}
  .project-compare-section__head{align-items:flex-start;flex-direction:column;gap:10px}
  .compare-conditions{display:grid;grid-template-columns:1fr}
  .compare-chart-scroll .project-comparison-chart{min-width:640px;max-height:none}
  .compare-table-scroll tbody tr:not(.compare-section)>th{position:sticky;left:0;background:#fff;z-index:1}
}
@media(max-width:440px){
  .project-index-toolbar .module-toolbar__main,.project-index-toolbar .module-toolbar__nav{grid-template-columns:1fr}
  .project-index-toolbar [data-open-workshop-example]{grid-column:auto}
}