/* Treatly — Home on a laptop: two columns, and a story row that fills one.
 *
 * Three things live here, all of them desktop-only:
 *
 *  1. The calendar moves out of its own tab and sits in a column to the right
 *     of the feed, the way Instagram keeps its suggestions there. It is the
 *     same calendar — commit-calendar.js paints both hosts from one string —
 *     so a month change or a picked day happens in both at once.
 *  2. The gap between the icon rail and the cards goes. The rail is 46px of
 *     glyphs; the cards now start at 46px, not at 64px.
 *  3. The story faces size themselves to the width they are given, so the row
 *     spans the column instead of huddling at its left edge. The measuring is
 *     in home-desk-columns.js; here it is only what the size drives.
 */

.home-side {
  display: none;
}

/* ── 2. the rail's gutter ─────────────────────────────────────────────────── */
@media (min-width: 600px) {
  /* social-elevate.css:5300 padded this to 64px to hold a strip of page
     between the glyphs and the cards. The screen itself is already pushed
     clear of the rail by --desktop-sidebar-offset (desktop-fullscreen.css:305),
     so that padding was a second gap on top of the first. The cards start
     where the rail ends. */
  body.desktop-sidebar-mode:not(.biz-company-open) #home-scroll {
    padding-left: 0 !important;
  }
}

/* ── 1. the calendar column ───────────────────────────────────────────────── */
@media (min-width: 1080px) {
  body.desktop-sidebar-mode:not(.biz-company-open) {
    --home-side-w: clamp(300px, 25vw, 372px);
  }

  body.desktop-sidebar-mode:not(.biz-company-open) #s-home {
    flex-direction: row;
    align-items: stretch;
  }

  body.desktop-sidebar-mode:not(.biz-company-open) #s-home > #home-scroll {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.desktop-sidebar-mode:not(.biz-company-open) #s-home > .home-side {
    display: block;
    flex: 0 0 var(--home-side-w);
    width: var(--home-side-w);
    min-width: 0;
    align-self: stretch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    border-left: 1px solid var(--soc-border, var(--border, #e5e5e5));
    background: var(--soc-canvas, var(--bg, #fff));
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  body.desktop-sidebar-mode:not(.biz-company-open) #s-home > .home-side::-webkit-scrollbar {
    display: none;
  }

  /* The mood disc was pinned to the right edge of the screen, which is now the
     calendar's edge. It belongs over the feed it logs. */
  body.desktop-sidebar-mode:not(.biz-company-open) #s-home > #mood-fab {
    right: calc(var(--home-side-w) + 16px);
  }

  /* In the tab the month stretches to fill the screen and scrolls inside
     itself. In the column it is as tall as it needs to be and the column
     scrolls, so the weeks do not fight the pane for height. */
  .home-side .calendar-host {
    display: flex;
    flex-direction: column;
    background: transparent;
  }
  .home-side .cal-top {
    padding: 12px 12px 8px;
  }
  .home-side .cal-month {
    font-size: 17px;
  }
  .home-side .cal-nav {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .home-side .cal-card {
    flex: 0 0 auto;
    background: transparent;
  }
  .home-side .cal-weeks {
    flex: 0 0 auto;
    overflow: visible;
  }
  .home-side .cal-week {
    min-height: 40px;
    padding: 5px 0 7px;
  }
  .home-side .cal-day-n {
    font-size: 11.5px;
    line-height: 22px;
    width: 22px;
    height: 22px;
  }
  .home-side .cal-run-name {
    font-size: 9.5px;
  }
}

/* ── 3. story faces that fill the row ─────────────────────────────────────── */
/* --fs-size is written onto the strip by fitHomeStoryStrip(); without it every
   rule below falls back to the phone's 58px ring and nothing moves. */
/* The strip fades its own two edges out, which is right when it scrolls under
   the screen's edge and wrong when the end faces are meant to sit on it. */
body:not(.biz-company-open) #home-social-shell #home-story-bar:has(.friend-strip--fit) {
  -webkit-mask-image: none;
  mask-image: none;
}
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit {
  justify-content: flex-start;
}
/* Past the cap the faces stop growing, so the leftover width goes between them
   rather than piling up after the last one. */
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit.friend-strip--spread {
  justify-content: space-between;
}
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item {
  min-width: 0;
  max-width: none;
  gap: 5px;
}
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item .fs-ring,
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item.fs-you .fs-ring,
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item--unseen .fs-ring,
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item--live .fs-ring,
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-ring--unseen,
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-ring--you {
  width: var(--fs-size, 58px) !important;
  height: var(--fs-size, 58px) !important;
}
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item .fs-av,
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-item--unseen .fs-av {
  width: calc(var(--fs-size, 58px) - 10px) !important;
  height: calc(var(--fs-size, 58px) - 10px) !important;
  /* The initials were sized for a 48px disc and looked lost in an 80px one. */
  font-size: calc(var(--fs-size, 58px) * 0.3);
}
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit .fs-name {
  font-size: clamp(10px, calc(var(--fs-size, 58px) * 0.15), 13px);
  max-width: 100%;
}
/* The dot keeps its own −10px bite out of the ring at every size; scaling it
   with the ring pulled the name up over the face. */
body:not(.biz-company-open) #home-social-shell #home-story-bar .friend-strip--fit {
  padding-top: 6px;
  padding-bottom: 8px;
}