/* ============================================================================
   my-day.css — My Day (personal landing) module-specific tweaks.
   All selectors are namespaced .my-day-* and use ONLY var(--…) tokens.
   The page reuses core component classes (card / attn / list / kpi / spark /
   avatar-stack / pdot / pill); these rules only add the bits core lacks:
   the greeting presence selector + Focus toggle, and the meeting timeline.
   ========================================================================== */

/* ── greeting header extras ─────────────────────────────────────────────── */
.my-day-head .vh-ico{
  background:linear-gradient(135deg,var(--panel-hi),var(--panel));
  box-shadow:0 0 22px var(--weather);
}
.my-day-date{
  font-family:var(--font-mono);font-size:12px;letter-spacing:1px;
  color:var(--accent1);text-transform:uppercase;
}

/* presence + focus cluster sits in vh-actions */
.my-day-presence-wrap{position:relative}
.my-day-presence-host{position:relative}

.my-day-presence{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  font-size:12.5px;font-weight:600;transition:all .16s var(--ease);
}
.my-day-presence:hover{border-color:var(--border-hi);background:var(--panel-hi)}
.my-day-presence .my-day-caret{font-size:9px;color:var(--text-faint)}
.my-day-presence-lbl{letter-spacing:.1px}

/* presence dropdown — anchored under the chip */
.my-day-presence-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:40;
  min-width:180px;padding:6px;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--border-hi);border-radius:11px;
  box-shadow:0 18px 50px var(--bg),0 0 0 1px var(--glow);
  display:flex;flex-direction:column;gap:2px;
  animation:myDayPop .16s var(--ease);
}
@keyframes myDayPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.my-day-presence-opt{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:8px;
  color:var(--text-muted);font-size:12.5px;font-weight:600;text-align:left;
  border:1px solid transparent;transition:.14s var(--ease);
}
.my-day-presence-opt:hover{background:var(--panel);color:var(--text)}
.my-day-presence-opt.active{
  background:var(--panel-hi);color:var(--text);border-color:var(--border-hi);
  box-shadow:inset 0 0 0 1px var(--accent-soft);
}

/* focus toggle — pulses softly when on */
.my-day-focus .my-day-focus-ico{font-size:13px;line-height:1}
.my-day-focus.on{animation:myDayFocusGlow 2.6s var(--ease) infinite}
@keyframes myDayFocusGlow{0%,100%{box-shadow:0 0 14px var(--glow)}50%{box-shadow:0 0 26px var(--glow)}}

/* ── Needs you stack ────────────────────────────────────────────────────── */
.my-day-attn-stack{display:flex;flex-direction:column;gap:9px}
.my-day-kind{
  display:inline-block;margin-right:7px;
  font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:1.5px;
  color:var(--text-faint);
}
.my-day-empty{
  padding:26px 16px;text-align:center;color:var(--text-faint);font-size:13px;
  border:1px dashed var(--border-hi);border-radius:var(--radius-sm);background:var(--bg2);
}

/* ── Today's meetings timeline ──────────────────────────────────────────── */
.my-day-meetings .my-day-timeline{display:flex;flex-direction:column}
.my-day-slot{
  display:grid;grid-template-columns:54px 16px 1fr auto;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.my-day-slot:last-of-type{border-bottom:none}
.my-day-slot-time{display:flex;flex-direction:column;line-height:1.2}
.my-day-time{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text);letter-spacing:.5px}
.my-day-len{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-faint);margin-top:2px}

/* vertical connector with a node dot */
.my-day-slot-line{position:relative;align-self:stretch;display:flex;justify-content:center}
.my-day-slot-line::before{
  content:'';position:absolute;top:-11px;bottom:-11px;width:1px;
  background:linear-gradient(180deg,transparent,var(--border) 18%,var(--border) 82%,transparent);
}
.my-day-slot:first-of-type .my-day-slot-line::before{top:50%}
.my-day-slot:last-of-type .my-day-slot-line::before{bottom:50%}
.my-day-node{
  position:relative;z-index:1;width:9px;height:9px;border-radius:50%;
  background:var(--panel);border:2px solid var(--border-hi);
}
.my-day-slot.live .my-day-node{
  background:var(--accent1);border-color:var(--accent1);box-shadow:0 0 8px var(--accent1);
}

.my-day-slot-body{min-width:0}
.my-day-slot-title{
  font-size:13px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.my-day-livepill{font-size:8.5px;padding:2px 7px}
.my-day-attendees{margin-top:5px;align-items:center}
.my-day-attendees .avatar{width:24px;height:24px;font-size:9px}
.my-day-av-more{background:var(--panel-hi);color:var(--text-muted);border:2px solid var(--panel)}
.my-day-solo{font-size:11px}

.my-day-slot.live{background:linear-gradient(90deg,var(--glow),transparent);border-radius:var(--radius-sm)}

/* ── My pulse ───────────────────────────────────────────────────────────── */
.my-day-pulse{gap:12px}
.my-day-kpi{
  padding:13px;border-radius:var(--radius-sm);
  background:var(--bg2);border:1px solid var(--border);
}
.my-day-kpi .kpi-sub{font-size:10.5px;margin-top:1px}
.my-day-kpi .spark{margin-top:8px;height:30px}

/* ── Unread that matter ─────────────────────────────────────────────────── */
.my-day-unread .my-day-mail{cursor:pointer;transition:background .14s,padding-left .14s var(--ease);border-radius:8px;padding-left:6px;padding-right:6px}
.my-day-unread .my-day-mail:hover{background:var(--panel);padding-left:10px}
.my-day-mail.unread .li-title{color:var(--text)}
.my-day-mail.unread{position:relative}
.my-day-mail.unread::before{
  content:'';position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:2px;background:var(--accent-grad);box-shadow:0 0 8px var(--glow);
}
.my-day-mail.unread .li-meta{color:var(--accent1)}

/* ── Company pulse feed ─────────────────────────────────────────────────── */
.my-day-feed .my-day-feed-item{cursor:pointer;transition:background .14s;border-radius:8px;padding-left:6px;padding-right:6px}
.my-day-feed .my-day-feed-item:hover{background:var(--panel)}
.my-day-amount{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;
  color:var(--accent1);
}
.my-day-pill-live{font-size:9px}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .my-day-pulse{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .my-day-slot{grid-template-columns:48px 14px 1fr auto;gap:8px}
  .my-day-presence-menu{min-width:160px}
}
@media (max-width:560px){
  .my-day-pulse{grid-template-columns:1fr}
  .my-day-slot{grid-template-columns:46px 12px 1fr;row-gap:6px}
  .my-day-join{grid-column:3;justify-self:start;margin-top:4px}
  .my-day-presence-wrap{width:100%}
  .my-day-presence-menu{left:0;right:auto}
}