/* Treatly — the mood button's contents, and the sheet it opens.
   The disc itself is styled in treatly.css (#mood-fab) and takes the accent
   theme in social-elevate.css; only its two spans were never styled, so the
   glyph and the score sat unset inside a 56px circle. */

.mood-fab-ico {
  display: block;
  font-size: 19px;
  line-height: 1;
}
.mood-fab-label {
  display: block;
  margin-top: 1px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#mood-fab {
  flex-direction: column;
  /* The disc is sized in treatly.css; the spans must not re-inherit its 26px. */
  font-size: 0;
  gap: 0;
}

/* The sheet is the app's normal sheet, so the rail inside needs no card of its
   own — the sheet is the card. */
.mood-quick-sheet { max-height: 82vh; overflow-y: auto; }
.mood-quick-host { padding: 2px 0 8px; }
.mood-quick-host .home-mood-rail {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
/* The rail is built as three cells side by side — flex:1 1 0 with a hard
   max-width:33.33% each, clipped to a 72px band. In a sheet there is room to
   stack them full width, so the thirds and the clip both have to go, not just
   the flex direction. */
.mood-quick-host .home-mood-rail-cells {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding: 6px 0 2px;
  touch-action: auto;
}
.mood-quick-host .home-mood-expand-cell {
  flex: 0 0 auto;
  max-width: none;
  width: 100%;
}
.mood-quick-host .home-mood-expand-track {
  position: relative;
  width: 100%;
  min-height: 44px;
}

/* The track's label and readout are styled only under #home-social-shell, so in
   a sheet they arrive unstyled — the label invisible and the readout parked as
   a floating bubble 30px above nothing. Both are put back as plain type on
   their own line: name on the left, value on the right, in the same uppercase
   micro-label the rest of the app uses for section headings. */
.mood-quick-host .home-mood-expand-cell { padding-top: 19px; }
.mood-quick-host .home-mood-expand-track-lbl {
  position: absolute;
  left: 2px;
  top: -17px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--t3);
  opacity: 1;
  mix-blend-mode: normal;
  text-shadow: none;
  pointer-events: none;
}
.mood-quick-host .home-mood-expand-val {
  position: absolute;
  left: auto;
  right: 2px;
  top: -18px;
  transform: none;
  padding: 0;
  min-width: 0;
  max-width: none;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--t2);
  font-variant-numeric: tabular-nums;
}


/* ── the button ─────────────────────────────────────────────────────────────
   treatly.css:2018 gives the disc a gradient, but social-elevate.css:1015
   repaints it flat with var(--soc-cta)!important. It is a call to action, so
   it wears the same sweep the app's other CTAs do. This file loads after
   social-elevate.css, so !important here settles it. */
#mood-fab,
body:not(.biz-company-open) #mood-fab {
  background-color: var(--chrome-cta, var(--brand)) !important;
  background-image: var(--chrome-cta-gradient, linear-gradient(145deg, var(--brand), var(--brand2))) !important;
  color: var(--on-brand, #fff) !important;
}

/* ── the sheet it opens ─────────────────────────────────────────────────────
   The sheet had no width of its own. On desktop, desktop-fullscreen.css:88
   gives .shovl .sheet auto side margins and a max-width, which on a stretch
   parent makes the box shrink-to-fit — and the rail inside is three cells at
   flex:1 1 0 with no intrinsic width, so the whole sheet collapsed to about
   90px and the three bars came out as stubs. Every other sheet escapes this
   because its content (inputs, buttons with words in them) has a natural
   width. This one has to say so. */
.mood-quick-sheet {
  width: 100%;
}

/* .sheet-title and .sheet-handle had no rules anywhere in the app — "Today"
   arrived as bare text and the grab handle as an empty div. */
.mood-quick-sheet .sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border2, #cbced7);
  margin: 0 auto 14px;
}
.mood-quick-sheet .sheet-title {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  margin: 0 0 4px;
}
/* One line under the title saying what the bars are for — the sheet opened
   straight into three unlabelled sliders. */
.mood-quick-sheet .sheet-title::after {
  content: "Drag to log how you are — it saves as you go.";
  display: block;
  margin-top: 4px;
  font-family: var(--font, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--t3);
}

/* The rows want air between them now they are full width. */
.mood-quick-host {
  padding: 8px 0 4px;
}
.mood-quick-host .home-mood-rail-cells {
  gap: 26px;
}