/* dashboard-layout.css
   Dashboard frame: page layout, header, floating menu, tile grid, tile transitions, timeline and forecast base.
*/

.metro-page{
  min-height:100svh;padding:0 12px 12px;
  background:#0f1a17;
  color:var(--paper);display:grid;grid-template-rows:auto 1fr;gap:8px;
}
.metro-page.expanded-mode{
  display:block;
  min-height:100svh;
  padding-bottom:0;
  background:var(--trajectory-bg);
  color:#0f1a17;
}
.metro-page.expanded-mode .metro-grid{
  display:block;
  min-height:calc(100svh - 60px);
  perspective:none;
}
.metro-page.expanded-mode .timeline-tile{
  min-height:calc(100svh - 60px);
  border:0;
  background:var(--trajectory-bg);
}
.metro-page.expanded-mode .insight-shell,
.metro-page.expanded-mode .goals-shell,
.metro-page.expanded-mode .timeline-app-shell{
  min-height:calc(100svh - 60px);
}
.dashboard-header{margin:0 -12px;padding:14px clamp(18px,4vw,56px);}
.dashboard-tabs{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;}
.dashboard-tabs::-webkit-scrollbar{display:none;}
.dashboard-tab-accent{background:var(--ember);color:#0f1a17;font-weight:700;}
.dashboard-tab-accent:hover,.dashboard-tab-accent.active{background:var(--ember);color:#0f1a17;}
.dashboard-compact-nav{display:none;}
.metro-page.expanded-mode .dashboard-header{display:none;}
.metro-page.expanded-mode .dashboard-compact-nav{
  position:fixed;
  right:clamp(10px,2vw,22px);
  top:clamp(10px,2vw,22px);
  z-index:30;
  display:block;
  width:48px;
  min-height:48px;
}
.compact-nav-toggle{
  position:absolute;
  right:0;
  top:0;
  z-index:3;
  width:48px;
  height:48px;
  border:1px solid rgba(163,194,180,.26);
  border-radius:0;
  background:#0f1a17;
  box-shadow:0 12px 30px rgba(15,26,23,.25);
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(12px);
}
.compact-nav-toggle .brand-mark{width:25px;height:25px;}
.compact-nav-cards{
  position:absolute;
  right:0;
  top:0;
  width:174px;
  height:258px;
  pointer-events:none;
}
.compact-nav-cards button{
  position:absolute;
  right:0;
  top:0;
  width:162px;
  min-height:56px;
  border:2px solid #0f1a17;
  border-radius:0;
  background:#f2b33d;
  color:#0f1a17;
  padding:9px 11px;
  text-align:left;
  font-size:15px;
  font-weight:600;
  box-shadow:0 12px 30px rgba(15,26,23,.18);
  opacity:0;
  transform:translateX(0) translateY(0) scale(.72) rotate(5deg);
  transform-origin:right center;
  transition:opacity .18s ease,transform .34s cubic-bezier(.2,.8,.2,1),filter .18s ease,background .18s ease;
  cursor:pointer;
}
.compact-nav-cards button:nth-child(2){background:#ffffff;}
.compact-nav-cards button:nth-child(3){background:#0f1a17;color:#f1f3ee;border-color:#0f1a17;}
.dashboard-compact-nav:not(.is-open) .compact-nav-cards,
.dashboard-compact-nav:not(.is-open) .compact-nav-cards button{pointer-events:none!important;}
.dashboard-compact-nav.is-open{width:182px;min-height:262px;}
.dashboard-compact-nav.is-open .compact-nav-cards{pointer-events:auto;}
.dashboard-compact-nav.is-open .compact-nav-cards button{opacity:1;pointer-events:auto;}
.dashboard-compact-nav.is-open .compact-nav-cards button:nth-child(1){transform:translateX(0) translateY(60px) scale(1);}
.dashboard-compact-nav.is-open .compact-nav-cards button:nth-child(2){transform:translateX(0) translateY(118px) scale(1);}
.dashboard-compact-nav.is-open .compact-nav-cards button:nth-child(3){transform:translateX(0) translateY(176px) scale(1);}
.compact-nav-cards button:hover,
.goal-deck-card:hover,
.timeline-deck-card:hover{filter:brightness(1.06);box-shadow:0 22px 54px rgba(15,26,23,.24);}
.metro-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-auto-rows:clamp(112px,calc((100svh - 82px) / 4),168px);
  gap:8px;
  align-content:start;
  min-height:calc(100svh - 60px);
  perspective:1400px;
  transition:gap .36s ease, background .36s ease;
}
@media (min-width:901px){
  .dashboard-slot{grid-column:var(--desktop-col) / span var(--desktop-col-span,1);grid-row:var(--desktop-row) / span var(--desktop-row-span,1);}
}
@media (max-width:900px){
  .dashboard-slot{grid-column:var(--tablet-col) / span var(--tablet-col-span,1);grid-row:var(--tablet-row) / span var(--tablet-row-span,1);}
}
.metro-tile{
  border:1px solid rgba(15,26,23,.10);border-radius:0;color:#0f1a17;text-align:left;padding:16px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;box-shadow:none;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
  background:#f1f3ee;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  animation-delay:var(--tile-delay,0ms);
}
button.metro-tile:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.08);}
.metro-tile:disabled{cursor:not-allowed;}
.metro-tile h3{font-family:var(--site-font);font-weight:700;font-size:clamp(18px,1.8vw,31px);line-height:1.08;margin:0;overflow-wrap:break-word;word-break:normal;}
.metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega) h3{font-size:clamp(15px,1.15vw,22px);}
.metro-tile p{font-size:13px;line-height:1.38;color:#44524c;margin-top:8px;}
.metro-tile button{align-self:flex-start;margin-top:12px;}
.tile-wide{grid-column:span 2;}
.tile-large{grid-column:span 2;grid-row:span 2;}
.tile-mega{grid-column:span 4;grid-row:span 2;}
.ddi-complete-tile{grid-row:span 2;}
.tile-dashboard{background:#ffffff;color:#0f1a17;border-color:#cad3cd;}
.tile-dashboard p{color:#44524c;}
.tile-blue{background:#ffffff;}
.tile-cyan{background:#ffffff;}
.tile-green{background:#ffffff;}
.tile-orange{background:#ffffff;color:#0f1a17;}
.tile-orange p{color:rgba(15,26,23,.76);}
.tile-purple{background:#ffffff;}
.tile-red{background:#ffffff;}
.tile-teal{background:#ffffff;}
.tile-slate{background:#ffffff;}
.tile-blue p,.tile-cyan p,.tile-green p,.tile-purple p,.tile-red p,.tile-teal p,.tile-slate p{color:#44524c;}
.tile-locked{background:#e1e6e2;color:#66756e;filter:grayscale(.2);cursor:not-allowed;opacity:.72;border-color:rgba(15,26,23,.08);}
.tile-dashboard.tile-locked{background:#ffffff;color:#0f1a17;filter:none;opacity:.94;border-color:#dce5df;}
.tile-dashboard.tile-locked p{color:#44524c;}
.tile-done.tile-locked{opacity:.92;filter:saturate(.8) brightness(.92);}
.tile-locked p{color:#66756e;}
.tile-done::before{content:"✓";position:absolute;right:14px;top:9px;font-size:30px;font-weight:700;color:#0f1a17;z-index:1;}
.tile-lock::after{content:"locked";position:absolute;right:12px;bottom:10px;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:#66756e;}
.metro-grid.dashboard-enter .metro-tile{animation:tileFlipIn .58s cubic-bezier(.2,.8,.2,1) both;}
.metro-grid.dashboard-deal .metro-tile{
  --deal-x:-46vw;
  --deal-y:-18vh;
  --deal-rot:-16deg;
  animation:tileDealIn .68s cubic-bezier(.18,.86,.24,1) both;
  animation-delay:calc(var(--tile-delay,0ms) * .62);
}
.metro-grid.dashboard-deal .metro-tile:nth-child(2n){--deal-y:-10vh;--deal-rot:13deg;}
.metro-grid.dashboard-deal .metro-tile:nth-child(3n){--deal-x:-34vw;--deal-y:12vh;--deal-rot:-10deg;}
.metro-grid.dashboard-deal .metro-tile:nth-child(4n){--deal-x:-52vw;--deal-y:24vh;--deal-rot:18deg;}
.metro-grid.tiles-to-timeline{
  background:transparent;
  animation:gridGapsClose 1.35s cubic-bezier(.2,.8,.2,1) both;
}
.metro-grid.tiles-to-timeline .metro-tile{
  background:var(--trajectory-bg)!important;color:#0f1a17;border-color:rgba(15,26,23,.08);
  filter:none!important;opacity:1!important;animation:tileTurnToTrajectory .82s cubic-bezier(.22,.84,.27,1) both;
}
.metro-grid.tiles-to-timeline .metro-tile > *{animation:tileFaceOut .42s ease both;}
.metro-grid.tiles-to-timeline .tile-done::before,.metro-grid.tiles-to-timeline .tile-lock::after{opacity:0!important;animation:none!important;}
.metro-grid.timeline-split{
  background:transparent;
  animation:gridGapsOpen .62s cubic-bezier(.2,.8,.2,1) both;
}
.trajectory-back{
  background:var(--trajectory-bg);border-color:rgba(15,26,23,.08);box-shadow:none;
}
.metro-grid.timeline-split .trajectory-back{animation:trajectoryBackSplit .62s ease both;}
.metro-tile.tile-flipped{animation:scoreFlip .72s cubic-bezier(.2,.8,.2,1) both;}
.timeline-tile{animation:timelineMerge .7s cubic-bezier(.2,.8,.2,1) both;}
.timeline-tile > *{animation:timelineContentIn .42s ease .24s both;}
.metro-grid.timeline-enter{
  display:block;
  min-height:calc(100svh - 60px);
  perspective:none;
}
.metro-grid.timeline-enter .timeline-tile{
  min-height:calc(100svh - 60px);
}
@keyframes tileFlipIn{
  0%{opacity:0;transform:rotateY(-84deg) scale(.96);}
  100%{opacity:1;transform:rotateY(0) scale(1);}
}
@keyframes tileDealIn{
  0%{opacity:0;transform:translate(var(--deal-x),var(--deal-y)) rotate(var(--deal-rot)) scale(.72);filter:brightness(.72) saturate(.88);}
  62%{opacity:1;transform:translate(10px,-6px) rotate(1.8deg) scale(1.025);filter:brightness(1.08) saturate(1.03);}
  100%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);filter:brightness(1) saturate(1);}
}
@keyframes tileFaceOut{
  0%{opacity:1;transform:rotateY(0);}
  100%{opacity:0;transform:rotateY(88deg);}
}
@keyframes tileTurnToTrajectory{
  0%{transform:rotateY(0deg) scale(1);}
  50%{transform:rotateY(90deg) scale(.985);}
  51%{transform:rotateY(-90deg) scale(.985);}
  100%{transform:rotateY(0deg) scale(1);}
}
@keyframes gridGapsClose{
  0%,82%{gap:8px;}
  100%{gap:0;}
}
@keyframes gridGapsOpen{
  0%{gap:0;}
  100%{gap:8px;}
}
@keyframes trajectoryBackSplit{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes scoreFlip{
  0%{transform:rotateY(-180deg) scale(.98);filter:brightness(.94);}
  55%{transform:rotateY(12deg) scale(1.015);filter:brightness(1.08);}
  100%{transform:rotateY(0) scale(1);filter:brightness(1);}
}
@keyframes timelineMerge{
  0%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0);}
  62%{opacity:1;transform:scale(1.005);clip-path:inset(0 0 0 0);}
  100%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0);}
}
@keyframes timelineContentIn{
  0%{opacity:0;transform:translateY(10px);}
  100%{opacity:1;transform:none;}
}
.module-simple{
  align-items:center;justify-content:center;text-align:center;padding:14px;
}
.module-simple h3{
  width:100%;max-width:100%;font-size:clamp(12px,1.25vw,23px)!important;line-height:1.12;text-align:center;
  white-space:nowrap;overflow:visible;text-overflow:clip;padding:2px 7px 5px;
}
.module-simple .tile-time{
  position:absolute;right:10px;bottom:8px;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:#44524c;font-variant-numeric:tabular-nums;
}
.module-simple.tile-lock::after{right:auto;left:10px;}
.tile-orange .tile-time{color:rgba(15,26,23,.72);}
.tile-corner-flag{
  position:absolute;left:-39px;top:13px;width:126px;transform:rotate(-45deg);z-index:2;
  text-align:center;background:#f1f3ee;color:#0f1a17;border:1px solid rgba(15,26,23,.14);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.tile-orange .tile-corner-flag{background:#0f1a17;color:#f1f3ee;border-color:rgba(255,255,255,.18);}
.module-preview{
  justify-content:space-between;text-align:left;align-items:stretch;padding:13px;
}
.module-preview h3{font-size:clamp(16px,1.25vw,22px)!important;text-align:left;white-space:nowrap;}
.module-preview p{font-size:11px;line-height:1.22;margin-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.tile-cta{align-self:flex-start;margin-top:8px;border:1px solid currentColor;padding:5px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.ddi-tile-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:8px;}
.pattern-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,3vw,18px);align-items:center;justify-content:center;width:min(520px,100%);margin:0 auto;}
.pattern-card{background:#f1f3ee;border:1px solid #d6ddd8;padding:clamp(4px,2vw,10px);display:grid;place-items:center;min-height:clamp(78px,24vw,118px);min-width:0;}
.pattern-svg{width:min(160px,34vw);height:auto;display:block;}
.pattern-svg line{stroke:#0f1a17;stroke-width:7;stroke-linecap:round;}
.tile-note{font-size:11px;line-height:1.3;color:#44524c;margin-top:8px;}
.timeline-tile{grid-column:1 / -1;grid-row:1 / span 4;background:var(--trajectory-bg);color:#0f1a17;display:block;padding:0;position:relative;min-height:calc(100svh - 68px);overflow:visible;}
.timeline-tile:hover{transform:none!important;filter:none!important;}
.timeline-tile p{color:#44524c;}
.timeline-app-shell{position:relative;min-height:calc(100svh - 60px);overflow:visible;background:#f1f3ee;}
.timeline-real-app{position:relative;min-height:calc(100svh - 60px);color:#0f1a17;}
.timeline-main-stage{min-height:calc(100svh - 60px);display:grid;place-items:center;padding:clamp(64px,7vw,96px) clamp(18px,5vw,72px) clamp(30px,4vw,56px);}
.timeline-app-view{width:min(1160px,100%);margin:0 auto;position:relative;min-height:min(720px,calc(100svh - 150px));display:grid;place-items:center;}
.timeline-history-figure{width:min(1060px,100%);height:clamp(390px,62svh,660px);position:relative;}
.timeline-chart{width:100%;height:100%;display:block;overflow:visible;}
.timeline-empty-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(18px,2vw,28px);font-weight:700;color:rgba(15,26,23,.58);text-align:center;max-width:440px;}
.timeline-forecast-view{align-content:center;gap:clamp(20px,3vw,34px);}
.forecast-sky{width:min(920px,100%);display:grid;gap:clamp(18px,3vw,30px);text-align:center;position:relative;isolation:isolate;padding:clamp(22px,4vw,44px);overflow:hidden;border-radius:0;}
.forecast-sky::before{content:"";position:absolute;inset:-8%;z-index:-2;background-image:linear-gradient(rgba(241,243,238,.18),rgba(241,243,238,.72)),url("../assets/timeline-weather-strip.png");background-size:400% 100%;background-position:0% center;filter:saturate(.92) contrast(.94);opacity:.72;transition:background-position .5s ease,opacity .3s ease;}
.forecast-sky::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 16%,rgba(255,255,255,.44),transparent 36%),linear-gradient(180deg,rgba(241,243,238,.12),rgba(241,243,238,.64));pointer-events:none;}
.forecast-sky.wx-partly::before{background-position:33.333% center;}
.forecast-sky.wx-cloudy::before{background-position:66.666% center;}
.forecast-sky.wx-rainy::before{background-position:100% center;opacity:.66;}
.forecast-current{display:grid;gap:4px;justify-items:center;}
.forecast-current b{font-family:var(--display-font);font-size:clamp(84px,18vw,176px);font-weight:400;line-height:.84;color:#0f1a17;letter-spacing:-.03em;}
.forecast-current span{font-family:var(--display-font);font-size:clamp(22px,5vw,45px);font-weight:420;letter-spacing:-.015em;color:#0f1a17;}
.forecast-current p{max-width:650px;margin:8px auto 0;font-size:clamp(14px,1.6vw,18px);line-height:1.48;color:#44524c!important;}
.forecast-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end;}
.forecast-day{min-height:138px;border:1px solid #cad3cd;border-radius:0;background:rgba(255,255,255,.82);box-shadow:none;padding:16px 12px;display:grid;align-content:space-between;gap:12px;}
.forecast-day small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#44524c;}
.forecast-day b{font-family:var(--display-font);letter-spacing:-.03em;font-weight:400;font-size:clamp(30px,5vw,51px);line-height:1;font-variant-numeric:tabular-nums;color:#0f1a17;}
.forecast-day span{font-size:12px;font-weight:700;color:#44524c;}
.forecast-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.tutorial-layer{position:fixed;inset:0;z-index:80;pointer-events:none;display:none;}
.tutorial-layer.active{display:block;}
.tutorial-scrim{position:absolute;inset:0;background:rgba(7,10,19,.48);backdrop-filter:blur(2px);}
.tutorial-highlight{position:absolute;border:3px solid #f2b33d;box-shadow:0 0 0 9999px rgba(7,10,19,.48),0 18px 45px rgba(0,0,0,.28);transition:all .24s ease;pointer-events:none;}
.tutorial-card{position:absolute;z-index:2;width:min(360px,calc(100vw - 28px));background:#f1f3ee;color:#0f1a17;border:1px solid #d6ddd8;padding:18px;box-shadow:0 18px 45px rgba(0,0,0,.28);pointer-events:auto;}
.tutorial-card h3{font-size:22px;line-height:1.05;margin:0 0 8px;text-align:left!important;color:#0f1a17;}
.tutorial-card p{font-size:14px;line-height:1.4;margin:0;color:#44524c!important;}
.tutorial-mini-kde{margin:10px 0 4px;color:#0f1a17;}
.tutorial-actions{display:flex;gap:8px;align-items:center;justify-content:flex-start;margin-top:14px;flex-wrap:wrap;}
.tutorial-actions button{border:0;padding:8px 11px;font-weight:700;cursor:pointer;}
.tutorial-next{background:#f2b33d;color:#0f1a17;}
.tutorial-skip{background:transparent;color:#44524c;border:1px solid #cad3cd!important;}