/* ==========================================================================
   Dimau Next - interface layer 2.0
   Spatial depth, anticipatory rail, generated components, ambient command bar.
   Pairs with dimau-next.js. No build step. Sits on top of dimau-ui.css (1.0).
   Palette: Dimau sky-blue house style. Light surfaces, dark words only.
   ========================================================================== */

:root{
  --dn-sky:#87CEEB;
  --dn-sky-soft:#CFEAF7;
  --dn-ink:#10293A;
  --dn-ink-2:#43687E;
  --dn-accent:#1C86C9;
  --dn-accent-deep:#0F5E92;
  --dn-on-accent:#FFFFFF;
  --dn-good:#2E9E78;
  --dn-warm:#E08A3C;

  --dn-plane-1:rgba(255,255,255,.72);
  --dn-plane-2:rgba(255,255,255,.52);
  --dn-plane-3:rgba(255,255,255,.34);
  --dn-edge:rgba(255,255,255,.80);
  --dn-line:rgba(15,63,92,.14);

  --dn-r:18px;
  --dn-r-s:12px;
  --dn-r-pill:999px;

  --dn-lift-1:0 1px 2px rgba(15,63,92,.08), 0 6px 18px rgba(15,63,92,.10);
  --dn-lift-2:0 2px 6px rgba(15,63,92,.10), 0 18px 44px rgba(15,63,92,.18);
  --dn-lift-3:0 4px 10px rgba(15,63,92,.12), 0 32px 70px rgba(15,63,92,.24);

  --dn-spring:cubic-bezier(.22,1.2,.36,1);
  --dn-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 1. Spatial depth: glass planes ------------------------------- */

.dn-plane{
  position:relative;
  background:var(--dn-plane-1);
  border:1px solid var(--dn-edge);
  border-radius:var(--dn-r);
  box-shadow:var(--dn-lift-1);
  padding:16px 18px;
  color:var(--dn-ink);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  transition:transform .42s var(--dn-spring), box-shadow .42s var(--dn-spring);
  will-change:transform;
}
.dn-plane--2{ background:var(--dn-plane-2); box-shadow:var(--dn-lift-2); }
.dn-plane--3{ background:var(--dn-plane-3); box-shadow:var(--dn-lift-3); }
.dn-plane--flat{ box-shadow:none; }

/* a plane that lifts toward the pointer - depth you can feel, not just see */
.dn-plane[data-dn-lift]{ transform:translateZ(0); }
.dn-plane[data-dn-lift].is-lifted{
  transform:translate3d(var(--dn-tx,0),var(--dn-ty,-3px),0) scale(1.012);
  box-shadow:var(--dn-lift-2);
}

.dn-plane__title{ font-weight:700; font-size:15px; letter-spacing:-.01em; margin:0 0 2px; }
.dn-plane__hint{ font-size:12.5px; color:var(--dn-ink-2); margin:0; }

/* soft bubble field - the background depth cue, purely decorative */
.dn-bubbles{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.dn-bubbles span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.85), rgba(255,255,255,.18) 62%, rgba(255,255,255,0) 70%);
  animation:dnFloat linear infinite;
  opacity:.5;
}
@keyframes dnFloat{
  from{ transform:translate3d(0,14vh,0) scale(1); }
  to{ transform:translate3d(0,-115vh,0) scale(1.18); }
}

/* ---------- 2. Anticipatory rail ---------------------------------------- */

.dn-rail{
  display:block; margin:14px 0 18px; position:relative; z-index:2;
}
.dn-rail__head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 9px;
}
.dn-rail__eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dn-accent-deep);
}
.dn-rail__context{ font-size:12.5px; color:var(--dn-ink-2); }
.dn-rail__items{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
}
.dn-suggest{
  appearance:none; -webkit-appearance:none; border:0; text-align:left; width:100%;
  font:inherit; cursor:pointer;
  background:var(--dn-plane-1);
  border:1px solid var(--dn-edge);
  border-radius:var(--dn-r);
  box-shadow:var(--dn-lift-1);
  padding:13px 15px 13px 15px;
  color:var(--dn-ink);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  display:grid; gap:3px;
  transition:transform .4s var(--dn-spring), box-shadow .4s var(--dn-spring);
  animation:dnRise .5s var(--dn-spring) both;
}
.dn-suggest:nth-child(2){ animation-delay:.05s; }
.dn-suggest:nth-child(3){ animation-delay:.1s; }
.dn-suggest:nth-child(4){ animation-delay:.15s; }
@keyframes dnRise{ from{ opacity:0; transform:translate3d(0,10px,0) scale(.985);} to{ opacity:1; transform:none; } }
.dn-suggest:hover,.dn-suggest:focus-visible{ transform:translateY(-3px); box-shadow:var(--dn-lift-2); outline:none; }
.dn-suggest:focus-visible{ border-color:var(--dn-accent); }
.dn-suggest:active{ transform:translateY(-1px) scale(.995); }
.dn-suggest__lead{ display:flex; align-items:center; gap:8px; }
.dn-suggest__dot{
  width:8px; height:8px; border-radius:50%; background:var(--dn-accent); flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(28,134,201,.16);
}
.dn-suggest--top .dn-suggest__dot{ background:var(--dn-good); box-shadow:0 0 0 4px rgba(46,158,120,.18); }
.dn-suggest__label{ font-weight:700; font-size:14.5px; letter-spacing:-.01em; }
.dn-suggest__why{ font-size:12.5px; color:var(--dn-ink-2); }
.dn-suggest__meta{ font-size:11.5px; color:var(--dn-accent-deep); font-weight:600; }

