/* ===== AI Workstation Styles ===== */
/* Loaded on finder, detail, and comparison pages */

/* ---- Page header ---- */
.ws-page-header{margin-bottom:32px}
.ws-page-header h1{
  font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:8px;
}
.ws-page-header .subtitle{color:var(--dim);max-width:600px}

/* ---- Affiliate disclosure strip ---- */
.ws-disclosure{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:24px;
  font-size:.8rem;color:var(--dim);line-height:1.5;
}
.ws-disclosure a{color:var(--accent)}

/* ---- Quick picks ---- */
.ws-quick-picks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;margin:32px 0;
}
.ws-quick-pick{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;transition:border-color .15s;
  display:flex;flex-direction:column;gap:8px;
}
.ws-quick-pick:hover{border-color:var(--accent)}
.ws-quick-pick .badge{
  display:inline-block;padding:2px 10px;border-radius:20px;
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  background:var(--accent);color:#fff;width:fit-content;
}
.ws-quick-pick h3{margin:0;font-size:1rem;font-weight:600}
.ws-quick-pick .verdict{font-size:.85rem;color:var(--dim);line-height:1.5}
.ws-quick-pick .specs-row{font-size:.8rem;color:var(--dim);display:flex;gap:12px;flex-wrap:wrap}
.ws-quick-pick .specs-row span{white-space:nowrap}
.ws-quick-pick .limitation{font-size:.78rem;color:var(--dim);font-style:italic;margin-top:4px}
.ws-quick-pick .actions{display:flex;gap:8px;margin-top:8px}
.ws-quick-pick .actions a{font-size:.82rem;font-weight:500;text-decoration:none}

/* ---- Filter bar ---- */
.ws-filter-bar{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;margin-bottom:24px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
}
.ws-filter-group{display:flex;flex-direction:column;gap:4px}
.ws-filter-group label{font-size:.75rem;color:var(--dim);font-weight:500}
.ws-filter-group select,.ws-filter-group input{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;color:var(--text);
  font-size:.85rem;font-family:inherit;
}
.ws-filter-group select:focus,.ws-filter-group input:focus{
  outline:none;border-color:var(--accent);
}
.ws-search-box{flex:1;min-width:200px}
.ws-search-box input{width:100%}

/* ---- Filter chips ---- */
.ws-filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ws-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;background:rgba(99,102,241,.1);border:1px solid var(--accent);
  border-radius:20px;font-size:.75rem;color:var(--text);
}
.ws-filter-chip button{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:1rem;line-height:1;padding:0;
}

/* ---- Sort bar ---- */
.ws-sort-bar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;flex-wrap:wrap;gap:12px;
}
.ws-sort-bar select{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 12px;color:var(--text);
  font-size:.85rem;font-family:inherit;
}
.ws-result-count{font-size:.85rem;color:var(--dim)}

/* ---- Product grid ---- */
.ws-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;margin-bottom:32px;
}
.ws-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s;
}
.ws-card:hover{border-color:var(--accent)}
.ws-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ws-card-header h3{margin:0;font-size:1rem;font-weight:600}
.ws-card-header .manufacturer{font-size:.78rem;color:var(--dim)}
.ws-card .best-for-badge{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:.7rem;font-weight:600;background:rgba(99,102,241,.15);color:var(--accent);
}
.ws-card .card-verdict{font-size:.85rem;color:var(--dim);line-height:1.5}
.ws-card .card-specs{font-size:.8rem;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.ws-card .card-specs .label{color:var(--dim)}
.ws-card .card-specs .value{color:var(--text);font-weight:500}
.ws-card .card-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.ws-card .card-actions a,.ws-card .card-actions button{
  font-size:.82rem;font-weight:500;text-decoration:none;
  padding:6px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface2);color:var(--text);
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.ws-card .card-actions a:hover,.ws-card .card-actions button:hover{
  border-color:var(--accent);color:var(--accent);
}
.ws-card .card-actions .primary{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.ws-card .card-actions .primary:hover{
  background:var(--accent-hover);color:#fff;
}
.ws-card .card-compare{
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--dim);
}
.ws-card .card-compare input{cursor:pointer;accent-color:var(--accent)}

/* ---- Sticky compare tray ---- */
.ws-compare-tray{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--surface);border-top:1px solid var(--accent);
  padding:12px 24px;display:none;
  box-shadow:0 -4px 24px rgba(0,0,0,.3);
}
.ws-compare-tray.active{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ws-compare-tray .selected-items{display:flex;gap:8px;flex-wrap:wrap}
.ws-compare-tray .selected-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;background:var(--surface2);border-radius:var(--radius-sm);
  font-size:.8rem;
}
.ws-compare-tray .selected-item button{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:1rem;line-height:1;padding:0;
}
.ws-compare-tray .compare-actions{display:flex;gap:8px;align-items:center}
.ws-compare-tray .compare-actions a,.ws-compare-tray .compare-actions button{
  padding:8px 20px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;
  text-decoration:none;cursor:pointer;font-family:inherit;border:none;
}
.ws-compare-tray .btn-compare{
  background:var(--accent);color:#fff;
}
.ws-compare-tray .btn-clear{
  background:transparent;color:var(--dim);border:1px solid var(--border);
}

