/* psychoSocial - Desktop Enhancements (v1.12.0)
   Scope: desktop-only refinements (>= BREAKPOINT_WIDE).
   Mobile/tablet behavior remains unchanged.
*/

@media (min-width: 900px){
  :root{
    --pageW: min(var(--ps-desktop-content-max-w, 1240px), 96vw);
  }

  .wrap{
    max-width: var(--pageW);
  }

  /* Primary desktop navigation: persistent compact topbar. */
  #psMenuMount{
    margin-bottom: 10px;
  }
  .psTopbarRow{
    width: 100%;
  }
  .psDesktopTopbar{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
  }
  html[data-theme="light"] .psDesktopTopbar{
    border-color: rgba(0,0,0,.14);
    background: rgba(0,0,0,.02);
  }
  .psDesktopTopbar .psTopbarLink{
    width: auto;
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 12px;
    letter-spacing: .08em;
    font-size: 12px;
    text-transform: uppercase;
  }
  .psDesktopTopbar .psTopbarLink .drawerMark{
    opacity: .72;
  }
  .psDesktopTopbar .psTopbarLink.isCurrent{
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .psDesktopTopbar .psTopbarLink.active:not(.isCurrent){
    border-color: rgba(255,255,255,.14);
    background: transparent;
    box-shadow: none;
  }
  html[data-theme="light"] .psDesktopTopbar .psTopbarLink.isCurrent{
    border-color: rgba(0,0,0,.28);
    background: rgba(0,0,0,.09);
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
  }
  html[data-theme="light"] .psDesktopTopbar .psTopbarLink.active:not(.isCurrent){
    border-color: rgba(0,0,0,.14);
    background: transparent;
    box-shadow: none;
  }
  /* Home safety net: neutralize any stale non-home active state in desktop topbar. */
  body[data-page="home"] .psDesktopTopbar .psTopbarLink.active:not([data-page="home"]){
    border-color: rgba(255,255,255,.14);
    background: transparent;
    box-shadow: none;
  }
  body[data-page="home"] .psDesktopTopbar .psTopbarLink.isCurrent:not([data-page="home"]),
  body[data-page="home"] .psDesktopTopbar .psTopbarLink[aria-current="page"]:not([data-page="home"]){
    border-color: rgba(255,255,255,.14);
    background: transparent;
    box-shadow: none;
    font-weight: inherit;
  }
  body[data-page="home"] .psDesktopTopbar .psTopbarLink.isCurrent:not([data-page="home"]) .drawerMark,
  body[data-page="home"] .psDesktopTopbar .psTopbarLink[aria-current="page"]:not([data-page="home"]) .drawerMark{
    color: inherit;
    opacity: .52;
  }
  html[data-theme="light"] body[data-page="home"] .psDesktopTopbar .psTopbarLink.active:not([data-page="home"]){
    border-color: rgba(0,0,0,.14);
    background: transparent;
    box-shadow: none;
  }
  html[data-theme="light"] body[data-page="home"] .psDesktopTopbar .psTopbarLink.isCurrent:not([data-page="home"]),
  html[data-theme="light"] body[data-page="home"] .psDesktopTopbar .psTopbarLink[aria-current="page"]:not([data-page="home"]){
    border-color: rgba(0,0,0,.14);
    background: transparent;
    box-shadow: none;
  }

  .psDesktopTopbar .psTopbarLink .drawerMark{
    opacity: .9;
  }
  .psDesktopTopbar .psTopbarLink:not(.isCurrent) .drawerMark{
    opacity: .52;
  }
  .psDesktopTopbar .menu-item::before,
  .psDesktopTopbar .menu-item::after{
    content: none !important;
  }

  /* Home desktop: single updates discovery block. */
  body[data-page="home"] .homeStack{
    display: block;
  }
  body[data-page="home"] .bannerRow{
    margin-bottom: 12px;
  }
  body[data-page="home"] #homeLastUpdateSection{
    margin-top: 0;
  }
  body[data-page="home"] #homeLastUpdateSection .lastUpdateTitle,
  body[data-page="home"] #homeLastUpdateSection #homeLastUpdateFeed{
    display: none;
  }
  body[data-page="home"] #homeLastUpdateSection .homeDashCardHead,
  body[data-page="home"] #homeLastUpdateSection .homeDashShutterPanel,
  body[data-page="home"] #homeLastUpdateSection #homeDashDropToggle{
    display:none !important;
  }
  body[data-page="home"] #homeLastUpdateSection .homeDashDropBody{
    display:block !important;
    border-top:0;
    padding-top:0;
  }

  /* Home simplified updates mode: re-enable feed on desktop (legacy hub rules above hide it). */
  body[data-page="home"][data-home-mode="updates"] #homeLastUpdateSection .lastUpdateTitle{
    display: block !important;
  }
  body[data-page="home"][data-home-mode="updates"] #homeLastUpdateSection #homeLastUpdateFeed{
    display: grid !important;
  }
  body[data-page="home"][data-home-mode="updates"] #homeLastUpdateSection .homeDashCardHead{
    display: flex !important;
  }
  body[data-page="home"][data-home-mode="updates"] #homeLastUpdateSection .homeDashShutterPanel{
    display: block !important;
  }
  body[data-page="home"][data-home-mode="updates"] #homeLastUpdateSection[data-collapsed="1"] #homeDashDropToggle{
    display: flex !important;
  }
  body[data-page="home"][data-home-mode="updates"] #homeLastUpdateSection[data-collapsed="0"] #homeDashDropToggle{
    display: flex !important;
  }

  /* Home battery: desktop-only dock capsule trigger (mobile remains standard image). */
  body[data-page="home"] .batteryRow{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    justify-content:center;
    padding:12px 10px;
    width: 100%;
  }
  body[data-page="home"] .batteryShell{
    display:block;
    position:relative;
    width:100%;
    height:38px;
    border-radius:999px;
    border:1.5px solid rgba(80,255,170,.55);
    background: rgba(10,14,18,.88);
    box-shadow:
      0 0 12px rgba(80,255,170,.18),
      0 0 28px rgba(80,255,170,.08),
      0 0 0 1px rgba(80,255,170,.06) inset;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  body[data-page="home"] .batteryShell:hover{
    border-color: rgba(80,255,170,.80);
    box-shadow:
      0 0 18px rgba(80,255,170,.32),
      0 0 40px rgba(80,255,170,.14),
      0 0 60px rgba(80,255,170,.06),
      0 0 0 1px rgba(80,255,170,.10) inset;
  }
  body[data-page="home"] .batteryShell::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:2px;
    width:100%;
    border-radius:0 0 999px 999px;
    background:var(--batteryTickerFg, rgba(80,255,170,.60));
    transform-origin:left center;
    transform:scaleX(0);
    animation: psBatteryProgress var(--ps-ticker-rotate-ms, 4000ms) linear infinite;
    z-index:5;
    opacity:.6;
  }
  body[data-page="home"] .batteryShell::after{
    content:"";
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    width:7px;
    height:18px;
    border-radius:6px;
    border:1.5px solid rgba(80,255,170,.40);
    background:rgba(10,14,18,.80);
    box-shadow: 0 0 6px rgba(80,255,170,.12);
  }
  body[data-page="home"] .batteryPulse{
    position:absolute;
    inset:4px 6px;
    border-radius:999px;
    border:1px solid rgba(80,255,170,.12);
    opacity:.4;
    z-index:1;
    animation: psBatteryPulse 2.6s ease-in-out infinite;
  }
  body[data-page="home"] .batteryPulse--b{
    inset:8px 12px;
    border-color:rgba(80,255,170,.08);
    animation-duration: 3.3s;
    animation-delay: .45s;
  }
  body[data-page="home"] .batteryCore{
    position:absolute;
    left:14px;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    height:1px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(80,255,170,.18), transparent);
    box-shadow:0 0 8px rgba(80,255,170,.10);
    z-index:2;
    animation: psBatteryScan 3.4s linear infinite;
  }
  body[data-page="home"] .batteryTicker{
    position:absolute;
    left:18px;
    right:20px;
    top:7px;
    bottom:7px;
    z-index:3;
    overflow:hidden;
    border-radius:999px;
    pointer-events:none;
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  body[data-page="home"] .batteryTickerTrack{
    --ps-battery-ticker-gap: 56px;
    --ps-battery-ticker-distance: 300px;
    --ps-battery-ticker-duration: 8s;
    display:inline-flex;
    align-items:center;
    gap:var(--ps-battery-ticker-gap);
    width:max-content;
    min-width:100%;
    height:100%;
    white-space:nowrap;
    transform:translate3d(0,0,0);
  }
  body[data-page="home"] .batteryTickerText{
    display:inline-block;
    font-size:clamp(11px, .84vw, 13px);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:none;
    color:var(--batteryTickerFg);
    text-shadow:
      0 0 6px var(--batteryTickerGlow),
      0 0 14px var(--batteryTickerGlow),
      0 0 28px rgba(80,255,170,.06),
      0 1px 0 rgba(0,0,0,.28);
    line-height:1;
    transition: color .2s ease, text-shadow .2s ease;
  }
  body[data-page="home"] .batteryShell[data-ticker-level="warn"] .batteryTickerText{
    color:var(--batteryTickerWarn);
    text-shadow:
      0 0 6px var(--batteryTickerWarn),
      0 0 14px rgba(255,236,166,.16),
      0 1px 0 rgba(0,0,0,.28);
  }
  body[data-page="home"] .batteryShell[data-ticker-level="alert"] .batteryTickerText{
    color:var(--batteryTickerAlert);
    text-shadow:
      0 0 6px var(--batteryTickerAlert),
      0 0 14px rgba(255,120,160,.16),
      0 1px 0 rgba(0,0,0,.28);
  }
  body[data-page="home"] .batteryShell.isTickerAnimated .batteryTickerTrack{
    animation: psBatteryTickerScroll var(--ps-battery-ticker-duration) linear infinite;
  }
  body[data-page="home"] .batteryShell.isTickerRotate.isTickerAnimated .batteryTickerTrack{
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  body[data-page="home"] .batteryShell.isTickerExit .batteryTickerText{
    animation: psBatteryTickerExit .2s ease-in forwards;
  }
  body[data-page="home"] .batteryShell.isTickerEnter .batteryTickerText{
    animation: psBatteryTickerEnter .2s ease-out forwards;
  }
  body[data-page="home"] .batteryShell.isTickerStatic .batteryTickerTrack,
  body[data-page="home"] .batteryShell.isTickerReduceMotion .batteryTickerTrack{
    animation:none;
    justify-content:center;
  }
  body[data-page="home"] .batteryShell.isTickerPauseHover:hover .batteryTickerTrack{
    animation-play-state:paused;
  }
  body[data-page="home"] .batteryShell.isTickerPauseFocus:focus-visible .batteryTickerTrack,
  body[data-page="home"] .batteryShell.isTickerPauseFocus:focus-within .batteryTickerTrack{
    animation-play-state:paused;
  }
  @keyframes psBatteryTickerScroll{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(calc(-1 * var(--ps-battery-ticker-distance)),0,0); }
  }
  @keyframes psBatteryTickerExit{
    from{ transform:translateY(0); opacity:1; }
    to{ transform:translateY(-100%); opacity:0; }
  }
  @keyframes psBatteryTickerEnter{
    from{ transform:translateY(100%); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  @keyframes psBatteryProgress{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
  }
  body[data-page="home"] .batteryShell:active{ transform:translateY(1px); }
  body[data-page="home"] .batteryShell:focus-visible{
    outline:2px solid var(--accentGreenReadable);
    outline-offset:2px;
  }
  body[data-page="home"] .batteryRow .batteryImg{
    max-height:min(68vh, 560px);
  }
  body[data-page="home"] .batteryRow:not(.isOpen) .batteryFull{
    display:none;
  }
  body[data-page="home"] .batteryRow.isOpen .batteryShell{
    width:100%;
    height:32px;
    opacity:.9;
  }
  html[data-theme="light"] body[data-page="home"] .batteryShell{
    border-color: rgba(40,120,80,.35);
    background: rgba(248,252,250,.92);
    box-shadow:
      0 0 10px rgba(40,120,80,.10),
      0 0 24px rgba(40,120,80,.05),
      0 0 0 1px rgba(40,120,80,.04) inset;
  }
  html[data-theme="light"] body[data-page="home"] .batteryShell:hover{
    border-color: rgba(40,120,80,.55);
    box-shadow:
      0 0 14px rgba(40,120,80,.18),
      0 0 32px rgba(40,120,80,.08);
  }
  html[data-theme="light"] body[data-page="home"] .batteryShell::after{
    border-color: rgba(40,120,80,.30);
    background: rgba(248,252,250,.88);
  }
  html[data-theme="light"] body[data-page="home"] .batteryShell::before{
    opacity:.35;
  }
  html[data-theme="light"] body[data-page="home"] .batteryCore{
    background:linear-gradient(90deg, transparent, rgba(40,120,80,.12), transparent);
    box-shadow:0 0 6px rgba(40,120,80,.06);
  }
  html[data-theme="light"] body[data-page="home"] .batteryTickerText{
    text-shadow:0 0 6px var(--batteryTickerGlow), 0 1px 0 rgba(255,255,255,.26);
  }
  @media (prefers-reduced-motion: reduce){
    body[data-page="home"] .batteryTickerTrack{
      animation:none !important;
      transform:none !important;
    }
    body[data-page="home"] .batteryShell{
      animation:none !important;
    }
    body[data-page="home"] .batteryShell::before{
      animation:none !important;
      display:none;
    }
    body[data-page="home"] .batteryShell.isTickerExit .batteryTickerText,
    body[data-page="home"] .batteryShell.isTickerEnter .batteryTickerText{
      animation:none !important;
    }
    body[data-page="home"] .batteryPulse{
      animation:none !important;
    }
  }
  @keyframes psBatteryPulse{
    0%,100%{ opacity:.28; transform:scale(1); }
    50%{ opacity:.58; transform:scale(1.01); }
  }
  @keyframes psBatteryScan{
    0%{ filter:hue-rotate(0deg); }
    100%{ filter:hue-rotate(28deg); }
  }

  /* Search first fold: avoid oversized empty panel pre-query. */
  body[data-page="search"] .searchCard{
    min-height: clamp(220px, 38vh, 380px);
  }

  /* Desktop comfort tweak. */
  .card{
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (min-width: 1100px){
  :root{ --pageW: min(var(--ps-desktop-content-max-w, 1240px), 96vw); }
}

@media (min-width: 1400px){
  :root{ --pageW: min(var(--ps-desktop-content-max-w, 1240px), 96vw); }
}
