/* Project content shares the public content-grid and components.
   Figma 28:7987: 1173px main / 60px gap / 444px sidebar at 2124px.
   No project-specific shell width, type scale, button or field recipe. */
.project-tabs { display:flex; max-width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--color-muted) transparent; }
.project-tabs a { flex:none; white-space:nowrap; }
.project-dashboard h3 { margin:0; font-weight:var(--font-weight-medium); }

/* Optional real project content; missing data never creates demo cards. */
.events-track { display:flex; gap:var(--space-16); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--radius-panel); }
.events-track::-webkit-scrollbar { display:none; }
.event-card { position:relative; overflow:hidden; isolation:isolate; flex:0 0 calc((100% - 2 * var(--space-16)) / 3); min-width:210px; aspect-ratio:1.48; scroll-snap-align:start; display:flex; align-items:end; }
.event-card>img,.event-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.event-art { display:grid; place-items:center; background:radial-gradient(ellipse at 75% 5%,var(--color-accent-soft),transparent 80%),var(--color-surface); }
.event-art .icon { width:60px; height:60px; color:var(--color-accent-text); opacity:.3; }
.event-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 15%,var(--color-backdrop)); }
.event-date { position:absolute; right:var(--space-12); top:var(--space-12); padding:var(--space-4) var(--space-8); border:1px solid var(--color-border); border-radius:var(--radius-small); background:var(--color-backdrop); color:var(--color-text); }
.event-copy { padding:var(--panel-padding); min-width:0; }
.event-copy h3 { color:var(--color-text); overflow-wrap:anywhere; }
.event-copy p { margin-top:var(--space-8); color:var(--color-text); }
.event-upcoming { color:var(--color-accent-text); display:block; margin-bottom:var(--space-4); }
.carousel-arrows { display:flex; gap:var(--space-8); }

.streamer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:var(--space-16); gap:var(--space-4); }
.streamer-item { display:flex; align-items:center; gap:var(--space-12); min-width:0; padding:var(--space-12); border-radius:var(--radius-control); transition:background var(--motion-standard); }
.streamer-item:hover { background:var(--color-hover); }
.streamer-item>img,.streamer-avatar { width:var(--avatar-size); height:var(--avatar-size); flex:none; border-radius:var(--radius-control); object-fit:cover; display:grid; place-items:center; background:var(--color-accent-soft); color:var(--color-accent-text); }
.streamer-item>span:not(.streamer-avatar):not(.external-arrow) { min-width:0; }
.streamer-item strong { display:block; font-weight:var(--font-weight-medium); overflow-wrap:anywhere; }
.streamer-item small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--color-muted); margin-top:var(--space-4); }
.external-arrow { margin-left:auto; flex:none; color:var(--color-accent-text); }
.material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-20); }
.material-card { overflow:hidden; min-width:0; }
.material-cover { display:block; width:100%; aspect-ratio:1.6; object-fit:cover; }
.material-copy { padding:var(--panel-padding); display:flex; flex-direction:column; gap:var(--space-12); }
.material-copy p,.material-copy small { color:var(--color-muted); overflow-wrap:anywhere; }
.material-price { font-size:var(--text-value); font-weight:var(--font-weight-medium); }
.material-link { margin-top:var(--space-4); }
.promo-code { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); text-align:left; overflow-wrap:anywhere; border:1px dashed var(--color-border-strong); border-radius:var(--radius-control); padding:var(--space-16); background:var(--color-accent-soft); color:var(--color-accent-text); font-size:var(--text-value); font-weight:var(--font-weight-medium); }
.promo-code:hover { border-color:var(--color-accent-text); }
.project-promo .material-grid { grid-template-columns:minmax(0,1fr); }

