/* ═══════════════════════════════════════════════════════════
   TRAKVEN — round 5
   side section-dock · pillars 3D canvas · timeline flip · widgets showcase
   ═══════════════════════════════════════════════════════════ */

/* ── SIDE SECTION DOCK (replaces top nav links) ── */
.side-dock{position:fixed;top:50%;right:18px;transform:translateY(-50%);z-index:900;
  display:flex;flex-direction:column;gap:6px;padding:10px 9px;border-radius:22px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(20,16,40,.22)}
.side-dock-item{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;border:none;background:transparent;
  height:38px;padding:0 8px;border-radius:13px;color:var(--ink-2);overflow:hidden;width:38px;
  transition:width .28s var(--ease),background .2s,color .2s}
.side-dock-item ion-icon{font-size:19px;min-width:22px;color:var(--sd-c,var(--ink-2));transition:color .2s}
.side-dock-item .sd-label{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;color:var(--ink)}
.side-dock-item .sd-label a{color:var(--ink);text-decoration:none}
.side-dock-item .sd-label a:hover{color:var(--sd-c,#7C3AED)}
.side-dock-item .sd-sep{color:var(--ink-3);font-weight:500}
.side-dock-item .sd-beta{font-size:8px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:#7C3AED;background:rgba(124,58,237,.14);border-radius:999px;padding:1px 5px;margin-left:2px}
/* Expand only the hovered item; selecting collapses again. Active = subtle neutral highlight + coloured icon, no border. */
.side-dock-item:hover{width:auto;padding-right:14px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.side-dock-item:hover .sd-label{opacity:1;transform:none}
.side-dock-item.active{background:transparent;border-color:transparent;box-shadow:none}
.side-dock-item.active ion-icon{color:var(--sd-c,#7C3AED)}
.side-dock-item{border:0!important;box-shadow:none!important}
.side-dock-pair{appearance:none}
.side-dock-pair .sd-label{pointer-events:auto}
.side-dock.dock-collapsed .side-dock-item,
.side-dock.dock-collapsed .side-dock-item:hover{width:38px;padding-right:8px;background:transparent}
.side-dock.dock-collapsed .side-dock-item .sd-label{opacity:0;transform:translateX(-4px);pointer-events:none}
@media(max-width:980px){ .side-dock{display:none} }

/* ── PILLARS — premium jump + spin on hover ── */
.pillar{transition:transform .3s var(--ease)}
.pillar:hover .pillar-ic{animation:pillarPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes pillarPop{
  0%{transform:translateY(0) rotate(0) scale(1)}
  38%{transform:translateY(-13px) rotate(-10deg) scale(1.1)}
  68%{transform:translateY(-4px) rotate(7deg) scale(1.04)}
  84%{transform:translateY(-2px) rotate(-3deg) scale(1.02)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){ .pillar:hover .pillar-ic{animation:none} }

/* ── TIMELINE TOGGLE — lively 3D flip + sweep ── */
.tl-phone{perspective:1400px}
.tl-phone .shot-device{transition:transform .55s cubic-bezier(.5,0,.2,1)}
.tl-phone.flipping .shot-device{transform:rotateY(14deg) scale(.97)}
.tl-phone .shot-device::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  background-size:280% 100%;background-position:160% 0;opacity:0}
.tl-phone.flipping .shot-device::after{animation:tlSweep .65s ease-out}
@keyframes tlSweep{0%{opacity:0;background-position:160% 0}25%{opacity:1}100%{opacity:0;background-position:-60% 0}}
.tl-toggle-thumb{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.tl-confetti{position:absolute;inset:0;z-index:40;pointer-events:none}

/* ── WIDGETS SHOWCASE ── */
.widgets-feature{padding:90px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 14%,#F4F1FC 50%,var(--bg) 86%,var(--bg) 100%)}
.wdg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:30px;margin-top:28px;align-items:stretch}
.wdg-lg{grid-column:span 2}
.wdg{margin:0;display:flex;min-width:0;flex-direction:column;gap:10px}
.wdg-card{background:linear-gradient(140deg,#fff,#F7F5FF);border:1px solid var(--line-2);border-radius:24px;padding:16px;
  box-shadow:0 20px 44px -20px rgba(30,20,70,.28);transition:transform .35s var(--ease),box-shadow .35s;flex:1;min-height:0}
.wdg:hover .wdg-card{transform:translateY(-6px);box-shadow:0 30px 60px -22px color-mix(in srgb,var(--w) 40%,rgba(30,20,70,.3))}
.wdg figcaption{text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.wdg-head{display:flex;align-items:center;gap:10px}
.wdg-logo{width:28px;height:28px;border-radius:9px;flex:none;background:url('assets/trakven-logo.png') center/contain no-repeat}
.wdg-h-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.wdg-h-text b{font-size:13.5px;font-weight:800;color:var(--ink)}
.wdg-h-text i{font-size:8.5px;font-weight:800;letter-spacing:.7px;font-style:normal;color:var(--w)}
.wdg-count{min-width:22px;text-align:center;font-size:11px;font-weight:800;color:var(--w);background:color-mix(in srgb,var(--w) 14%,#fff);border-radius:999px;padding:2px 8px}
.wdg-divider{height:1px;background:var(--line);margin:11px 0 7px}
.wdg-row{display:flex;align-items:center;gap:9px;padding:6px 0}
.wdg-pill{flex:none;min-width:52px;text-align:center;font-size:10px;font-weight:800;color:var(--w);background:color-mix(in srgb,var(--w) 12%,#fff);border-radius:8px;padding:4px 6px}
.wdg-pill.alt{color:#F97316;background:rgba(249,115,22,.12)}
.wdg-rtitle{flex:1;min-width:0;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdg-check{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-3);opacity:.5}
.wdg-check.done{border:none;background:#10B981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.55 17.6 4.35 12.4l1.41-1.41 3.79 3.79 8.69-8.69 1.41 1.41z'/%3E%3C/svg%3E") center/14px no-repeat;opacity:1}
.wdg-bell{flex:none;font-size:17px;color:#F97316}
.wdg-streak{flex:none;font-size:12px;font-weight:800;color:#F59E0B}
.wdg-sub{font-size:10.5px;color:var(--ink-3);padding:0 0 4px 61px;margin-top:-4px}
.wdg-day{font-size:9px;font-weight:800;letter-spacing:.6px;color:var(--w);padding-top:8px}
.wdg-rtype{font-size:15px}
/* quick tags */
.wdg-qt{display:flex;align-items:center;gap:10px;padding:7px 0}
.wdg-qt-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff)}
.wdg-qt-ic ion-icon{font-size:16px}
.wdg-qt-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.wdg-qt-t b{font-size:13px;font-weight:700;color:var(--ink)}
.wdg-qt-t i{font-size:10.5px;font-style:normal;color:var(--ink-3)}
/* calendar */
.wdg-cal-week{display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px}
.wdg-cal-week span{text-align:center;font-size:8.5px;font-weight:800;color:var(--ink-3)}
.wdg-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-top:3px}
.wdg-cal .d{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;color:var(--ink-2)}
.wdg-cal .d .dot{width:4px;height:4px;border-radius:50%;background:var(--w)}
.wdg-cal .d.today span{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--w)}
/* habit board */
.wdg-board{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.wdg-board .brow{display:flex;align-items:center;gap:6px}
.wdg-board .bt{flex:0 0 64px;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdg-board .bcells{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.wdg-board .bc{aspect-ratio:1;border-radius:50%;background:var(--ink-3);opacity:.18}
.wdg-board .bc.done{background:#10B981;opacity:1}
.wdg-board .bc.miss{background:var(--ink-3);opacity:.3}
.wdg-board .bc.todo{background:var(--w);opacity:.9}
.wdg-board .bdays{display:flex;gap:6px;padding-left:70px;margin-bottom:2px}
.wdg-board .bdays span{flex:1;text-align:center;font-size:8.5px;font-weight:800;color:var(--ink-3)}
/* quick add tiles */
.wdg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.wdg-tile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 6px;border-radius:15px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink)}
.wdg-tile ion-icon{font-size:21px;color:var(--w)}
.wdg-note{margin-top:30px;text-align:center;font-size:13px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.wdg-note ion-icon{font-size:16px;color:#6D4BE8}
@media(max-width:1100px){ .wdg-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:26px} .wdg-lg{grid-column:span 2} }
@media(max-width:620px){ .wdg-grid{grid-template-columns:1fr;gap:22px;margin-top:22px} .wdg-lg{grid-column:span 1} .wdg-card{border-radius:20px;padding:14px} }
/* Light alarm showcase: keep only the live phone preview dark. */
.alarm-feature{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 14%,#FFF8F2 50%,var(--bg) 86%,var(--bg) 100%);color:var(--ink)}
.alarm-feature .feature-h{color:var(--ink)}
.alarm-feature .feature-lead{color:var(--ink-2)}
.alarm-feature .feature-lead strong{color:var(--ink);font-weight:700}
.alarm-feature .feature-lead em{color:#EA580C}
.alarm-feature .feature-tag{background:rgba(249,115,22,.09);border-color:rgba(249,115,22,.28);color:#EA580C}
.alarm-opt{color:var(--ink-2)}
.alarm-opt ion-icon{color:#F97316}
.alarm-swatch{border-color:rgba(30,20,40,.14);box-shadow:0 5px 14px rgba(30,20,40,.1)}
.alarm-swatch.active{border-color:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,.14),0 8px 20px rgba(30,20,40,.12)}

/* One consistent dock rail: identical item boxes and icon alignment. */
.side-dock{align-items:stretch}
.side-dock-item{box-sizing:border-box;width:42px;height:42px;padding:0;gap:8px;flex:none}
.side-dock-item>ion-icon{box-sizing:border-box;width:42px;min-width:42px;text-align:center;padding:0 10px}
.side-dock-item:hover{padding-right:14px}
.side-dock.dock-collapsed .side-dock-item,
.side-dock.dock-collapsed .side-dock-item:hover{width:42px;padding-right:0}

/* Tablet and mobile: convert the side dock into a reachable bottom rail. */
@media(max-width:980px){
  body{padding-bottom:76px}
  .side-dock{display:flex;top:auto;right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px;transform:none;
    width:auto;max-width:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:5px;padding:7px;
    border-radius:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;
    background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 14px 36px rgba(20,16,40,.2)}
  .side-dock::-webkit-scrollbar{display:none}
  .side-dock-item,.side-dock-item:hover,.side-dock-item.active{width:42px;min-width:42px;height:42px;padding:0;background:transparent}
  .side-dock-item .sd-label,.side-dock-item:hover .sd-label{display:none;opacity:0;pointer-events:none}
  .side-dock-pair,.side-dock-pair:hover{width:118px;min-width:118px;padding-right:8px;background:color-mix(in srgb,#7C3AED 7%,transparent)}
  .side-dock-pair .sd-label,.side-dock-pair:hover .sd-label{display:flex;opacity:1;transform:none;pointer-events:auto;font-size:10.5px;gap:4px}
  .side-dock-pair>ion-icon{width:34px;min-width:34px;padding:0 7px}
  .side-dock.dock-collapsed .side-dock-pair,.side-dock.dock-collapsed .side-dock-pair:hover{width:118px;min-width:118px;padding-right:8px}
  .side-dock.dock-collapsed .side-dock-pair .sd-label{display:flex;opacity:1;transform:none;pointer-events:auto}
}
@media(max-width:480px){
  .side-dock{right:6px;left:6px;bottom:max(6px,env(safe-area-inset-bottom));border-radius:16px}
}
/* Mobile-only draggable quick ball. Desktop keeps the vertical section dock. */
.mobile-dock-toggle{display:none}
@media(max-width:980px){
  body{padding-bottom:0}
  .side-dock{display:flex;top:auto;right:14px;bottom:max(14px,env(safe-area-inset-bottom));left:auto;transform:none;
    width:56px;height:56px;min-width:56px;padding:0;border:0;border-radius:50%;overflow:hidden;
    flex-flow:row wrap;align-items:center;justify-content:center;gap:6px;touch-action:none;
    background:linear-gradient(145deg,#8B5CF6,#6D28D9);box-shadow:0 14px 34px rgba(91,33,182,.34);
    transition:width .24s var(--ease),height .24s var(--ease),border-radius .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease)}
  .mobile-dock-toggle{display:flex;width:56px;height:56px;min-width:56px;align-items:center;justify-content:center;padding:0;border:0;
    border-radius:50%;background:transparent;color:#fff;cursor:grab;touch-action:none}
  .mobile-dock-toggle ion-icon{font-size:25px;transition:transform .24s var(--ease)}
  .side-dock.mobile-dragging{transition:none;user-select:none}
  .side-dock.mobile-dragging .mobile-dock-toggle{cursor:grabbing}
  .side-dock>.side-dock-item{display:none}
  .side-dock.mobile-open{width:min(326px,calc(100vw - 20px));height:auto;min-height:72px;padding:8px;border-radius:22px;overflow:visible;
    justify-content:flex-start;touch-action:auto;background:color-mix(in srgb,var(--surface) 96%,transparent);
    border:1px solid var(--line);box-shadow:0 20px 48px rgba(20,16,40,.25)}
  .side-dock.mobile-open .mobile-dock-toggle{width:44px;height:44px;min-width:44px;background:linear-gradient(145deg,#8B5CF6,#6D28D9)}
  .side-dock.mobile-open .mobile-dock-toggle ion-icon{transform:rotate(45deg)}
  .side-dock.mobile-open>.side-dock-item{display:flex;width:42px;min-width:42px;height:44px;padding:0;background:transparent}
  .side-dock.mobile-open>.side-dock-item:hover{width:42px;padding:0;background:color-mix(in srgb,var(--ink) 5%,transparent)}
  .side-dock.mobile-open>.side-dock-item .sd-label{display:none;opacity:0;pointer-events:none}
  .side-dock.mobile-open>.side-dock-pair{width:108px;min-width:108px;padding-right:6px;background:color-mix(in srgb,#7C3AED 7%,transparent)}
  .side-dock.mobile-open>.side-dock-pair .sd-label{display:flex;opacity:1;transform:none;pointer-events:auto;font-size:10px;gap:3px}
  .side-dock.mobile-open>.side-dock-pair>ion-icon{width:30px;min-width:30px;padding:0 6px}
  .side-dock.dock-collapsed:not(.mobile-open){width:56px;height:56px;padding:0;background:linear-gradient(145deg,#8B5CF6,#6D28D9)}
}
/* Real app AI mark wherever AI appears. */
.wdg-ai-icon{width:22px;height:22px}
.side-ai-icon{box-sizing:border-box;width:42px;height:22px;padding:0 10px}
.side-ai-icon::before{inset:auto;width:13px;height:12px;left:14.5px;top:5px}
.side-ai-icon img{width:22px;height:22px;margin:auto}
@media(max-width:980px){
  .side-dock{z-index:9999!important}
  .mobile-dock-toggle{visibility:visible!important;opacity:1!important}
}
/* Balanced two-row layout for the opened mobile quick menu. */
@media(max-width:980px){
  .side-dock.mobile-open{display:grid;width:min(360px,calc(100vw - 20px));grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-rows:48px;align-items:center;justify-items:stretch;gap:7px;padding:10px}
  .side-dock.mobile-open .mobile-dock-toggle,
  .side-dock.mobile-open>.side-dock-item,
  .side-dock.mobile-open>.side-dock-item:hover{box-sizing:border-box;width:100%;min-width:0;height:48px;padding:0;justify-content:center;border-radius:14px}
  .side-dock.mobile-open>.side-dock-item>ion-icon{box-sizing:border-box;width:100%;min-width:0;padding:0;text-align:center}
  .side-dock.mobile-open>.side-dock-pair,
  .side-dock.mobile-open>.side-dock-pair:hover{grid-column:span 2;width:100%;min-width:0;padding:0 10px;justify-content:flex-start;gap:5px}
  .side-dock.mobile-open>.side-dock-pair>ion-icon{width:28px;min-width:28px;padding:0}
  .side-dock.mobile-open>.side-dock-pair .sd-label{flex:1;justify-content:center;font-size:10.5px;gap:4px}
  .side-dock.mobile-open .side-ai-icon{width:100%;height:22px;padding:0}
  .side-dock.mobile-open .side-ai-icon::before{left:50%;top:5px;transform:translateX(-50%)}
}
/* Native adaptation of the supplied staggered circle-menu motion. */
@media(max-width:980px){
  .side-dock.mobile-open{display:block;width:min(300px,calc(100vw - 16px));height:min(300px,calc(100vw - 16px));min-height:0;
    padding:0;border:0;border-radius:50%;overflow:visible;background:transparent;box-shadow:none;touch-action:none}
  .side-dock.mobile-open .mobile-dock-toggle{position:absolute;z-index:20;left:50%;top:50%;width:56px;height:56px;min-width:56px;
    transform:translate(-50%,-50%);box-shadow:0 12px 28px rgba(91,33,182,.38)}
  .side-dock>.side-dock-item{position:absolute;z-index:10;left:50%;top:50%;display:flex;width:46px;min-width:46px;height:46px;
    margin:-23px 0 0 -23px;padding:0;justify-content:center;border-radius:50%;opacity:0;pointer-events:none;
    background:var(--surface);box-shadow:0 8px 22px rgba(20,16,40,.16)!important;
    transform:translate(0,0) scale(.45) rotate(-40deg);filter:blur(5px);
    transition:transform .48s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,filter .25s ease,background .2s,box-shadow .2s!important;
    transition-delay:calc(var(--menu-i) * 28ms)!important}
  .side-dock.mobile-open>.side-dock-item,
  .side-dock.mobile-open>.side-dock-item:hover{display:flex;width:46px;min-width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;opacity:1;pointer-events:auto;
    transform:translate(var(--menu-x),var(--menu-y)) scale(1) rotate(0);filter:blur(0);background:var(--surface)}
  .side-dock.mobile-open>.side-dock-item>ion-icon{width:46px;min-width:46px;padding:0;text-align:center}
  .side-dock.mobile-open>.side-dock-item.active{background:color-mix(in srgb,var(--sd-c) 15%,#fff);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--sd-c) 30%,transparent),0 10px 25px rgba(20,16,40,.18)!important}
  .side-dock.mobile-open>.side-dock-item.active ion-icon{transform:scale(1.12)}
  .side-dock.mobile-open>.side-dock-pair,
  .side-dock.mobile-open>.side-dock-pair:hover{width:104px;min-width:104px;margin-left:-52px;padding:0 9px;border-radius:16px;gap:4px;
    justify-content:flex-start;background:var(--surface)}
  .side-dock.mobile-open>.side-dock-pair>ion-icon{width:25px;min-width:25px;padding:0}
  .side-dock.mobile-open>.side-dock-pair .sd-label{display:flex;opacity:1;transform:none;pointer-events:auto;justify-content:center;font-size:10px;gap:3px}
  .side-dock.mobile-open .side-ai-icon{width:46px;height:22px;padding:0}
  .side-dock.mobile-open .side-ai-icon::before{left:50%;top:5px;transform:translateX(-50%)}
  .side-dock.mobile-open .side-ai-icon img{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){
  .side-dock>.side-dock-item{transition:none!important;filter:none}
}
/* Immediate, borderless selected state for the desktop dock. */
@media(min-width:981px){
  .side-dock-item.active{background:color-mix(in srgb,var(--sd-c) 11%,var(--surface));box-shadow:inset 3px 0 0 var(--sd-c)!important}
  .side-dock-item.active>ion-icon,.side-dock-item.active>.side-ai-icon{transform:scale(1.08)}
}
/* Refined radial alignment and always-readable shortcut labels. */
@media(max-width:980px){
  .side-dock.mobile-open{width:min(330px,calc(100vw - 12px));height:min(330px,calc(100vw - 12px))}
  .side-dock.mobile-open>.side-dock-item:not(.side-dock-pair) .sd-label{
    position:absolute;display:flex;top:52px;left:50%;width:max-content;max-width:82px;min-height:19px;padding:3px 7px;
    align-items:center;justify-content:center;gap:3px;border-radius:999px;opacity:1;pointer-events:none;
    transform:translateX(-50%);font-size:9px;font-weight:800;line-height:1.1;text-align:center;color:var(--ink);
    background:rgba(255,255,255,.94);box-shadow:0 4px 12px rgba(20,16,40,.13);backdrop-filter:blur(5px)}
  .side-dock.mobile-open>.side-dock-item:not(.side-dock-pair) .sd-beta{display:none}
  .side-dock.mobile-open>.side-dock-pair,
  .side-dock.mobile-open>.side-dock-pair:hover{width:132px;min-width:132px;margin-left:-66px;padding:0 11px;justify-content:center}
  .side-dock.mobile-open>.side-dock-pair .sd-label{flex:1;width:auto;white-space:nowrap;overflow:visible;font-size:10.5px}
  .side-dock.mobile-open>.side-dock-pair>ion-icon{flex:none;width:24px;min-width:24px}
}
@media(max-width:350px){
  .side-dock.mobile-open{width:306px;height:306px}
  .side-dock.mobile-open>.side-dock-item:not(.side-dock-pair) .sd-label{font-size:8.5px;max-width:72px;padding-inline:5px}
}
/* Compact icon-only radial menu, fully contained within the viewport. */
@media(max-width:980px){
  .side-dock:not(.mobile-open){width:48px!important;height:48px!important;min-width:48px!important}
  .side-dock{transition:none}
  .mobile-dock-toggle{width:48px;height:48px;min-width:48px}
  .mobile-dock-toggle ion-icon{font-size:22px}
  .side-dock.mobile-open{width:min(270px,calc(100vw - 16px));height:min(270px,calc(100vw - 16px))}
  .side-dock.mobile-open .mobile-dock-toggle{width:48px;height:48px;min-width:48px}
  .side-dock.mobile-open>.side-dock-item,
  .side-dock.mobile-open>.side-dock-item:hover{width:40px;min-width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:13px}
  .side-dock.mobile-open>.side-dock-item>ion-icon{width:40px;min-width:40px;font-size:18px}
  .side-dock.mobile-open>.side-dock-item:not(.side-dock-pair) .sd-label{display:none!important;opacity:0!important;pointer-events:none!important}
  .side-dock.mobile-open>.side-dock-pair,
  .side-dock.mobile-open>.side-dock-pair:hover{width:84px;min-width:84px;margin-left:-42px;padding:0 7px;justify-content:center;border-radius:14px}
  .side-dock.mobile-open>.side-dock-pair>ion-icon{display:none}
  .side-dock.mobile-open>.side-dock-pair .sd-label{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;opacity:1;pointer-events:auto}
  .side-dock.mobile-open>.side-dock-pair .sd-label a{display:flex;width:25px;height:25px;align-items:center;justify-content:center;color:#7C3AED}
  .side-dock.mobile-open>.side-dock-pair .sd-label a ion-icon{font-size:18px}
  .side-dock.mobile-open>.side-dock-pair .sd-link-text,.side-dock.mobile-open>.side-dock-pair .sd-sep{display:none}
  .side-dock.mobile-open .side-ai-icon{width:40px;height:20px}
  .side-dock.mobile-open .side-ai-icon img{width:20px;height:20px}
  .side-dock.mobile-open .side-ai-icon::before{top:4px}
}
@media(max-width:300px){
  .side-dock.mobile-open{width:250px;height:250px}
}
/* Precisely centered radial cards and dynamic Themes/Alarm shortcut. */
@media(max-width:980px){
  .side-dock.mobile-open>.side-dock-item{align-items:center;justify-content:center;gap:0;line-height:0}
  .side-dock.mobile-open>.side-dock-item .sd-rail{display:none!important}
  .side-dock.mobile-open>.side-dock-pair,
  .side-dock.mobile-open>.side-dock-pair:hover{width:40px;min-width:40px;margin-left:-20px;padding:0;border-radius:13px;gap:0}
  .side-dock.mobile-open>.side-dock-pair>.sd-dynamic-icon{display:block!important;width:40px;min-width:40px;padding:0;font-size:18px;text-align:center}
  .side-dock.mobile-open>.side-dock-pair .sd-label{display:none!important;opacity:0!important;pointer-events:none!important}
}
/* Independent back-to-top control. */
.back-to-top{position:fixed;z-index:8500;right:20px;bottom:20px;display:flex;width:46px;height:46px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--surface) 94%,transparent);color:#7C3AED;
  box-shadow:0 12px 30px rgba(20,16,40,.18);backdrop-filter:blur(10px);cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(14px) scale(.9);transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1),background .2s}
.back-to-top.show{opacity:1;pointer-events:auto;transform:none}
.back-to-top:hover{background:#7C3AED;color:#fff;transform:translateY(-3px)}
.back-to-top ion-icon{font-size:21px}
@media(max-width:980px){
  .back-to-top{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:opacity .15s}.back-to-top:hover{transform:none}}
/* Header CTA placement and exact desktop dock alignment. */
.nav .nav-cta{margin-left:auto}
.side-dock-item .sd-rail{display:none!important}
@media(min-width:981px){
  .side-dock{align-items:center}
  .side-dock-item{gap:0;justify-content:flex-start}
  .side-dock-item>ion-icon,.side-dock-item>.side-ai-icon{flex:0 0 42px;width:42px;min-width:42px;margin:0;padding:0;text-align:center}
  .side-dock-item>ion-icon{font-size:19px}
  .side-dock-item>.side-ai-icon{display:flex;align-items:center;justify-content:center}
  .side-dock-item>.side-ai-icon::before{left:50%;transform:translateX(-50%)}
  .side-dock-item .sd-label{margin-left:8px}
  .side-dock-item:hover{padding-right:14px}
}
/* Motion parity with the supplied Framer Motion circle menu. */
@media(max-width:980px){
  .side-dock.mobile-open>.side-dock-item{transition-delay:calc(var(--menu-i) * 20ms)!important}
  .side-dock.menu-opening>.side-dock-item{animation:circleItemSpring .5s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(var(--menu-i) * 20ms)}
  .side-dock.menu-opening .mobile-dock-toggle ion-icon{animation:circleIconMorph .2s ease both}
  .side-dock.mobile-open.menu-closing>.side-dock-item,
  .side-dock.mobile-open.menu-closing>.side-dock-item:hover{opacity:0;filter:blur(1px);
    transform:translate(0,0) scale(.45) rotate(-360deg)!important;
    transition:transform .28s cubic-bezier(.4,0,1,1),opacity .2s ease,filter .2s ease!important;
    transition-delay:calc(var(--menu-i) * 70ms)!important}
  .side-dock.menu-closing .mobile-dock-toggle{animation:circleTriggerClose .56s linear both}
  .side-dock.menu-closing .mobile-dock-toggle ion-icon{animation:circleIconMorph .2s ease both}
}
@keyframes circleItemSpring{
  0%{opacity:0;filter:blur(5px);transform:translate(0,0) scale(.45)}
  62%{opacity:1;filter:blur(0);transform:translate(calc(var(--menu-x) * 1.06),calc(var(--menu-y) * 1.06)) scale(1.06)}
  82%{transform:translate(calc(var(--menu-x) * .98),calc(var(--menu-y) * .98)) scale(.99)}
  100%{opacity:1;filter:blur(0);transform:translate(var(--menu-x),var(--menu-y)) scale(1)}
}
@keyframes circleTriggerClose{
  0%,100%{transform:translate(-50%,-50%) translateX(0) scale(1);filter:brightness(1)}
  12%{transform:translate(-50%,-50%) translateX(2px) scale(1.12)}
  24%{transform:translate(-50%,-50%) translateX(-2px) scale(1.24)}
  38%{transform:translate(-50%,-50%) translateX(2px) scale(1.36)}
  52%{transform:translate(-50%,-50%) translateX(-2px) scale(1.5);filter:brightness(1.2)}
  68%{transform:translate(-50%,-50%) translateX(2px) scale(1.36)}
  82%{transform:translate(-50%,-50%) translateX(-2px) scale(1.16)}
}
@keyframes circleIconMorph{
  0%{opacity:0;filter:blur(10px);transform:scale(.75)}
  100%{opacity:1;filter:blur(0);transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .side-dock.menu-opening>.side-dock-item,.side-dock.menu-closing .mobile-dock-toggle{animation:none!important}
}
/* App-native habit icon across pillars, widgets, and navigation. */
.habit-app-icon{display:block;width:28px;height:28px;object-fit:contain}
.pillar-ic .habit-app-icon{width:34px;height:34px}
.wdg-tile .habit-app-icon{width:22px;height:22px}
.side-habit-icon{display:block;width:22px;height:22px;object-fit:contain;flex:none}

/* Reveal the complete desktop menu on rail hover; selected item gets a full outline. */
@media(min-width:981px){
  .side-dock:hover{align-items:stretch}
  .side-dock:hover .side-dock-item{width:152px;padding-right:12px}
  .side-dock:hover .side-dock-item .sd-label{opacity:1;transform:none;pointer-events:auto}
  .side-dock-item>.side-habit-icon{box-sizing:content-box;width:22px;height:22px;flex:0 0 22px;margin:0 10px}
  .side-dock-item.active{border:2px solid var(--sd-c)!important;background:color-mix(in srgb,var(--sd-c) 10%,var(--surface));box-shadow:none!important}
}
@media(max-width:980px){
  .side-dock.mobile-open>.side-dock-item>.side-habit-icon{width:22px;height:22px;margin:0;flex:0 0 22px}
}
/* Keep the mobile radial surface soft without obscuring page content. */
@media(max-width:980px){
  .side-dock.mobile-open{backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
}
/* Stable desktop selection: full highlight without changing the content box. */
@media(min-width:981px){
  .side-dock-item,.side-dock:hover .side-dock-item{box-sizing:border-box;border:0!important;outline:2px solid transparent;outline-offset:-2px}
  .side-dock-item.active{border:0!important;outline-color:var(--sd-c);background:color-mix(in srgb,var(--sd-c) 10%,var(--surface));box-shadow:none!important}
  .side-dock-item.active>ion-icon,
  .side-dock-item.active>.side-ai-icon,
  .side-dock-item.active>.side-habit-icon{transform:none!important}
  .side-dock:hover .side-dock-item,.side-dock:hover .side-dock-item:hover{width:152px;min-width:152px;height:42px;padding:0 12px 0 0}
}
/* Neutral footer palette; reserve brand color for interaction only. */
.footer .nav-logo-text{color:var(--ink)}
.footer a{color:var(--ink-3)}
.footer .nav-logo{color:var(--ink)}
.footer a:hover{color:var(--orange-d)}
.footer .nav-logo:hover .nav-logo-text{color:var(--ink)}
/* Keep the selected row fully highlighted while the desktop dock is expanded. */
@media(min-width:981px){
  .side-dock:hover .side-dock-item.active,
  .side-dock .side-dock-item.active:hover{outline:2px solid var(--sd-c)!important;outline-offset:-2px;
    background:color-mix(in srgb,var(--sd-c) 12%,var(--surface))!important;box-shadow:none!important}
}
/* Keep the opened trigger as a recognizable close icon, not a rotated plus. */
@media(max-width:980px){
  .side-dock.mobile-open .mobile-dock-toggle ion-icon{transform:rotate(0)!important}
}
/* Separate mobile floating controls: back-to-top sits above the FAB zone on the left. */
@media(max-width:980px){
  .back-to-top{left:12px;right:auto;bottom:max(76px,calc(env(safe-area-inset-bottom) + 76px))}
}
/* Mobile floating controls: shared raised baseline and lightweight radial motion. */
@media(max-width:980px){
  .side-dock:not(.mobile-open){right:12px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 24px))}
  .back-to-top{left:12px;right:auto;bottom:max(27px,calc(env(safe-area-inset-bottom) + 27px))}
  .side-dock.mobile-open{backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
  .side-dock>.side-dock-item{filter:none!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .16s ease!important;transition-delay:calc(var(--menu-i) * 12ms)!important}
  .side-dock.menu-opening>.side-dock-item{animation:mobileRadialOpen .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--menu-i) * 12ms)}
  .side-dock.mobile-open.menu-closing>.side-dock-item,
  .side-dock.mobile-open.menu-closing>.side-dock-item:hover{filter:none!important;transition:transform .2s ease-in,opacity .14s ease!important;transition-delay:0ms!important}
  .side-dock.menu-closing .mobile-dock-toggle{animation:none!important}
}
@keyframes mobileRadialOpen{
  from{opacity:0;transform:translate(0,0) scale(.72)}
  to{opacity:1;transform:translate(var(--menu-x),var(--menu-y)) scale(1)}
}
/* Touch devices must not retain the desktop purple hover fill after tapping. */
@media(max-width:980px) and (hover:none){
  .back-to-top:hover,
  .back-to-top:focus,
  .back-to-top:focus-visible{background:color-mix(in srgb,var(--surface) 94%,transparent);color:#7C3AED;transform:none;outline:none}
}