/* ideas.syalia.dev: the spec-page layer over Syalia UI.
   Every idea page is a column of full-height "slides" that snap into place.
   Tokens come from syalia-ui.css; this file only adds layout and the few
   pieces a visual spec needs (stats, scenario tabs, device frames). */

html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
@media (min-width: 960px) and (min-height: 720px) {
  html { scroll-snap-type: y mandatory; }
}
body { font-size: var(--text-base); overflow-x: hidden; }

/* ---- top bar --------------------------------------------------------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: .9rem clamp(1rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, rgba(6,10,23,.85), rgba(6,10,23,0)); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar a { text-decoration: none; }
.topbar .syalia-wordmark { font-size: 1.05rem; }
.topbar .crumb { color: var(--text-dim); font-size: var(--text-sm); }

/* ---- side dots (desktop) --------------------------------------------- */
.dots { position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); z-index: var(--z-nav);
  display: flex; flex-direction: column; gap: .7rem; }
.dots a { width: 9px; height: 9px; border-radius: 50%; background: var(--n-700); position: relative;
  transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.dots a:hover, .dots a.is-on { background: var(--amber-400); transform: scale(1.35); }
.dots a span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: var(--text-xs); color: var(--text-dim); opacity: 0; transition: opacity var(--dur-micro) var(--ease); }
.dots a:hover span { opacity: 1; }
@media (max-width: 860px) { .dots { display: none; } }

/* ---- slides ---------------------------------------------------------- */
.slide { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; position: relative;
  display: flex; align-items: center; padding: 5.5rem 0 4rem; overflow: hidden; }
.slide > .container { position: relative; z-index: 1; width: 100%; max-width: 1180px; }
.slide + .slide { border-top: var(--bw) solid rgba(34,48,74,.55); }
.slide h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: .8rem 0 1rem; }
.slide .lede { color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 62ch; margin: 0 0 2rem; }
.slide .lede strong { color: var(--text); font-weight: var(--weight-semibold); }

.hero h1 { font-size: var(--text-display); line-height: 1.02; margin: 1.2rem 0 1.2rem; max-width: 15ch; }
.hero .lede { font-size: clamp(1.05rem, 2vw, 1.3rem); }
.scroll-hint { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: var(--text-faint);
  font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; display: flex;
  flex-direction: column; align-items: center; gap: .3rem; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---- grids ----------------------------------------------------------- */
.cols { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-5-7 { grid-template-columns: 5fr 7fr; }
  .cols-7-5 { grid-template-columns: 7fr 5fr; }
}
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- stats ----------------------------------------------------------- */
.stats { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--border); border: var(--bw) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: rgba(15,23,42,.92); padding: 1.1rem 1.2rem; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--text); }
.stat b small { font-size: .5em; color: var(--text-dim); font-weight: var(--weight-medium); margin-left: .2em; }
.stat span { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.stat.hl b { color: var(--amber-400); }

/* ---- segmented tabs (bigger than su-tabs) ----------------------------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border-radius: var(--radius-full);
  background: var(--surface); border: var(--bw) solid var(--border); margin-bottom: 1.4rem; }
.seg button { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-dim);
  background: transparent; border: 0; border-radius: var(--radius-full); padding: .5rem 1rem; cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.is-active { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(37,99,235,.7); }
.seg button .tag { font-size: .68rem; color: var(--amber-300); margin-left: .35rem; letter-spacing: .06em; }
.seg button.is-active .tag { color: #fde68a; }

/* ---- panel / chips ---------------------------------------------------- */
.panel { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: var(--bw) solid var(--border); border-radius: var(--radius-lg); padding: clamp(1rem, 2.4vw, 1.6rem); }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-xs); padding: .25rem .6rem;
  border-radius: var(--radius-full); border: var(--bw) solid var(--border); color: var(--text-dim); }
.note { font-size: var(--text-xs); color: var(--text-faint); margin-top: .8rem; }
.k { color: var(--amber-400); }

/* ---- bars ------------------------------------------------------------- */
.bar { height: 14px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; transition: width var(--dur-slow) var(--ease); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--text-xs); color: var(--text-dim); margin-top: .6rem; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .35rem; vertical-align: 0; }

/* ---- device frames ---------------------------------------------------- */
.screen-led { aspect-ratio: 16/9; border-radius: 14px; background: #000; border: 10px solid #0b0f1c;
  box-shadow: var(--shadow-xl), 0 0 0 1px #22304a; overflow: hidden; position: relative; container-type: inline-size; }
.browser { border-radius: 14px; border: var(--bw) solid var(--border); background: var(--bg); overflow: hidden; box-shadow: var(--shadow-xl); }
.browser .bar-top { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: var(--surface); border-bottom: var(--bw) solid var(--border); }
.browser .bar-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-700); }
.browser .bar-top span { margin-left: .6rem; font-size: var(--text-xs); color: var(--text-faint); }
.phone-wrap { display: flex; justify-content: center; }
.phone-wrap .su-phone { height: 600px; width: 320px; }

/* ---- view switcher (mock UIs / 3D) ------------------------------------ */
.view { display: none; animation: fadein var(--dur-base) var(--ease); }
.view.is-on { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- catalog ---------------------------------------------------------- */
.idea-card { display: block; text-decoration: none; min-height: 260px; }
.idea-card h3 { font-size: var(--text-2xl); margin: 1rem 0 .5rem; }
.idea-card p { color: var(--text-dim); margin: 0 0 1rem; }
.idea-card.is-soon { opacity: .45; pointer-events: none; }

@media (max-width: 600px) {
  .slide { padding: 4.8rem 0 3rem; }
  .container { padding-inline: 1.1rem; }
  .seg button { padding: .45rem .75rem; }
}

/* phones: tabs stay on one scrollable row; grid children may shrink */
.cols > *, .cards > * { min-width: 0; }
.panel { overflow-x: auto; }
@media (max-width: 700px) {
  .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; border-radius: var(--radius-lg);
    scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; white-space: nowrap; }
  .su-table th, .su-table td { padding: .45rem .4rem; }
  .gauge { justify-content: center; }
  .cell { width: 78px; height: 160px; }
}