/* Yangle unified visual language — desktop/mobile parity.
   Based on the original Figma Home palette and wordmark.
   Deliberately leaves authentication, chat, post and Glow behavior untouched. */

/* Same neutral foundation on every viewport. Accent palette overrides remain opt-in. */
html[data-theme="light"]{
  --bg:#EEF2E4;
  --surface:#FBFCF6;
  --surface-2:#E7EEDC;
  --line:#D3DCC4;
  --line-strong:#BACDB5;
  --text:#0D2418;
  --muted:#5C7064;
  color-scheme:light;
}
html[data-theme="light"][data-palette="mint"]{
  --g1:#CBF55C;
  --g2:#12A150;
  --g3:#0B5A33;
  --grad:linear-gradient(110deg,#CBF55C,#12A150);
}
html[data-theme="dark"]{
  --bg:#101E16;
  --surface:#192D21;
  --surface-2:#243B2B;
  --line:#3D5848;
  --line-strong:#4C6C58;
  --text:#F2F7EC;
  --muted:#B7C7B9;
  color-scheme:dark;
}
html[data-theme="dark"][data-palette="mint"]{
  --g1:#CBF55C;
  --g2:#12A150;
  --g3:#0B5A33;
  --grad:linear-gradient(110deg,#CBF55C,#12A150);
}

/* One true brand asset across PC and mobile. Never append an old text label. */
.topbar .brand img.yangle-figma-brand{
  display:block;width:113px;height:38px;max-width:113px;
  margin:0!important;object-fit:contain;
  mix-blend-mode:normal!important;filter:none!important;
}
@media(min-width:900px){
  /* The nav is part of the page canvas, not a separate white application card. */
  html[data-theme="light"] body{
    background:#EEF2E4!important;color:#0D2418;
  }
  html[data-theme="dark"] body{
    background:#101E16!important;color:#F2F7EC;
  }
  .shell:not(:has(.ylink-chat-shell)){
    display:grid!important;
    grid-template-columns:clamp(205px,17vw,240px) minmax(0,1fr)!important;
    gap:0!important;align-items:start!important;
    max-width:none!important;width:100%!important;
    min-height:100vh!important;
    background:radial-gradient(circle 280px at 84% -155px,
      color-mix(in srgb,#12A150 7%,var(--bg)) 0 99%,transparent 100%),var(--bg)!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav{
    position:sticky!important;top:0!important;left:auto!important;right:auto!important;
    display:flex!important;flex-direction:column!important;
    height:100dvh!important;max-height:100dvh!important;
    align-items:stretch!important;justify-content:flex-start!important;
    gap:5px!important;padding:24px 14px!important;
    border:0!important;border-right:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a.brand{
    display:flex!important;align-items:center!important;
    width:100%!important;min-height:68px!important;max-height:68px!important;
    margin:0 0 16px!important;padding:11px 11px!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a.brand img.yangle-figma-brand{
    display:block!important;
    width:142px!important;height:auto!important;max-width:100%!important;
    aspect-ratio:113/38!important;
    min-width:0!important;
    margin:0!important;padding:0!important;
    flex:0 1 auto!important;object-fit:contain!important;
    mix-blend-mode:normal!important;filter:none!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav]{
    display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:flex-start!important;
    flex:0 0 auto!important;
    gap:15px!important;min-height:48px!important;
    width:100%!important;padding:10px 13px!important;
    margin:0!important;
    background:transparent!important;color:var(--text)!important;
    border:0!important;border-radius:13px!important;
    box-shadow:none!important;transform:none!important;
    font:600 15px/20px 'DM Sans','Inter',sans-serif!important;
    transition:background .17s ease,color .17s ease!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav]:hover{
    background:color-mix(in srgb,var(--g2) 8%,transparent)!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav].active{
    background:color-mix(in srgb,#12A150 10%,transparent)!important;
    color:var(--text)!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav].active::before,
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav].active::after{
    content:none!important;display:none!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav]>.icon{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    margin:0!important;flex:0 0 23px!important;
    width:23px!important;height:23px!important;color:inherit!important;
    transform:none!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav].active>.icon{
    color:#12A150!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav] .label{
    display:inline!important;font:inherit!important;
    color:inherit!important;margin:0!important;
  }
  /* Preserve the minimalist personal tab identity. */
  .shell:not(:has(.ylink-chat-shell))>.nav>a[data-nav="#/me"] .label{
    display:inline!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.main{
    min-width:0!important;max-width:none!important;
    width:100%!important;
    background:transparent!important;
    padding:25px clamp(20px,4vw,60px) 72px!important;
    margin:0 auto!important;
  }
  .shell:not(:has(.ylink-chat-shell))>.main>*{
    max-width:1050px!important;margin-left:auto!important;margin-right:auto!important;
  }
  body.yangle-home .shell:not(:has(.ylink-chat-shell))>.main>*{
    max-width:810px!important;
  }
  /* Remove previous desktop Home constraints that made the feed drift. */
  body.yangle-home .shell:not(:has(.ylink-chat-shell))>.main{
    max-width:none!important;
  }
  /* Figma Glows are circular on desktop too, never rectangular story tiles. */
  body.yangle-home .home-glows-panel{
    width:100%!important;max-width:810px!important;
    margin:0 auto 17px!important;padding:0!important;
    min-height:0!important;height:auto!important;
    border:0!important;border-radius:0!important;
    box-shadow:none!important;background:transparent!important;
  }
  body.yangle-home .home-glows-panel .tray{
    display:flex!important;align-items:flex-start!important;
    gap:13px!important;min-height:110px!important;
    max-height:none!important;height:auto!important;
    margin:0!important;padding:0 0 5px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item{
    display:flex!important;flex:0 0 76px!important;
    flex-direction:column!important;
    justify-content:flex-start!important;align-items:center!important;
    width:76px!important;min-width:76px!important;max-width:76px!important;
    height:auto!important;min-height:104px!important;
    padding:0!important;margin:0!important;gap:3px!important;
    border:0!important;border-radius:0!important;
    box-shadow:none!important;background:transparent!important;
    overflow:visible!important;text-align:center!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item:hover{
    background:transparent!important;border-color:transparent!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.ring{
    position:relative!important;display:grid!important;place-items:center!important;
    flex:0 0 66px!important;
    width:66px!important;min-width:66px!important;
    height:66px!important;min-height:66px!important;
    margin:0!important;padding:7px!important;
    border:0!important;border-radius:50%!important;
    background:transparent!important;box-shadow:none!important;
    box-sizing:border-box!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.ring.glow-progress-ring::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(from -90deg,
      #12A150 0% var(--glow-progress,100%),
      #C9D8BE var(--glow-progress,100%) 100%);
    -webkit-mask-image:
      radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.4px)),
      repeating-conic-gradient(#000 0deg 12deg,transparent 12deg 15deg);
    -webkit-mask-composite:source-in;
    mask-image:
      radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.4px)),
      repeating-conic-gradient(#000 0deg 12deg,transparent 12deg 15deg);
    mask-composite:intersect;
    pointer-events:none;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.ring.add{
    border:3px dashed #12A150!important;padding:6px!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.ring>.in{
    display:grid!important;place-items:center!important;
    padding:0!important;margin:0!important;
    width:100%!important;height:100%!important;
    border:0!important;border-radius:50%!important;
    background:var(--surface-2)!important;
    box-shadow:none!important;overflow:hidden!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.ring .av,
  body.yangle-home .home-glows-panel .tray>.glow-item>.ring .add-av{
    display:grid!important;place-items:center!important;
    width:100%!important;height:100%!important;
    min-width:0!important;min-height:0!important;
    border-radius:50%!important;overflow:hidden!important;
    box-shadow:none!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.name{
    display:block!important;flex:0 0 auto!important;
    margin:2px 0 0!important;padding:0!important;
    width:76px!important;max-width:76px!important;
    text-align:center!important;
    font:600 11px/15px 'DM Sans',sans-serif!important;
    color:var(--text)!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item>.glow-time-left{
    display:block!important;flex:0 0 auto!important;
    margin:0!important;text-align:center!important;
    max-width:76px!important;white-space:nowrap!important;
    font:400 10px/13px 'DM Sans',sans-serif!important;
    color:var(--muted)!important;
  }
  body.yangle-home .home-glows-panel .tray>.glow-item:first-child::after{
    content:'Add';order:3!important;
    font:400 10px/13px 'DM Sans',sans-serif!important;
    color:var(--muted)!important;
  }
  body.yangle-home .home-glows-panel .home-glows-heading{
    margin-bottom:12px!important;
  }
  body.yangle-home .home-glows-view-all{
    border:0!important;border-radius:0!important;
    box-shadow:none!important;background:none!important;
    color:#0B5A33!important;
  }
}

/* Mobile inherits its original Figma structure, with the same brand asset and tone. */
@media(max-width:899px){
  body.yangle-mobile-tab .topbar>.brand{
    display:none!important;
  }
  body.yangle-mobile-tab[data-yangle-tab="home"] .figma-wordmark{
    display:block!important;filter:none!important;
    width:113px!important;height:38px!important;
  }
}
html[data-theme="dark"] .nav>a.brand img.yangle-figma-brand,
html[data-theme="dark"] .topbar .brand img.yangle-figma-brand,
html[data-theme="dark"] body.yangle-mobile-tab .figma-wordmark{
  filter:brightness(0) invert(94%)!important;
}
html[data-theme="dark"] body.yangle-home .home-glows-view-all{
  color:#C9F574!important;
}
@media(prefers-reduced-motion:reduce){
  .shell>.nav a[data-nav]{transition:none!important;}
}

/* Desktop Home alignment correction.
   The feed and Glows were centered, but the composer had an explicit
   margin:0!important from older CSS and was left-aligned to .main. */
@media (min-width:900px){
  body.yangle-home .shell:not(:has(.ylink-chat-shell)) > .main{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    width:100%!important;
  }
  body.yangle-home .shell:not(:has(.ylink-chat-shell)) > .main > :is(
      .home-glows-panel,
      .home-slim-composer,
      .home-feed-column
    ){
    box-sizing:border-box!important;
    display:block;
    width:100%!important;
    max-width:810px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.yangle-home .shell:not(:has(.ylink-chat-shell)) > .main > .home-glows-panel{
    margin-top:0!important;
    margin-bottom:15px!important;
  }
  body.yangle-home .shell:not(:has(.ylink-chat-shell)) > .main > .home-slim-composer{
    margin-top:0!important;
    margin-bottom:16px!important;
  }
  body.yangle-home .shell:not(:has(.ylink-chat-shell)) > .main > .home-feed-column{
    margin-top:0!important;
    padding:0!important;
  }
  body.yangle-home .home-feed-column > *{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body.yangle-home .home-slim-composer .home-slim-input textarea{
    resize:none!important;
    overflow-y:auto!important;
    scrollbar-width:thin;
  }
}


/* Approved PC logo fix: preserve the original Figma letterforms and green leaf.
   The original SVG uses dark ink and disappeared on the dark canvas.
   Two identical-shape assets switch only with the app's active theme. */
@media (min-width:900px) {
  .shell:not(:has(.ylink-chat-shell)) > .nav > a.brand img.yangle-desktop-brand-dark {
    display:none!important;
  }
  html[data-theme="dark"] .shell:not(:has(.ylink-chat-shell)) > .nav > a.brand img.yangle-figma-brand:not(.yangle-desktop-brand-dark) {
    display:none!important;
  }
  html[data-theme="dark"] .shell:not(:has(.ylink-chat-shell)) > .nav > a.brand img.yangle-figma-brand.yangle-desktop-brand-dark {
    display:block!important;
    filter:none!important;
    mix-blend-mode:normal!important;
  }
  /* Keep the single YLink heading in the original visual position. */
  body[data-yangle-tab="ylinks"] .ylink-page-head .ylink-heading-copy {
    padding-top:19px;
  }
}