/*
  Copyright 2026 Joseph Anthony Abbott III

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/*
  The demo page's own styles (ADR-0029). They sit on jabbott.dev's
  stylesheet, which the page loads first, and use its tokens (--teal,
  --panel, --font...) so the page follows that site's look.
*/

.nadir-sep { color: var(--text-3); letter-spacing: 0; }
.nadir-mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0; text-transform: none; }

/* ---------- Demo and build ---------- */

.nadir-demo {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 56px;
}

.nadir-player { padding: clamp(16px, 2.4vw, 26px); }
.nadir-player__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.nadir-player__head .kicker { margin: 0; }
.nadir-player__head .kicker a { color: inherit; }
.nadir-player__head .kicker a:hover { color: var(--teal-hi); }
.nadir-tabs[hidden] { display: none; }

.nadir-scene { margin: 0; }
.nadir-scene + .nadir-scene { margin-top: 28px; }
.js .nadir-scene + .nadir-scene { margin-top: 0; }
.nadir-scene[hidden] { display: none; }

.nadir-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px rgba(92, 203, 203, 0.12), 0 18px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.nadir-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

.nadir-scene__caption { padding-top: 18px; }
.nadir-scene__title {
  margin: 0 0 8px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
}
.nadir-scene__text { margin: 0 0 16px; color: var(--text-2); max-width: 72ch; }
.nadir-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nadir-stats dd small { color: var(--text-3); font-size: 12px; margin-left: 4px; }
.nadir-scene__note { margin: 0; color: var(--text-3); font-size: 13px; }

.nadir-build { padding: 22px; }
.nadir-spec { margin-bottom: 14px; }
.nadir-spec dd a { color: var(--teal); }
.nadir-subject { font-size: 13.5px; overflow-wrap: anywhere; }
.nadir-subject .nadir-mono { color: var(--text); }

.nadir-milestones {
  list-style: none;
  margin: 0 0 20px; padding: 0;
  display: grid; gap: 7px;
}
.nadir-milestone {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  gap: 3px 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.nadir-milestone__id { font-family: var(--mono); color: var(--text-3); }
.nadir-milestone__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nadir-milestone__count { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.nadir-milestone__bar { grid-column: 1 / -1; background: var(--slate-2); }
.nadir-milestone__bar span { display: block; height: 100%; background: var(--teal); }
.nadir-milestone[data-state="done"] .nadir-milestone__id { color: var(--teal); }
.nadir-milestone[data-state="active"] { color: var(--text); }
.nadir-milestone[data-state="active"] .nadir-milestone__id,
.nadir-milestone[data-state="active"] .nadir-milestone__count { color: var(--amber); }
.nadir-milestone[data-state="active"] .nadir-milestone__bar span { background: var(--amber); }

.nadir-download { margin-bottom: 14px; }
.nadir-download .btn { margin-bottom: 10px; }
.nadir-download__meta { margin: 0 0 6px; color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
.nadir-download__meta code {
  padding: 0.05em 0.35em;
  font-family: var(--mono); font-size: 0.95em;
  color: #a9ecec;
  background: rgba(92, 203, 203, 0.08);
  border: 1px solid rgba(92, 203, 203, 0.16);
}
.nadir-hash { overflow-wrap: anywhere; font-size: 11px; }

/* ---------- Features ---------- */

.nadir-features .section-head { flex-wrap: wrap; }
.nadir-features .chips[hidden] { display: none; }
.nadir-features__lede { margin: -6px 0 22px; color: var(--text-2); max-width: 70ch; }

.nadir-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.nadir-feature {
  display: flex; flex-direction: column;
  padding: 20px 20px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nadir-feature:hover { border-color: rgba(92, 203, 203, 0.45); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.nadir-feature[hidden] { display: none; }
.nadir-feature__name { margin: 4px 0 8px; font-size: 19px; font-weight: 500; line-height: 1.3; }
.nadir-feature__summary { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; flex: 1; }
.nadir-feature__tasks .tag { font-family: var(--mono); font-size: 11px; padding: 2px 8px; }

.nadir-status { letter-spacing: 0.08em; }
.nadir-status--shipped { color: var(--green); }
.nadir-status--in-progress { color: var(--amber); }
.nadir-status--planned { color: var(--text-3); }
.nadir-feature[data-status="planned"] { background: rgba(16, 19, 21, 0.55); }
.nadir-feature[data-status="planned"] .nadir-feature__name { color: var(--text-2); }

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
  .nadir-demo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .nadir-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .nadir-feature { transition: none; }
}