/* ---- Sections ---- */
.ws-section{margin:48px 0}
.ws-section h2{font-size:1.4rem;font-weight:700;margin-bottom:16px}
.ws-section h3{font-size:1.1rem;font-weight:600;margin:24px 0 12px}

/* ---- Spec table ---- */
.ws-spec-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.9rem}
.ws-spec-table th{text-align:left;padding:12px;background:var(--surface);border-bottom:2px solid var(--border);font-weight:600;color:var(--dim);font-size:.75rem;text-transform:uppercase}
.ws-spec-table td{padding:12px;border-bottom:1px solid var(--border)}

/* ---- Info box ---- */
.ws-info-box{
  background:var(--surface);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;padding:16px 20px;margin:24px 0;
  font-size:.9rem;color:var(--dim);
}
.ws-info-box strong{color:var(--text)}

/* ---- Model fit tool ---- */
.ws-model-fit{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;margin:24px 0;
}
.ws-model-fit table{width:100%;border-collapse:collapse;font-size:.85rem}
.ws-model-fit th{text-align:left;padding:8px;color:var(--dim);border-bottom:1px solid var(--border);font-size:.75rem;text-transform:uppercase}
.ws-model-fit td{padding:8px;border-bottom:1px solid var(--border)}
.ws-model-fit .fits-yes{color:var(--green)}
.ws-model-fit .fits-no{color:var(--red)}

/* ---- Detail page ---- */
.ws-detail-header{margin-bottom:24px}
.ws-detail-header .badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ws-detail-header .price-tag{font-size:1.2rem;font-weight:700;color:var(--accent)}
.ws-detail-grid{display:grid;grid-template-columns:1fr;gap:32px;margin:24px 0}

/* ---- Comparison page ---- */
.ws-compare-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.9rem}
.ws-compare-table th,.ws-compare-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.ws-compare-table th{background:var(--surface);font-weight:600;color:var(--dim);font-size:.75rem;text-transform:uppercase}
.ws-compare-table .winner{background:rgba(74,222,128,.05);font-weight:600}
.ws-compare-table td:first-child{font-weight:500;color:var(--dim)}

/* ---- Methodology ---- */
.ws-methodology{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;margin:32px 0;
  font-size:.85rem;color:var(--dim);line-height:1.7;
}
.ws-methodology strong{color:var(--text)}
.ws-methodology .dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.ws-methodology .dates .label{font-weight:600;color:var(--dim)}

/* ---- FAQ ---- */
.ws-faq{margin:32px 0}
.ws-faq details{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:16px;margin-bottom:8px;
}
.ws-faq summary{cursor:pointer;font-weight:600;font-size:.95rem}
.ws-faq details[open] summary{margin-bottom:12px}
.ws-faq details p{color:var(--dim);font-size:.88rem;line-height:1.6}

/* ---- Responsive ---- */
@media(max-width:768px){
  .ws-grid{grid-template-columns:1fr}
  .ws-quick-picks{grid-template-columns:1fr}
  .ws-filter-bar{flex-direction:column;align-items:stretch}
  .ws-filter-group{width:100%}
  .ws-filter-group select,.ws-filter-group input{width:100%}
  .ws-compare-table{font-size:.78rem}
  .ws-compare-table th,.ws-compare-table td{padding:8px}
  .ws-card .card-specs{grid-template-columns:1fr}
}

/* Mobile overflow prevention */
@media(max-width:768px){
  .ws-page-header h1{font-size:1.5rem;word-break:break-word}
  .ws-section{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ws-compare-tray{max-width:100vw;box-sizing:border-box}
  .ws-methodology{max-width:100%;overflow-wrap:break-word;word-break:break-word}
  body{overflow-x:hidden}
}