/* One recipe owns marker alignment and equal record-badge widths. */
.project-timeline { padding:var(--panel-padding); }
.record-current { display:flex; flex-direction:column; gap:var(--space-8); border-bottom:1px solid var(--color-border); padding-bottom:var(--space-20); margin-bottom:var(--space-12); }
.record-current>span { color:var(--color-muted); }
.record-current>strong { font-variant-numeric:tabular-nums; }
.project-timeline ol { display:grid; grid-template-columns:minmax(0,1fr) max-content; padding:0; margin:0; list-style:none; }
.project-timeline li { grid-column:1/-1; display:grid; grid-template-columns:subgrid; align-items:center; column-gap:var(--space-16); position:relative; padding:var(--space-12) 0 var(--space-12) var(--space-20); color:var(--color-muted); }
.project-timeline li>time { min-width:0; overflow-wrap:anywhere; }
.project-timeline li:not(.timeline-empty)::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; border:2px solid var(--color-accent-text); border-radius:50%; z-index:1; background:var(--color-surface); }
.project-timeline li:not(:last-child)::after { content:""; position:absolute; left:3.5px; top:50%; height:100%; width:1px; background:var(--color-border); }
.project-timeline li>strong { display:block; width:100%; box-sizing:border-box; text-align:right; font-weight:var(--font-weight-regular); white-space:nowrap; font-variant-numeric:tabular-nums; padding:var(--space-8) var(--space-12); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-accent-soft); color:var(--color-accent-text); }
.project-timeline .launch-record>strong { color:var(--color-success); background:var(--color-success-soft); }
.project-timeline .timeline-empty { padding-left:0; }
.team-panel { padding:var(--space-16); }
.team-member { display:flex; align-items:center; gap:var(--space-12); padding:var(--space-12); border-radius:var(--radius-control); }
.team-member:nth-child(even) { background:var(--color-hover); }
.team-avatar { width:var(--avatar-size); height:var(--avatar-size); border-radius:50%; object-fit:cover; flex:none; display:grid; place-items:center; background:var(--color-accent-soft); color:var(--color-accent-text); }
.team-member>div { min-width:0; }
.team-member strong { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; font-weight:var(--font-weight-medium); overflow-wrap:anywhere; }
.team-member small { display:block; color:var(--color-muted); margin-top:var(--space-4); }
.team-member .language-flag { width:20px; height:15px; }
.team-member .icon-verified,.team-member .icon-verified img { width:16px; height:16px; }
.team-panel>.info-note { padding:var(--space-12); }

/* Observed server status, separate from unimplemented user-report history. */
.availability-panel { padding:var(--panel-padding); }
.availability-intro { color:var(--color-muted); font-size:var(--text-control); line-height:var(--line-body); margin:0 0 var(--space-24); }
.availability-share { display:flex; align-items:center; gap:var(--space-12); }
.availability-share>strong { font-size:var(--text-title); font-weight:var(--font-weight-medium); line-height:var(--line-value); font-variant-numeric:tabular-nums; }
.availability-signal { width:16px; height:16px; clip-path:polygon(100% 0,100% 100%,0 100%); background:var(--color-status-healthy); }
[data-availability-state="unknown"] .availability-signal { background:var(--color-muted); }
[data-availability-state="problem"] .availability-signal { background:var(--color-warning); }
.availability-percent-caption { color:var(--color-muted); font-size:var(--text-small); line-height:var(--line-body); margin:var(--space-8) 0 var(--space-24); }
.availability-count { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-10); margin:0; color:var(--color-muted); }
.availability-count .status-dot { width:8px; height:8px; flex:none; margin:0 var(--space-2) 0 0; box-shadow:0 0 0 4px var(--color-success-soft); }
.availability-fraction { display:inline-flex; align-items:baseline; gap:var(--space-6); font-size:var(--text-value); line-height:var(--line-value); font-weight:var(--font-weight-medium); font-variant-numeric:tabular-nums; }
.availability-count .availability-fraction strong { color:var(--color-text); font-weight:var(--font-weight-medium); }
.availability-divider { color:var(--color-muted); }
.availability-servers { display:flex; flex-wrap:wrap; gap:var(--space-4); margin:var(--space-20) 0 var(--space-24); }
.availability-server { display:block; flex:1; height:12px; min-width:8px; border-radius:var(--radius-small); background:var(--color-border-strong); transition:filter var(--motion-standard),transform var(--motion-standard); }
.availability-server.is-online { background:var(--color-status-healthy); }
.availability-server.is-offline { background:var(--color-danger); }
.availability-server:hover { filter:brightness(1.15); transform:translateY(-2px); }
.report-button { width:100%; }

/* Dialog geometry; fields/buttons/states are shared components. */
.project-dialog h2 { margin-right:var(--control-height); }
.project-dialog fieldset { min-width:0; border:0; margin:0; padding:0; }
.rating-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-20) var(--space-24); }
.rating-fields label:not(.rating-comment) { justify-content:space-between; }
.rating-stars { font-size:var(--text-value); letter-spacing:2px; color:var(--color-muted); white-space:nowrap; }
.rating-comment { grid-column:1/-1; }
.outage-fields { display:flex; flex-direction:column; gap:var(--space-20); }
.dialog-auth-note { display:flex; gap:var(--space-12); align-items:center; margin:var(--space-20) 0; }
.dialog-auth-note .icon { width:20px; height:20px; flex:none; }
.project-dialog>.download-button { width:100%; margin-top:0; }

@media(max-width:800px) {
  .event-card { flex-basis:80%; min-width:0; }
  .streamer-grid,.material-grid { grid-template-columns:minmax(0,1fr); }
  .rating-fields { gap:var(--space-16); }
}
@media(prefers-reduced-motion:reduce) {
  .streamer-item,.availability-server { transition:none; }
  .events-track { scroll-behavior:auto; }
}