/* ---------- 3. Generated components ------------------------------------- */

.dn-gen{ display:grid; gap:12px; }
.dn-gen__caption{ font-size:12.5px; color:var(--dn-ink-2); margin:0; }

.dn-slider{ display:grid; gap:8px; }
.dn-slider__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.dn-slider__label{ font-weight:650; font-size:13.5px; }
.dn-slider__value{ font-weight:700; font-size:18px; color:var(--dn-accent-deep); font-variant-numeric:tabular-nums; }
.dn-slider input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; margin:0;
}
.dn-slider input[type=range]::-webkit-slider-runnable-track{
  height:8px; border-radius:var(--dn-r-pill);
  background:linear-gradient(90deg,var(--dn-accent) var(--dn-fill,40%), rgba(15,63,92,.14) var(--dn-fill,40%));
}
.dn-slider input[type=range]::-moz-range-track{ height:8px; border-radius:var(--dn-r-pill); background:rgba(15,63,92,.14); }
.dn-slider input[type=range]::-moz-range-progress{ height:8px; border-radius:var(--dn-r-pill); background:var(--dn-accent); }
.dn-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-8px;
  border-radius:50%; background:#fff; border:1px solid var(--dn-edge);
  box-shadow:var(--dn-lift-1); cursor:grab;
}
.dn-slider input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--dn-edge);
  box-shadow:var(--dn-lift-1); cursor:grab;
}
.dn-slider input[type=range]:focus-visible::-webkit-slider-thumb{ border-color:var(--dn-accent); box-shadow:0 0 0 4px rgba(28,134,201,.22); }
.dn-slider__scale{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--dn-ink-2); }

.dn-compare{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.dn-compare th,.dn-compare td{ padding:9px 11px; text-align:left; border-bottom:1px solid var(--dn-line); }
.dn-compare thead th{
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dn-ink-2);
  border-bottom:1px solid var(--dn-line);
}
.dn-compare tbody tr:last-child td{ border-bottom:0; }
.dn-compare td.is-num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:650; }
.dn-compare tr.is-best td{ background:rgba(46,158,120,.10); }
.dn-compare tr.is-best td:first-child{ border-top-left-radius:var(--dn-r-s); border-bottom-left-radius:var(--dn-r-s); }
.dn-compare tr.is-best td:last-child{ border-top-right-radius:var(--dn-r-s); border-bottom-right-radius:var(--dn-r-s); }
.dn-compare__bar{ display:block; height:5px; border-radius:var(--dn-r-pill); background:var(--dn-accent); margin-top:5px; }

.dn-dash{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
.dn-stat{
  background:var(--dn-plane-2); border:1px solid var(--dn-edge); border-radius:var(--dn-r-s);
  padding:11px 13px; display:grid; gap:2px;
}
.dn-stat__k{ font-size:11.5px; color:var(--dn-ink-2); font-weight:600; }
.dn-stat__v{ font-size:22px; font-weight:750; letter-spacing:-.02em; color:var(--dn-ink); font-variant-numeric:tabular-nums; }
.dn-stat__d{ font-size:11.5px; font-weight:650; }
.dn-stat__d.is-up{ color:var(--dn-good); }
.dn-stat__d.is-down{ color:var(--dn-warm); }
.dn-spark{ display:block; width:100%; height:30px; margin-top:4px; }

.dn-choice{ display:flex; flex-wrap:wrap; gap:8px; }
.dn-chip{
  appearance:none; border:1px solid var(--dn-edge); background:var(--dn-plane-2);
  border-radius:var(--dn-r-pill); padding:8px 14px; font:inherit; font-size:13px; font-weight:650;
  color:var(--dn-ink); cursor:pointer; min-height:40px;
  transition:transform .3s var(--dn-spring), box-shadow .3s var(--dn-spring), background .2s linear;
}
.dn-chip:hover{ transform:translateY(-2px); box-shadow:var(--dn-lift-1); }
.dn-chip[aria-pressed=true]{ background:var(--dn-accent); color:var(--dn-on-accent); border-color:var(--dn-accent); }

/* ---------- 4. Ambient command bar -------------------------------------- */

.dn-ambient{
  position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:240; width:min(640px,calc(100vw - 28px));
  display:flex; align-items:center; gap:8px;
  background:var(--dn-plane-1); border:1px solid var(--dn-edge);
  border-radius:var(--dn-r-pill); box-shadow:var(--dn-lift-2);
  padding:7px 8px 7px 14px;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}
.dn-ambient[hidden]{ display:none; }
.dn-ambient__input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; font:inherit; font-size:14.5px;
  color:var(--dn-ink); padding:8px 0; outline:none;
}
.dn-ambient__input::placeholder{ color:var(--dn-ink-2); }
.dn-ambient__btn{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--dn-edge);
  background:var(--dn-plane-2); cursor:pointer; display:grid; place-items:center; color:var(--dn-accent-deep);
  transition:transform .3s var(--dn-spring), background .2s linear;
}
.dn-ambient__btn:hover{ transform:scale(1.06); }
.dn-ambient__btn--go{ background:var(--dn-accent); border-color:var(--dn-accent); color:var(--dn-on-accent); }
.dn-ambient__btn.is-listening{ background:var(--dn-good); border-color:var(--dn-good); color:#fff; animation:dnPulse 1.5s ease-in-out infinite; }
@keyframes dnPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,158,120,.45);} 50%{ box-shadow:0 0 0 10px rgba(46,158,120,0);} }
.dn-ambient__results{
  position:absolute; left:8px; right:8px; bottom:calc(100% + 9px);
  background:var(--dn-plane-1); border:1px solid var(--dn-edge); border-radius:var(--dn-r);
  box-shadow:var(--dn-lift-2); padding:6px; display:grid; gap:4px;
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
}
.dn-ambient__results[hidden]{ display:none; }
.dn-ambient__result{
  appearance:none; border:0; background:transparent; font:inherit; text-align:left; width:100%;
  padding:9px 11px; border-radius:var(--dn-r-s); cursor:pointer; color:var(--dn-ink); font-size:13.5px;
}
.dn-ambient__result:hover,.dn-ambient__result:focus-visible{ background:rgba(28,134,201,.12); outline:none; }
.dn-ambient__result b{ font-weight:700; }
.dn-ambient__result span{ display:block; font-size:11.5px; color:var(--dn-ink-2); }
.dn-ambient__say{ font-size:11.5px; color:var(--dn-ink-2); padding:4px 11px 2px; }

.dn-launcher{
  position:fixed; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:239;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--dn-edge);
  background:var(--dn-plane-1); box-shadow:var(--dn-lift-2); cursor:pointer;
  display:grid; place-items:center; color:var(--dn-accent-deep);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:transform .4s var(--dn-spring);
}
.dn-launcher:hover{ transform:scale(1.07); }
.dn-launcher[hidden]{ display:none; }

.dn-toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:241;
  background:var(--dn-ink); color:#fff; font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:var(--dn-r-pill); box-shadow:var(--dn-lift-2);
  animation:dnRise .35s var(--dn-spring) both;
}

.dn-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Phones ------------------------------------------------------- */

@media (max-width:560px){
  .dn-rail__items{ grid-template-columns:1fr; }
  .dn-ambient{ width:calc(100vw - 20px); padding:6px 6px 6px 12px; }
  .dn-ambient__input{ font-size:16px; }
  .dn-dash{ grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); }
  .dn-compare{ font-size:12.5px; }
  .dn-compare th,.dn-compare td{ padding:8px; }
}

/* ---------- Motion and contrast preferences ------------------------------ */

@media (prefers-reduced-motion:reduce){
  .dn-plane,.dn-suggest,.dn-chip,.dn-ambient__btn,.dn-launcher{ transition:none!important; }
  .dn-suggest,.dn-toast{ animation:none!important; }
  .dn-bubbles{ display:none; }
  .dn-ambient__btn.is-listening{ animation:none; }
}
@media (prefers-contrast:more){
  :root{ --dn-plane-1:rgba(255,255,255,.96); --dn-plane-2:rgba(255,255,255,.92); --dn-line:rgba(15,63,92,.34); }
}
@media print{
  .dn-ambient,.dn-launcher,.dn-bubbles,.dn-rail,.dn-toast{ display:none!important; }
}