/* ============================================================
   Home (#view-home, hm-*) — the portal's landing page.
   Markup and behaviour: static/home.js · data: GET /api/home (services/home_feed.py)

   One page, read top to bottom like a morning brief:
     hero      a live clock + the date, a greeting, one sentence that says what the day
               holds; on the right your hours logged and your planned days (Resource Allocation)
     needs     what is waiting on you, most pressing first
     next      the single next deadline, a light card with the module's tint in one corner
     start     the "+ New" entries as round buttons, and where you were last
     horizon   the next 14 days as a ribbon; pick a day, read its agenda
     pulse     one small instrument per module the role may open
     projects  your projects as a rail

   House rules it follows: Lato, white cards on the grey stage with a 1px
   --stroke hairline, red as a glyph (a late date) and never as
   a fill, the light-blue #F0F5FD hover, motion you only notice if you look.
   Modules are told apart by a quiet tint (--m / --m-bg), set per [data-m].
   ============================================================ */

/* the page starts under the glass top bar (64px), so the wash just tints the bar's lower edge */
#view-home{position:relative;overflow:hidden;margin-top:-64px;padding-top:64px;
    --hm-r:18px;--hm-gap:16px;
    --hm-card-sh:0 1px 2px rgba(7,9,22,.04),0 10px 28px -20px rgba(7,9,22,.20);
    --hm-ease:cubic-bezier(.2,.8,.2,1)}

/* the wash: the sidebar's light-blue corner glow, continued behind the greeting.
   Still at a glance; it leans and swells by a few pixels on two clocks. Same place over the greeting
   as the first version (top −300px below the bar); behind the bar (its 236–300px) it is masked down to a faint tint. */
#view-home::before{content:"";position:absolute;z-index:0;left:-260px;top:-236px;width:960px;height:560px;border-radius:50%;
    pointer-events:none;opacity:.3;will-change:translate,scale;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 236px,rgba(0,0,0,.6) 300px,#000 330px);mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 236px,rgba(0,0,0,.6) 300px,#000 330px);
    background:radial-gradient(closest-side,#E4EEFC 0%,rgba(230,239,252,.45) 38%,rgba(236,242,252,0) 74%);   /* toned down 2026-09-21: less blue top left */
    transform-origin:50% 45%;
    animation:hmDrift 26s ease-in-out -7s infinite,hmSwell 15s ease-in-out -4s infinite alternate,hmBreathe 11s ease-in-out -2s infinite alternate}
/* a slow loop, never a straight line: the glow wanders right along the greeting, dips, comes back */
@keyframes hmDrift{
    0%,100%{translate:0 0}
    30%{translate:70px 16px}
    55%{translate:34px 38px}
    80%{translate:-26px 14px}}
@keyframes hmSwell{from{scale:.94}to{scale:1.08}}
@keyframes hmBreathe{from{opacity:.24}to{opacity:.32}}

.hm{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:0 32px 72px;color:var(--ink);font-family:var(--sans)}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}
.hm svg{display:block}
/* :where() keeps the reset at element weight, so every hm-* class below wins over it (and over Tailwind's preflight) */
:where(.hm) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
:where(.hm) a{color:inherit;text-decoration:none}

/* module tints */
.hm [data-m]{--m:#4F5158;--m-bg:#F1F1F2}
.hm [data-m="projects"]{--m:#5B5BD6;--m-bg:#EEF0FF}
.hm [data-m="proposals"]{--m:#2563EB;--m-bg:#E8F1FE}
.hm [data-m="radar"]{--m:#0F9488;--m-bg:#E4F6F3}
.hm [data-m="recruitment"]{--m:#D97706;--m-bg:#FFF3E2}
.hm [data-m="marketing"]{--m:#DB2777;--m-bg:#FDECF3}
.hm [data-m="portfolio"]{--m:#7C3AED;--m-bg:#F1EBFE}
.hm [data-m="hr"]{--m:#15944A;--m-bg:#E8F6ED}
.hm [data-m="payments"]{--m:#0E7490;--m-bg:#E2F3F7}
.hm [data-m="todos"]{--m:#EB1414;--m-bg:#FFF0F0}
.hm [data-m="comments"]{--m:#161718;--m-bg:#F1F1F2}
.hm [data-m="invoices"],.hm [data-m="finance"]{--m:#7C3AED;--m-bg:#F3EEFE}
.hm [data-m="hrdesk"],.hm [data-m="sign"],.hm [data-m="leave"]{--m:#15944A;--m-bg:#E8F6ED}
.hm [data-m="onboarding"]{--m:#D97706;--m-bg:#FFF3E2}
.hm [data-m="skills"],.hm [data-m="policies"],.hm [data-m="hours"]{--m:#4F5158;--m-bg:#F1F1F2}

/* ---------- Hero ---------- */
.hm-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:32px;padding:36px 0 26px}
.hm-hero>div:first-child{display:flex;flex-direction:column;min-width:0}
.hm-eyebrow{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.hm-eyebrow>i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}
.hm-eyebrow{gap:12px}
/* the clock: no container, it reads as the greeting's eyebrow — HH:MM in ink, the seconds small, a short rule, date · week */
.hm-clock{position:relative;display:inline-flex;align-items:center;gap:12px;height:22px}
.hm-hm{display:inline-flex;align-items:baseline;font-family:var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;text-transform:none}
.hm-hm b{font-size:16px;font-weight:900;color:var(--ink)}
.hm-hm i{font-style:normal;font-size:15px;font-weight:700;margin:0 1px;color:var(--grey-2);position:relative;top:-1px;animation:hmBlink 2s ease-in-out infinite}
.hm-sd{display:inline-flex;align-self:flex-start;margin:0 0 0 -8px;height:12px;overflow:hidden}
.hm-sd s{display:inline-block;width:.62em;text-align:center;text-decoration:none;font-family:var(--display);font-size:11px;font-weight:800;line-height:12px;
    color:var(--grey-2);font-variant-numeric:tabular-nums;letter-spacing:0}
.hm-sd s.roll{animation:hmRoll .42s var(--hm-ease)}
@keyframes hmRoll{from{transform:translateY(-90%);opacity:0}to{transform:none;opacity:1}}
.hm-cdiv{width:18px;height:1px;background:var(--grey-2);opacity:.45}
.hm-cdate{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.hm-cdate i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
@keyframes hmBlink{50%{opacity:.3}}
.hm-hello{margin:12px 0 0;font-family:var(--display);font-weight:900;font-size:46px;line-height:1.04;letter-spacing:-.032em;color:var(--ink)}
.hm-hello em{font-style:normal;color:inherit}   /* the full stop is ink: a red one was tried and turned down */
.hm-brief{margin:16px 0 0;max-width:720px;font-size:17px;line-height:1.6;color:var(--grey);text-wrap:pretty}
.hm-brief b{font-weight:700;color:var(--ink)}
.hm-brief .late{color:var(--red-acc)}
.hm-brief a{font-weight:700;color:var(--ink);background:linear-gradient(var(--stroke),var(--stroke)) 0 100%/100% 1.5px no-repeat;
    padding-bottom:1px;transition:background-size .3s var(--hm-ease),color .15s}
.hm-brief a:hover{background-image:linear-gradient(var(--red-pure),var(--red-pure))}

/* this week's hours: five bars in a glass tile */
.hm-hero-side{display:flex;flex-direction:column;gap:10px;width:340px}
.hm-week{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:16px 18px 14px 20px;border-radius:var(--hm-r);
    background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(170%) blur(10px);backdrop-filter:saturate(170%) blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--hm-card-sh);transition:transform .25s var(--hm-ease),box-shadow .25s}
.hm-week:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(7,9,22,.05),0 16px 30px -20px rgba(7,9,22,.3)}
.hm-week-k{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2)}
.hm-week-n{margin-top:6px;font-weight:900;font-size:30px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hm-week-n small{margin-left:3px;font-size:14px;font-weight:700;letter-spacing:0;color:var(--grey-2)}
.hm-week-s{margin-top:6px;font-size:12px;color:var(--grey-2)}
.hm-bars{display:flex;align-items:flex-end;gap:7px;height:64px}
.hm-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;width:16px}
.hm-bar i{display:block;width:100%;min-height:3px;border-radius:5px;background:#C9DCF7;transform-origin:50% 100%;
    animation:hmGrow .7s var(--hm-ease) both;animation-delay:calc(var(--i)*60ms + 250ms)}
.hm-bar.today i{background:var(--ink)}
.hm-bar.future i{background:var(--stroke)}
.hm-bar span{font-size:10px;font-weight:800;color:var(--grey-2)}
.hm-bar.today span{color:var(--ink)}
.hm-plan{display:flex;flex-direction:column;gap:0;padding:14px 18px 14px 20px;border-radius:var(--hm-r);
    background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(170%) blur(10px);backdrop-filter:saturate(170%) blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--hm-card-sh);transition:transform .25s var(--hm-ease),box-shadow .25s}
.hm-plan:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(7,9,22,.05),0 16px 30px -20px rgba(7,9,22,.3)}
.hm-plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hm-plan-r{font-size:11.5px;font-weight:700;color:var(--grey-2);white-space:nowrap}
.hm-plan-n{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.hm-plan-n b{font-weight:900;font-size:30px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hm-plan-n span{font-size:14px;font-weight:700;color:var(--grey-2)}
.hm-plan-n em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:var(--grey)}
.hm-plan-n em.over{color:var(--red-acc)}
.hm-plan-bar{display:flex;gap:3px;height:10px;margin-top:12px;padding:0;border-radius:6px;background:#E6EBF2;overflow:hidden}
.hm-plan-bar i{border-radius:4px;transform-origin:0 50%;animation:hmSlide .8s var(--hm-ease) both;animation-delay:calc(var(--i)*80ms + 350ms)}
.hm-plan-bar i.off,.hm-plan-k i.off{background:repeating-linear-gradient(135deg,#B7BFCB 0 3px,#DCE1E8 3px 6px)}
.hm-plan-k{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
.hm-plan-k span{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;font-size:12px;color:var(--grey)}
.hm-plan-k i{flex-shrink:0;width:8px;height:8px;border-radius:3px}
.hm-plan-k em{font-style:normal;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hm-plan-k b{font-weight:800;color:var(--ink)}
.hm-plan-k .more{color:var(--grey-2)}
@keyframes hmGrow{from{transform:scaleY(.05);opacity:.4}to{transform:none;opacity:1}}

/* ---------- Grid + cards ---------- */
.hm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--hm-gap)}
.hm-card{position:relative;min-width:0;background:rgba(255,255,255,.86);border:1px solid var(--stroke);border-radius:var(--hm-r);box-shadow:var(--hm-card-sh);
    -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px)}   /* a little glass: the page shows through, barely */
.hm-head{display:flex;align-items:center;gap:10px;padding:18px 20px 8px}
.hm-title{margin:0;font-weight:900;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.hm-count{min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--bg);border:1px solid var(--stroke);
    font-size:11.5px;font-weight:800;line-height:18px;text-align:center;color:var(--grey);font-variant-numeric:tabular-nums}
.hm-head-r{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--grey-2)}
.hm-rise{animation:hmRise .6s var(--hm-ease) both;animation-delay:calc(var(--d,0)*55ms)}
@keyframes hmRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hm-tile{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
    background:var(--m-bg);color:var(--m)}
.hm-tile svg{width:16px;height:16px}

/* ---------- Needs you ---------- */
.hm-needs{grid-column:span 7;display:flex;flex-direction:column;padding-bottom:10px}
/* the top band: two columns from the top of the page */
.hm-top{margin-bottom:var(--hm-gap)}
.hm-main{grid-column:span 7;display:flex;flex-direction:column;min-width:0}
.hm-main>.hm-hero{display:block;padding:36px 0 0}
.hm-main>.hm-zone-main{flex:1;margin-top:22px}
.hm-top>.hm-side{padding-top:36px}
/* today at a glance: frosted chips like the clock capsule */
.hm-glance{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.hm-gl{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px!important;border-radius:999px!important;
    background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.95)!important;
    -webkit-backdrop-filter:saturate(170%) blur(10px);backdrop-filter:saturate(170%) blur(10px);
    box-shadow:0 1px 2px rgba(7,9,22,.05),0 6px 16px -12px rgba(7,9,22,.25);
    font-size:13px;font-weight:600;color:var(--grey);white-space:nowrap;transition:transform .2s var(--hm-ease),box-shadow .2s}
.hm-gl b{font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-gl.late b{color:var(--red-acc)}
button.hm-gl:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(7,9,22,.05),0 10px 20px -12px rgba(7,9,22,.3)}
.hm-gl.away{padding-right:8px!important}
.hm-gl.away .hm-faces{margin-left:4px}
.hm-gl.away .hm-face{width:24px;height:24px;font-size:8.5px}
.hm-gl.away em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--grey-2);margin-left:2px}
.hm-list{flex:1;display:flex;flex-direction:column;gap:1px;padding:4px 8px 0}
.hm-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 12px;border-radius:12px;
    transition:background .15s}
.hm-row:hover,.hm-row:focus-visible{background:#F0F5FD;outline:none}
.hm-row-main{flex:1;min-width:0}
.hm-row-t{display:block;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-row-m{display:block;margin-top:2px;font-size:12.5px;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-due{flex-shrink:0;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap;
    color:var(--grey);background:var(--bg);border:1px solid var(--stroke)}
/* late is said in red type, not in a red pill: nine pink pills in a column read as an alarm */
.hm-due.late{padding-right:2px;color:var(--red-acc);background:none;border-color:transparent}
.hm-due.now{color:#fff;background:var(--ink);border-color:var(--ink)}
.hm-go{flex-shrink:0;width:16px;height:16px;color:var(--grey-2);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .2s var(--hm-ease)}
.hm-row:hover .hm-go,.hm-row:focus-visible .hm-go{opacity:1;transform:none}
/* Needs you: a chip per module group, and the fold past eight lines */
.hm-nf{display:flex;flex-wrap:wrap;gap:4px;margin:2px 20px 6px}
.hm-nf button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px!important;border-radius:999px!important;
    font-size:12.5px;font-weight:700;color:var(--grey-2)!important;border:1px solid transparent!important;transition:color .15s,background .15s,border-color .15s}
.hm-nf button i{font-style:normal;font-weight:800;font-size:11px;color:var(--grey-2);font-variant-numeric:tabular-nums}
.hm-nf button:hover{color:var(--ink)!important;background:#F5F5F5!important}
.hm-nf button.on{color:var(--ink)!important;background:#fff!important;border-color:var(--stroke)!important;box-shadow:0 1px 2px rgba(7,9,22,.06)}
.hm-nf button.on i{color:var(--ink)}
.hm-nf button:focus-visible{outline:none;box-shadow:0 0 0 3px #DCE8F8}
.hm-fold{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 16px 0;height:36px;border-radius:10px!important;
    font-size:12.5px;font-weight:800;color:var(--grey)!important;transition:background .15s,color .15s}
.hm-fold:hover{background:#F0F5FD!important;color:var(--ink)!important}
.hm-fold svg{width:14px;height:14px;transition:transform .2s var(--hm-ease)}
.hm-more{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 20px 8px;font-size:12.5px;color:var(--grey-2)}
.hm-more b{font-weight:700;color:var(--grey)}
.hm-sep{width:3px;height:3px;margin:0 7px;border-radius:50%;background:currentColor;opacity:.6}
.hm-undo{margin-left:4px;font-weight:800!important;color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--stroke);text-underline-offset:3px}
.hm-undo:hover{text-decoration-color:var(--ink)}
/* dismiss: a round check at the end of the row, always there in grey; the tick turns green on the row's hover */
.hm-item{position:relative;overflow:hidden;transition:height .24s var(--hm-ease),opacity .18s}
.hm-item .hm-row{padding-right:52px}
.hm-item .hm-go{display:none}
.hm-dismiss{position:absolute;right:10px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%!important;
    display:flex!important;align-items:center;justify-content:center;background:#fff!important;border:1px solid var(--stroke)!important;color:var(--grey-2);
    transition:color .15s,transform .12s}
.hm-dismiss svg{width:16px;height:16px}
.hm-item:hover .hm-dismiss,.hm-dismiss:focus-visible{color:#12B26E}
/* the Recruitment action-bar circle (.rec-crb): white, grey hairline; only the tick turns green, no fill, no shadow */
.hm-dismiss:hover{transform:scale(1.08);color:#12B26E}
.hm-dismiss:active{transform:scale(.96)}
.hm-dismiss:focus-visible{outline:none;box-shadow:0 0 0 3px #DCE8F8}
.hm-item.out{opacity:0}
.hm-clear{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:260px;padding:24px;text-align:center}
.hm-clear svg{width:40px;height:44px;margin-bottom:8px;overflow:visible;transform-origin:30% 95%;animation:hmWave 1.4s ease-in-out .6s 2}
.hm-clear path{fill:none;stroke:var(--ink);stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.hm-clear b{font-size:16px;font-weight:900}
.hm-clear span{font-size:13px;color:var(--grey-2)}
@keyframes hmWave{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}}

/* ---------- Right column: next up + start something ---------- */
.hm-side{grid-column:span 5;display:flex;flex-direction:column;gap:var(--hm-gap);min-width:0}

.hm-next{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:248px;padding:22px 24px 22px;
    border-radius:var(--hm-r);background:#fff;color:var(--ink);isolation:isolate;
    border:1px solid #EFE3EA;box-shadow:var(--hm-card-sh);transition:transform .3s var(--hm-ease),box-shadow .3s}
.hm-next:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(7,9,22,.04),0 22px 36px -24px rgba(7,9,22,.32)}
/* The sidebar logo strip's wash, larger: light pink most of the time, a slow hand-over to
   light blue and back on a 72 s score, one colour at a time (the one going out dims before
   the other comes up). Both layers lean, swell and shift by a few pixels on their own clocks. */
.hm-next::before,.hm-next::after{content:"";position:absolute;z-index:-1;right:-170px;top:-190px;width:520px;height:480px;border-radius:50%;
    pointer-events:none;will-change:translate,scale,rotate,opacity}
.hm-next::before{background:radial-gradient(closest-side,#FCDCE6 0%,rgba(253,228,236,.55) 38%,rgba(253,238,243,0) 80%);
    animation:hmHuePink 72s ease-in-out infinite,sbLean 23s ease-in-out -7s infinite alternate,sbSwell 13s ease-in-out -2s infinite alternate,sbShift 19s ease-in-out -11s infinite alternate}
.hm-next::after{opacity:0;background:radial-gradient(closest-side,#DCE9FC 0%,rgba(226,237,252,.55) 38%,rgba(232,240,252,0) 80%);
    animation:hmHueBlue 72s ease-in-out infinite,sbLean 23s ease-in-out -7s infinite alternate,sbSwell 13s ease-in-out -2s infinite alternate,sbShift 19s ease-in-out -11s infinite alternate}
@keyframes hmHuePink{0%,56%{opacity:1} 63%{opacity:.15} 66%,86%{opacity:0} 92%{opacity:.15} 100%{opacity:1}}
@keyframes hmHueBlue{0%,58%{opacity:0} 63%{opacity:.15} 67%,85%{opacity:.95} 91%{opacity:.15} 96%,100%{opacity:0}}
/* a faint dotted grain in the glowing corner */
.hm-next-grain{position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.55;
    background-image:radial-gradient(rgba(7,9,22,.09) 1px,transparent 1px);background-size:18px 18px;
    -webkit-mask-image:linear-gradient(205deg,#000 0%,transparent 48%);mask-image:linear-gradient(205deg,#000 0%,transparent 48%)}
.hm-next-k{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.hm-next-n{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.hm-next-n b{font-weight:900;font-size:64px;line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink)}
.hm-next-n.word b{font-size:44px;letter-spacing:-.035em;line-height:1}
.hm-next-n span{font-size:15px;font-weight:700;color:var(--grey-2)}
.hm-next-t{margin:auto 0 0;padding-top:20px;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.005em;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-next-m{margin-top:5px;font-size:13px;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-next-go{position:absolute;right:20px;bottom:20px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--stroke);color:var(--ink);box-shadow:0 1px 2px rgba(7,9,22,.06),0 4px 10px -6px rgba(7,9,22,.18);
    transition:transform .25s var(--hm-ease),border-color .2s}
.hm-next-go svg{width:17px;height:17px}
.hm-next:hover .hm-next-go{transform:translate(2px,-2px);border-color:#EFD9E2}
.hm-next-t,.hm-next-m{padding-right:56px}
/* My day: today's calendar between the big type and the title, as a small timeline:
   time · dot on a rail · title · end time. hm-md-* (hm-day is the horizon's day cell). */
.hm-md{display:flex;flex-direction:column;margin-top:14px;min-width:0;text-align:left}
.hm-md-k{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px;
    font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.hm-md-k span{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-md-l{position:relative;display:flex;flex-direction:column}
.hm-md-l::before{content:"";position:absolute;left:60px;top:14px;bottom:14px;width:2px;border-radius:1px;background:rgba(7,9,22,.07)}
.hm-md-r{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:5px 8px;margin:0 -8px;border-radius:10px;
    font-size:13px;line-height:1.3;color:var(--ink);cursor:pointer;transition:background .15s,opacity .4s}
.hm-md-r:hover,.hm-md-r:focus-visible{background:rgba(7,9,22,.04);outline:none}
.hm-md-r b{flex:0 0 42px;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--grey-2)}
.hm-md-r b.all{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hm-md-r i{flex:0 0 10px;height:10px;margin:0 4px;border-radius:50%;background:var(--c,var(--red-acc));box-shadow:0 0 0 2px #fff;transition:box-shadow .3s}
.hm-md-r .t{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-md-r .t small{margin-left:6px;font-size:12px;font-weight:500;color:var(--grey-2)}
.hm-md-r u{flex:0 0 auto;text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-acc)}
.hm-md-r em{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;color:var(--grey-2)}
.hm-md-r em svg{width:14px;height:14px;color:var(--ink);opacity:.7}
.hm-md-r.past{opacity:.42}
.hm-md-r.past i{background:#fff;box-shadow:0 0 0 2px var(--c,var(--red-acc))}
.hm-md-r.now .t{font-weight:800}
.hm-md-r.now i{box-shadow:0 0 0 2px #fff,0 0 0 5px color-mix(in srgb,var(--c,var(--red-acc)) 26%,transparent)}
.hm-md-more{padding:5px 0 0 60px;font-size:12.5px;font-weight:600;color:var(--grey-2);cursor:pointer}
.hm-md-more:hover{color:var(--ink)}
.hm-md-empty{padding:2px 0;font-size:13px;color:var(--grey-2)}
.hm-md-sk{display:block;height:11px;margin:9px 0;border-radius:6px;background:rgba(7,9,22,.06)}

/* the side column: Your week + Planned tiles, then Next up taking the spare
   height; Start something keeps its natural size */
.hm-side>.hm-b[data-block="next"]{flex:1}
.hm-start{display:flex;flex-direction:column;padding-bottom:18px}
.hm-start .hm-recent{margin-bottom:4px}
.hm-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 4px;padding:10px 14px 4px}
.hm-act{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 2px;border-radius:12px;text-align:center!important}
.hm-act i{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;
    background:#fff;border:1px solid var(--stroke);color:var(--ink);
    box-shadow:0 1px 2px rgba(7,9,22,.06),0 4px 10px -6px rgba(7,9,22,.18);
    transition:transform .25s var(--hm-ease),box-shadow .25s,border-color .2s,color .2s}
.hm-act i svg{width:18px;height:18px}
.hm-act span{font-size:12px;font-weight:700;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hm-act:hover i,.hm-act:focus-visible i{transform:translateY(-2px);color:var(--red-pure);border-color:#DCE8F8;
    box-shadow:0 1px 2px rgba(7,9,22,.06),0 10px 16px -10px rgba(7,9,22,.3)}
.hm-act:hover span{color:var(--ink)}
.hm-act:focus-visible{outline:none}
.hm-recent{margin:14px 12px 0;padding-top:10px;border-top:1px solid var(--stroke)}
.hm-recent-k{padding:4px 8px 4px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2)}
.hm-recent .hm-row{min-height:40px;padding:5px 8px;gap:10px}
.hm-recent .hm-row-t{font-size:13.5px}
.hm-recent .hm-row-m{display:inline;margin:0 0 0 8px;font-size:12px}
.hm-recent .hm-row-main{display:flex;align-items:baseline;min-width:0}
.hm-recent .hm-dotico{flex-shrink:0;width:24px;height:24px;border-radius:8px;background:var(--bg);color:var(--grey-2);display:flex;align-items:center;justify-content:center}
.hm-recent .hm-dotico svg{width:13px;height:13px}

/* ---------- Horizon: the next 14 days ---------- */
.hm-horizon{grid-column:span 12;padding-bottom:18px}
.hm-legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.hm-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--grey)}
.hm-legend i{width:7px;height:7px;border-radius:50%;background:var(--m)}
.hm-ribbon-wrap{padding:16px 14px 0;overflow-x:auto;scrollbar-width:none}
.hm-ribbon-wrap::-webkit-scrollbar{display:none}
.hm-ribbon{display:grid;grid-template-columns:repeat(var(--n,14),minmax(64px,1fr));gap:4px;min-width:0}
.hm-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:92px;padding:10px 4px 10px;border-radius:14px;
    border:1px solid transparent;text-align:center!important;transition:background .15s,border-color .15s}
.hm-day:hover{background:#F6F9FE}
.hm-day.on{background:#F0F5FD;border-color:#DCE8F8}
.hm-day:focus-visible{outline:none;border-color:#BBD3F5}
.hm-day-w{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2)}
.hm-day-n{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-day.we .hm-day-n,.hm-day.we .hm-day-w{color:#B4B6BD}
.hm-day.today .hm-day-n{background:var(--ink);color:#fff}
.hm-day.today .hm-day-w{color:var(--ink)}
.hm-day-mo{position:absolute;top:-8px;left:50%;transform:translate(-50%,-50%);padding:0 6px;border-radius:6px;background:#fff;
    font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-acc)}
.hm-dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:76px;min-height:9px}
.hm-dots i{width:7px;height:7px;border-radius:50%;background:var(--m);transform:scale(0);animation:hmPop .4s var(--hm-ease) forwards;
    animation-delay:calc(var(--i)*25ms + 350ms)}
.hm-dots i.mine{margin:0 2.5px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--m)}
.hm-day.on .hm-dots i.mine{box-shadow:0 0 0 2px #F0F5FD,0 0 0 3.5px var(--m)}
.hm-dots em{font-style:normal;font-size:10px;font-weight:800;color:var(--grey-2);margin-left:1px}
@keyframes hmPop{to{transform:none}}
/* people away: a thin bar under the days they are out */
.hm-away{display:grid;grid-template-columns:repeat(var(--n,14),minmax(64px,1fr));gap:4px;margin-top:4px}
.hm-away-bar{display:flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 2px;border-radius:999px;overflow:hidden;
    background:repeating-linear-gradient(135deg,#F1F3F6 0 6px,#F7F8FA 6px 12px);border:1px solid var(--stroke);
    font-size:11.5px;font-weight:700;color:var(--grey);white-space:nowrap}
.hm-away-bar.cut-l{border-top-left-radius:4px;border-bottom-left-radius:4px}
.hm-away-bar.cut-r{border-top-right-radius:4px;border-bottom-right-radius:4px}
.hm-away-bar span{overflow:hidden;text-overflow:ellipsis}
.hm-av{flex-shrink:0;width:18px;height:18px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
    background:#DDE6F3;color:#4A5A74;font-size:8.5px;font-weight:800}
.hm-av img{width:100%;height:100%;object-fit:cover}
.hm-agenda{margin:14px 20px 0;padding-top:14px;border-top:1px solid var(--stroke)}
.hm-agenda-k{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:800;color:var(--ink)}
.hm-agenda-k span{font-weight:600;color:var(--grey-2)}
.hm-agenda-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 12px;margin:8px -12px 0}
.hm-agenda .hm-row{min-height:48px}
.hm-agenda .hm-tile{width:28px;height:28px;border-radius:9px}
.hm-agenda .hm-tile svg{width:14px;height:14px}
.hm-agenda-empty{padding:14px 0 6px;font-size:13px;color:var(--grey-2)}

/* ---------- Pulse: one instrument per module ---------- */
.hm-pulse{grid-column:span 12;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--hm-gap)}
.hm-p{display:flex;flex-direction:column;min-height:228px;padding:16px 18px 16px;text-align:left;
    transition:transform .3s var(--hm-ease),box-shadow .3s,border-color .2s}
.hm-p:hover,.hm-p:focus-visible{transform:translateY(-3px);border-color:#DCE8F8;outline:none;
    box-shadow:0 1px 2px rgba(7,9,22,.04),0 22px 36px -24px rgba(7,9,22,.32)}
.hm-p-h{display:flex;align-items:center;gap:10px}
.hm-p-h .hm-tile{width:28px;height:28px;border-radius:9px}
.hm-p-h .hm-tile svg{width:14px;height:14px}
.hm-p-h b{font-size:13px;font-weight:800;color:var(--grey)}
.hm-p-h .hm-go{margin-left:auto;opacity:.0}
.hm-p:hover .hm-p-h .hm-go{opacity:1;transform:none;color:var(--m)}
.hm-p-n{margin-top:16px;font-weight:900;font-size:34px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
.hm-p-n small{margin-left:2px;font-size:20px;font-weight:900;letter-spacing:-.02em}
.hm-p-l{margin-top:5px;font-size:12.5px;color:var(--grey-2)}
.hm-p-v{margin-top:auto;padding-top:16px}
.hm-p-f{margin-top:12px;min-height:35px;font-size:12px;line-height:1.45;color:var(--grey);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-p-f b{font-weight:800;color:var(--ink)}
.hm-p-f .late{color:var(--red-acc);font-weight:800}

/* runway: projects ending per month */
.hm-run{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:52px}
.hm-run div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.hm-run i{width:100%;min-height:3px;border-radius:5px;background:var(--m-bg);box-shadow:inset 0 0 0 1px rgba(91,91,214,.10);
    transform-origin:50% 100%;animation:hmGrow .7s var(--hm-ease) both;animation-delay:calc(var(--i)*55ms + 400ms)}
.hm-run div:first-child i{background:var(--m);box-shadow:none}
.hm-run span{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--grey-2)}
/* segmented bar (pipeline by stage, marketing by status) */
.hm-segbar{display:flex;gap:3px;height:10px}
.hm-segbar i{min-width:6px;border-radius:4px;background:var(--m);opacity:var(--o,1);transform-origin:0 50%;
    animation:hmSlide .8s var(--hm-ease) both;animation-delay:calc(var(--i)*70ms + 400ms)}
@keyframes hmSlide{from{transform:scaleX(.05);opacity:0}}
.hm-keys{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:9px}
.hm-keys span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--grey-2)}
.hm-keys span b{font-weight:800;color:var(--grey)}
.hm-keys span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--m);opacity:var(--o,1)}
/* radar: one dot per open tender */
.hm-field{display:flex;flex-wrap:wrap;gap:4px;max-height:40px;overflow:hidden}
.hm-field i{width:8px;height:8px;border-radius:50%;background:var(--m);transform:scale(0);animation:hmPop .4s var(--hm-ease) forwards;
    animation-delay:calc(var(--i)*12ms + 400ms)}
.hm-field i.v-Investigate{opacity:.42}
.hm-field i.v-New{background:none;box-shadow:inset 0 0 0 1.5px var(--m)}
.hm-field i.v-Skip{background:#DFE1E5}
/* recruitment: the funnel */
.hm-funnel{display:flex;flex-direction:column;gap:1px}
.hm-funnel div{display:grid;grid-template-columns:62px 1fr 28px;align-items:center;gap:8px;line-height:1.35;font-size:10.5px;font-weight:600;color:var(--grey-2)}
.hm-funnel u{display:block;height:5px;border-radius:3px;background:var(--bg);text-decoration:none;overflow:hidden}
.hm-funnel i{display:block;height:100%;border-radius:3px;background:var(--m);opacity:var(--o,1);transform-origin:0 50%;
    animation:hmSlide .8s var(--hm-ease) both;animation-delay:calc(var(--i)*60ms + 400ms)}
.hm-funnel b{text-align:right;font-weight:800;color:var(--grey);font-variant-numeric:tabular-nums}

/* ---------- Your projects ---------- */
.hm-projects{grid-column:span 12;padding-bottom:18px}
.hm-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--grey)!important;transition:color .15s,gap .2s var(--hm-ease)}
.hm-link svg{width:13px;height:13px}
.hm-link:hover{color:var(--ink)!important;gap:8px}
.hm-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:12px;padding:8px 20px 4px;overflow-x:auto;
    scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.hm-rail.end{-webkit-mask-image:none;mask-image:none}
.hm-rail::-webkit-scrollbar{display:none}
.hm-pj{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:168px;padding:14px 16px 14px;border-radius:14px;scroll-snap-align:start;
    border:1px solid var(--stroke);background:linear-gradient(180deg,var(--tint) 0,#fff 64px);
    transition:transform .3s var(--hm-ease),box-shadow .3s,border-color .2s}
.hm-pj:hover,.hm-pj:focus-visible{transform:translateY(-2px);outline:none;border-color:color-mix(in srgb,var(--acc) 30%,var(--stroke));
    box-shadow:0 18px 30px -24px rgba(7,9,22,.4)}
.hm-pj-top{display:flex;align-items:center;gap:10px}
.hm-pj .pc-logo{--pc-size:38px;border-radius:10px;box-shadow:0 0 0 2px #fff,0 4px 10px -6px rgba(7,9,22,.3)}
.hm-pj-code{margin-left:auto;padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.8);font:700 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--acc)}
.hm-pj-role{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.8);font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--grey)}
.hm-pj-t{margin-top:12px;font-size:14px;font-weight:800;line-height:1.3;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-pj-c{margin-top:2px;font-size:12px;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-pj-bar{position:relative;height:4px;margin-top:auto;border-radius:3px;background:var(--bg)}
.hm-pj-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--acc);transform-origin:0 50%;animation:hmSlide .9s var(--hm-ease) both;animation-delay:.5s}
.hm-pj-bar.over i{background:var(--red-grad)}
.hm-pj-f{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:11.5px;color:var(--grey-2)}
.hm-pj-f b{font-weight:800;color:var(--acc)}
.hm-pj-f b.over{color:var(--red-acc)}
.hm-pj-wrap{padding-top:14px;display:flex;flex-direction:column;flex:1}

/* ---------- Loading + error ---------- */
.hm-sk{border-radius:10px;background:linear-gradient(100deg,#ECEEF1 30%,#F6F7F9 50%,#ECEEF1 70%) 0 0/300% 100%;animation:hmShimmer 1.6s linear infinite}
@keyframes hmShimmer{to{background-position:-150% 0}}
.hm-err{grid-column:span 12;display:flex;align-items:center;gap:12px;padding:18px 20px;font-size:13.5px;color:var(--grey)}
.hm-err button{margin-left:auto;padding:7px 14px;border-radius:10px;border:1px solid var(--stroke);font-weight:700;font-size:12.5px}
.hm-err button:hover{background:#F0F5FD}

/* ---------- Responsive ---------- */
/* Every other page runs full width; Home follows the screen up to a reading cap
   instead of sitting as a 1360px column in the middle of a large monitor. */
@media (min-width:1600px){
    .hm{max-width:1720px;padding:0 40px 80px}
    #view-home{--hm-gap:20px}
}
@media (min-width:2100px){
    .hm{max-width:2000px;padding:0 48px 88px}
    .hm-needs,.hm-main{grid-column:span 8}
    .hm-side{grid-column:span 4}
}
@media (max-width:1180px){
    .hm-board>.hm-b[data-span="3"],.hm-board>.hm-b[data-span="4"]{grid-column:span 6!important}
    .hm-needs,.hm-side,.hm-main,.hm[class] .hm-main,.hm[class] .hm-side{grid-column:span 12}
    .hm-top>.hm-side{padding-top:0}
    .hm-side{flex-direction:row;flex-wrap:wrap}
    .hm-side>*{flex:1 1 calc(50% - var(--hm-gap));min-width:0}
}
@media (max-width:820px){
    .hm-acts{grid-template-columns:repeat(4,minmax(0,1fr))}
    .hm{padding:0 4px 56px}
    .hm-hero{grid-template-columns:1fr;gap:22px;padding:28px 0 24px}
    .hm-hello{font-size:34px}
    .hm-brief{font-size:15.5px}
    .hm-hero-side{width:100%}
    .hm-side{flex-direction:column}
    .hm-head{flex-wrap:wrap}
    .hm-legend{display:none}
    .hm-next-n b{font-size:52px}
    .hm-agenda-list{grid-template-columns:1fr}
    .hm-board>.hm-b{grid-column:span 12!important}
    .hm-row-m{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media (prefers-reduced-motion:reduce){
    #view-home::before,#view-home::after,.hm-next::before,.hm-sk,.hm-hm i,.hm-sd s.roll,.hm-plan-bar i{animation:none}
    .hm-item{transition:none}
    .hm-rise,.hm-bar i,.hm-run i,.hm-segbar i,.hm-funnel i,.hm-pj-bar i,.hm-clear svg{animation:none}
    .hm-dots i,.hm-field i{animation:none;transform:none}
    .hm-p,.hm-pj,.hm-next,.hm-week,.hm-act i{transition:none}
}

/* a repaint from cache (coming back to Home) does not replay the entrance */
.hm-still .hm-rise,.hm-still .hm-bar i,.hm-still .hm-run i,.hm-still .hm-segbar i,.hm-still .hm-funnel i,.hm-still .hm-pj-bar i,.hm-still .hm-plan-bar i{animation:none}
.hm-still .hm-dots i,.hm-still .hm-field i{animation:none;transform:none}

/* ---------- "Yours" lists inside the pulse cards ---------- */
.hm-p-v:has(.hm-ml),.hm-p-v:has(.hm-hr){margin-top:0;padding-top:12px}
.hm-p:has(.hm-hr) .hm-p-f{margin-top:auto;padding-top:14px}
.hm-p:has(.hm-ml) .hm-p-f{margin-top:auto;padding-top:12px}
.hm-ml{display:flex;flex-direction:column;gap:2px;margin:0 -8px}
.hm-ml-r{display:flex;flex-direction:column;gap:4px;padding:7px 8px;border-radius:10px;cursor:pointer;transition:background .15s}
.hm-ml-r:hover,.hm-ml-r:focus-visible{background:#F0F5FD;outline:none}
.hm-ml-t{display:flex;align-items:baseline;gap:8px;min-width:0}
.hm-ml-t em{flex:1;min-width:0;font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ml-t i{flex-shrink:0;font-style:normal;font-size:11px;font-weight:800;color:var(--grey-2);font-variant-numeric:tabular-nums}
.hm-ml-t i.late{color:var(--red-acc)}
.hm-ml-t i.now{color:var(--ink)}
.hm-ml-s{font-size:11px;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ml-s strong{font-weight:800;color:var(--m)}
.hm-ml-bar{position:relative;display:block;height:4px;border-radius:3px;background:var(--bg)}
.hm-ml-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;transform-origin:0 50%;animation:hmSlide .9s var(--hm-ease) both;animation-delay:.45s}
.hm-ml-bar.over b{background:var(--red-grad)!important}
/* bid checklist: one pill per step, done in the module colour, your next step ringed */
.hm-ml-steps{display:flex;align-items:center;gap:2px}
.hm-ml-steps b{flex:1;max-width:18px;height:5px;border-radius:3px;background:#E3E7EE}
.hm-ml-steps b.on{background:var(--m)}
.hm-ml-steps b.me{background:#fff;box-shadow:inset 0 0 0 1.5px var(--m)}
.hm-ml-steps small{margin-left:6px;font-size:10.5px;font-weight:800;color:var(--grey);font-variant-numeric:tabular-nums}
/* opening: candidates per stage, one chip per stage */
.hm-ml-pips{display:flex;gap:3px}
.hm-ml-pips b{flex:1;height:14px;border-radius:4px;background:color-mix(in srgb,var(--m) calc(var(--o)*100%),#fff);
    font-size:9.5px;font-weight:800;line-height:14px;text-align:center;color:#fff;font-variant-numeric:tabular-nums}
.hm-ml-pips b:empty{background:#EEF0F3}
.hm-ml-more{padding:2px 8px 0;font-size:11px;font-weight:700;color:var(--grey-2)}
.hm-still .hm-ml-bar b{animation:none}
@media (prefers-reduced-motion:reduce){.hm-ml-bar b{animation:none}}
.hm-p-v:has(.hm-p-clear){margin-top:0}
.hm-p-clear{padding:14px 0 4px;font-size:12.5px;line-height:1.5;color:var(--grey-2)}

/* ---------- HR desk: a ledger — the count, what it is and who, their faces ---------- */
.hm-hr{display:flex;flex-direction:column;margin:0 -8px}
.hm-hr-t{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:9px 8px;border-radius:10px;cursor:pointer;transition:background .15s}
.hm-hr-t+.hm-hr-t::before{content:"";position:absolute;left:8px;right:8px;top:0;height:1px;background:var(--stroke)}
.hm-hr-t:hover,.hm-hr-t:focus-visible{background:#F0F5FD;outline:none}
.hm-hr-t:hover::before,.hm-hr-t:hover+.hm-hr-t::before{opacity:0}
.hm-hr-n{flex-shrink:0;width:28px;font-weight:900;font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-hr-t.late .hm-hr-n{color:var(--red-acc)}
.hm-hr-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-hr-l{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-hr-w{font-size:11px;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-faces{flex-shrink:0;display:flex;padding-left:3px}
.hm-face{position:relative;width:26px;height:26px;margin-left:-3px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 2px #fff}
.hm-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-hr-t:hover .hm-face{box-shadow:0 0 0 2px #F0F5FD}

/* ---------- Mine / Everyone, above the module cards ---------- */
.hm-sec{grid-column:span 12;display:flex;align-items:center;gap:12px;margin:10px 2px -4px}
.hm-sec .hm-title{font-size:18px}
.hm-seg{margin-left:auto;display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:#F5F5F5;border:1px solid var(--stroke)}
.hm-seg button{padding:6px 14px!important;border-radius:9px!important;font-size:12.5px;font-weight:700;color:var(--grey-2)!important;transition:color .15s,background .15s,box-shadow .15s}
.hm-seg button:hover{color:var(--ink)!important;background:rgba(255,255,255,.65)!important}
.hm-seg button.on{background:#fff!important;color:var(--ink)!important;box-shadow:0 1px 2px rgba(7,9,22,.08),0 2px 6px -3px rgba(7,9,22,.12)}
.hm-seg button:focus-visible{outline:none;box-shadow:0 0 0 3px #DCE8F8}

/* ============================================================
   Layout: zones and blocks (home.js hmZoneHtml). Every block sits in a
   .hm-b wrapper inside a zone: main (under the greeting), side (the right
   column), board (the 12-column grid below, where a block has a span).
   ============================================================ */
.hm-zone{display:flex;flex-direction:column;gap:var(--hm-gap);min-width:0}
.hm-zone-main{gap:20px}
.hm-board{margin-top:var(--hm-gap);align-items:stretch}
.hm-board.hm-zone{display:grid}
.hm-b{position:relative;display:flex;flex-direction:column;min-width:0}
.hm-b>.hm-card,.hm-b>.hm-next,.hm-b>.hm-week,.hm-b>.hm-plan{flex:1}
.hm-zone-main>.hm-b[data-block="needs"]:last-child{flex:1}
.hm-top{margin-bottom:0}
/* column options (Page › Columns) */
.hm-cols-wide .hm-main{grid-column:span 8}
.hm-cols-wide .hm-side{grid-column:span 4}
.hm-cols-one .hm-main{grid-column:span 12}
.hm-cols-one .hm-top>.hm-side{grid-column:span 12;padding-top:var(--hm-gap);display:block;columns:2;column-gap:var(--hm-gap)}
.hm-cols-one .hm-top>.hm-side>.hm-b{break-inside:avoid;margin-bottom:var(--hm-gap)}
.hm-editing.hm-cols-one .hm-top>.hm-side>.hm-b{margin-bottom:calc(var(--hm-gap) + 18px)}
@media (max-width:820px){.hm-cols-one .hm-top>.hm-side{columns:1}}
.hm-cols-one .hm-top>.hm-side:empty{display:none}

/* a module card's own Mine / All */
.hm-sw{margin-left:auto;display:inline-flex;gap:1px;padding:2px;border-radius:8px;background:var(--bg);border:1px solid var(--stroke)}
.hm-sw span{padding:1px 7px;border-radius:6px;font-size:10.5px;font-weight:800;line-height:16px;color:var(--grey-2);cursor:pointer;transition:color .15s,background .15s}
.hm-sw span:hover{color:var(--ink)}
.hm-sw span.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(7,9,22,.08)}
.hm-sw span:focus-visible{outline:none;box-shadow:0 0 0 2px #BBD3F5}
.hm-p-h .hm-sw+.hm-go{margin-left:4px}

/* Customize: the quiet entry points (the eyebrow and the foot of the page) */
.hm-cust{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px!important;border-radius:999px!important;
    font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--grey-2)!important;border:1px solid transparent!important;
    transition:color .15s,background .15s,border-color .15s}
.hm-cust svg{width:14px;height:14px}
.hm-cust:hover,.hm-cust:focus-visible{color:var(--ink)!important;background:rgba(255,255,255,.75)!important;border-color:var(--stroke)!important;outline:none}
.hm-eyebrow>.hm-cdate{flex-shrink:0}
.hm-foot{display:flex;justify-content:center;margin-top:28px}
.hm-foot .hm-link svg{width:14px;height:14px}
.hm-empty{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:var(--hm-gap);padding:48px 24px;text-align:center}
.hm-empty b{font-size:16px;font-weight:900}
.hm-empty span{font-size:13px;color:var(--grey-2)}
.hm-empty button{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:34px;padding:0 14px!important;border-radius:999px!important;
    border:1px solid var(--stroke)!important;font-size:12.5px;font-weight:800}
.hm-empty button:hover{background:#F0F5FD!important}
.hm-empty svg{width:14px;height:14px}

/* Page › Density: compact */
.hm-compact{--hm-gap:12px}
.hm-compact .hm-main>.hm-hero{padding-top:24px}
.hm-compact.hm .hm-top>.hm-side{padding-top:24px}
.hm-compact .hm-main>.hm-zone-main{margin-top:16px}
.hm-compact .hm-zone-main{gap:12px}
.hm-compact .hm-head{padding:14px 16px 6px}
.hm-compact .hm-row{min-height:44px;padding-top:6px;padding-bottom:6px;padding-left:10px}
.hm-compact .hm-p{min-height:192px;padding:14px 16px}
.hm-compact .hm-p-n{margin-top:12px;font-size:28px}
.hm-compact .hm-next{min-height:200px;padding:18px 20px}
.hm-compact .hm-next-n b{font-size:52px}
.hm-compact .hm-md{margin-top:10px}
.hm-compact .hm-md-r{padding:3px 8px}
.hm-compact .hm-day{min-height:80px;padding:8px 4px}
.hm-compact .hm-week,.hm-compact .hm-plan{padding-top:12px;padding-bottom:12px}
/* Page › Greeting: small */
.hm-hello-s .hm-hello{margin-top:8px;font-size:32px}
/* Page › Background drift: off */
#view-home.hm-calm::before,#view-home.hm-calm .hm-next::before,#view-home.hm-calm .hm-next::after{animation:none}

/* ============================================================
   Customize mode (static/home_edit.js): every block gets a dashed frame you
   drag it by, its name top-left and its tools top-right; the page's own links
   are asleep underneath. Quiet on purpose: blue hairlines, white tools.
   ============================================================ */
.hm-editing{padding-bottom:140px}
.hm-editing .hm-rise,.hm-editing .hm-bar i,.hm-editing .hm-dots i{animation:none!important}
.hm-editing .hm-b>:not(.hm-ed){pointer-events:none;user-select:none}
.hm-ed{position:absolute;inset:-5px;z-index:6;border-radius:calc(var(--hm-r) + 5px);border:1.5px dashed #BBD3F5;
    background:rgba(240,245,253,.22);cursor:grab;touch-action:none;transition:background .15s,border-color .15s,box-shadow .15s}
.hm-ed:hover{background:rgba(240,245,253,.45);border-color:#8FB6EE}
.hm-ed:focus-visible{outline:none;border-style:solid;border-color:#5B8FD9;box-shadow:0 0 0 4px rgba(91,143,217,.16)}
.hm-ed-name,.hm-ed-tools{position:absolute;top:-13px;display:inline-flex;align-items:center;height:26px;border-radius:999px;background:#fff;border:1px solid var(--stroke);
    box-shadow:0 1px 2px rgba(7,9,22,.06),0 6px 14px -8px rgba(7,9,22,.22)}
.hm-ed-name{left:14px;gap:4px;max-width:calc(100% - 140px);padding:0 11px 0 5px;font-size:11.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ed-name svg{flex-shrink:0;width:16px;height:16px;color:var(--grey-2)}
.hm-ed-tools{right:14px;gap:1px;padding:0 3px}
/* the labels sit on the frame's top edge, so the zones open up a little while editing */
.hm-editing .hm-zone{gap:calc(var(--hm-gap) + 18px)}
.hm-editing .hm-main>.hm-zone-main{margin-top:34px}
.hm-editing.hm .hm-top>.hm-side{padding-top:50px}
.hm-editing .hm-board{margin-top:calc(var(--hm-gap) + 30px)}
.hm-ed-tools button{display:inline-flex!important;align-items:center;gap:4px;height:22px;min-width:22px;padding:0 5px!important;border-radius:999px!important;
    justify-content:center;color:var(--grey)!important;cursor:pointer;transition:background .15s,color .15s}
.hm-ed-tools button:hover,.hm-ed-tools button:focus-visible{background:#F0F5FD!important;color:var(--ink)!important;outline:none}
.hm-ed-tools svg{width:14px;height:14px}
.hm-ed-tools em{font-style:normal;font-size:11px;font-weight:800}
/* an empty zone takes a drop */
.hm-editing .hm-zone:empty{min-height:110px;border-radius:var(--hm-r);border:1.5px dashed #D5E3F6;display:flex;align-items:center;justify-content:center}
.hm-editing .hm-board.hm-zone:empty{display:flex}
.hm-editing .hm-zone:empty::before{content:"Drop blocks here";font-size:12.5px;font-weight:700;color:#8FA7C8}
.hm-editing.hm-cols-one .hm-top>.hm-side:empty{display:flex}
/* a block with nothing in it today still gets a place */
.hm-b-ghost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;padding:18px;text-align:center;
    background:repeating-linear-gradient(135deg,#FAFBFC 0 8px,#F5F7FA 8px 16px)}
.hm-b-ghost svg{width:20px;height:20px;color:var(--grey-2);margin-bottom:4px}
.hm-b-ghost b{font-size:13px;font-weight:800}
.hm-b-ghost span{font-size:12px;color:var(--grey-2)}
/* dragging: the block's place stays as a soft slot, a lifted copy follows the pointer */
.hm-dragging,.hm-dragging *{cursor:grabbing!important}
.hm-b.hm-b-ph>:not(.hm-ed){visibility:hidden}
.hm-b.hm-b-ph>.hm-ed{background:rgba(220,233,252,.55);border-color:#8FB6EE}
.hm-b.hm-b-ph>.hm-ed>*{visibility:hidden}
.hm .hm-b.hm-ghost{position:fixed;z-index:3000;margin:0;pointer-events:none;overflow:hidden;border-radius:var(--hm-r);opacity:.96;
    transform-origin:50% 30%;box-shadow:0 2px 4px rgba(7,9,22,.06),0 30px 60px -24px rgba(7,9,22,.38);
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 calc(100% - 40px),rgba(0,0,0,.35))}
.hm-b.hm-ghost>.hm-ed{inset:0;border-style:solid;border-color:#8FB6EE;background:rgba(240,245,253,.35)}
.hm-b-new>.hm-ed{animation:hmFound 1.4s var(--hm-ease)}
@keyframes hmFound{0%{background:rgba(220,233,252,.9);box-shadow:0 0 0 6px rgba(91,143,217,.18)}100%{background:rgba(240,245,253,.22);box-shadow:none}}

/* the bar: a frosted pill at the foot of the stage */
.hm-edbar{position:fixed;z-index:2600;left:var(--stage-cx,50%);bottom:22px;display:flex;align-items:center;gap:6px;max-width:calc(var(--stage-w,100vw) - 32px);
    padding:7px 7px 7px 18px;border-radius:999px;font-family:var(--sans);color:var(--ink);
    background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);
    box-shadow:0 1px 2px rgba(7,9,22,.06),0 18px 40px -16px rgba(7,9,22,.32),0 0 0 1px rgba(7,9,22,.05);
    opacity:0;transform:translate(-50%,14px);transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.hm-edbar.in{opacity:1;transform:translate(-50%,0)}
.hm-edbar *{box-sizing:border-box}
.hm-edbar svg{display:block;width:14px;height:14px;flex-shrink:0}
.hm-edbar-t{display:flex;flex-direction:column;min-width:0;margin-right:10px}
.hm-edbar-t b{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:900;white-space:nowrap}
.hm-edbar-t small{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-edbar-t small b{font-size:11.5px;font-weight:800;color:var(--ink)}
.hm-edbar-s.saved svg{width:12px;height:12px;color:#12B26E}
.hm-edbar-s.error{color:var(--red-acc)}
.hm-edbar-b{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid transparent;background:none;
    font:inherit;font-size:12.5px;font-weight:800;color:var(--grey);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.hm-edbar-b:hover,.hm-edbar-b:focus-visible{background:#F0F5FD;color:var(--ink);outline:none}
.hm-edbar-b i{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;line-height:18px;text-align:center}
.hm-edbar-go{background:var(--ink);color:#fff;padding:0 18px}
.hm-edbar-go:hover,.hm-edbar-go:focus-visible{background:#2A2C33;color:#fff}
.hm-edbar-u{margin-left:4px;padding:0;border:0;background:none;font:inherit;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--stroke);text-underline-offset:3px;cursor:pointer}

/* popovers: block settings, width, page options, add blocks */
.hm-pop{position:fixed;z-index:2700;width:340px;max-width:calc(100vw - 24px);overflow:auto;
    padding:14px;border-radius:16px;background:#fff;border:1px solid var(--stroke);font-family:var(--sans);color:var(--ink);
    box-shadow:0 1px 2px rgba(7,9,22,.05),0 24px 50px -18px rgba(7,9,22,.32);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1)}
.hm-pop.in{opacity:1;transform:none}
.hm-pop *{box-sizing:border-box}
.hm-pop svg{display:block;width:14px;height:14px;flex-shrink:0}
.hm-pop button{font:inherit;cursor:pointer}
.hm-pop .hm-tile{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--m-bg,#F1F1F2);color:var(--m,#4F5158)}
.hm-pop .hm-tile svg{width:16px;height:16px}
.hm-pop [data-m="projects"]{--m:#5B5BD6;--m-bg:#EEF0FF}.hm-pop [data-m="proposals"]{--m:#2563EB;--m-bg:#E8F1FE}
.hm-pop [data-m="radar"]{--m:#0F9488;--m-bg:#E4F6F3}.hm-pop [data-m="recruitment"]{--m:#D97706;--m-bg:#FFF3E2}
.hm-pop [data-m="marketing"]{--m:#DB2777;--m-bg:#FDECF3}.hm-pop [data-m="portfolio"]{--m:#7C3AED;--m-bg:#F1EBFE}.hm-pop [data-m="hr"]{--m:#15944A;--m-bg:#E8F6ED}.hm-pop [data-m="payments"]{--m:#0E7490;--m-bg:#E2F3F7}
.hm-pop-h{display:flex;align-items:flex-start;gap:10px;padding:2px 2px 12px;margin-bottom:4px;border-bottom:1px solid var(--stroke)}
.hm-pop-h>svg{width:16px;height:16px;margin:2px 4px 0 2px;color:var(--grey)}
.hm-pop-h>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-pop-h b{font-size:14px;font-weight:900}
.hm-pop-h small{font-size:12px;line-height:1.45;color:var(--grey-2)}
.hm-pop-r{padding:10px 2px 4px}
.hm-pop-l{margin-bottom:7px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)}
.hm-pop-seg{display:flex;gap:2px;padding:3px;border-radius:11px;background:#F5F5F5;border:1px solid var(--stroke)}
.hm-pop-seg button{flex:1;min-width:0;height:28px;padding:0 8px;border:0;border-radius:8px;background:none;font-size:12px;font-weight:700;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.hm-pop-seg button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.hm-pop-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(7,9,22,.08),0 2px 6px -3px rgba(7,9,22,.12)}
.hm-pop-seg button:focus-visible,.hm-pop-chips button:focus-visible,.hm-pop-sizes button:focus-visible,.hm-pop-add button:focus-visible{outline:none;box-shadow:0 0 0 3px #DCE8F8}
.hm-pop-chips{display:flex;flex-wrap:wrap;gap:5px}
.hm-pop-chips button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--stroke);background:#fff;
    font-size:12px;font-weight:700;color:var(--grey-2);transition:background .15s,color .15s,border-color .15s}
.hm-pop-chips button:hover{color:var(--ink);border-color:#DCE8F8}
.hm-pop-chips button.on{color:var(--ink);background:#F0F5FD;border-color:#DCE8F8;padding-left:8px}
.hm-pop-chips button.on svg{width:12px;height:12px;color:#2F6FD0}
.hm-pop-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:10px}
.hm-pop-sizes button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:9px 10px;border-radius:11px;border:1px solid var(--stroke);background:#fff;
    font-size:12px;font-weight:800;color:var(--grey);transition:background .15s,border-color .15s,color .15s}
.hm-pop-sizes button:hover{border-color:#DCE8F8;color:var(--ink)}
.hm-pop-sizes button.on{background:#F0F5FD;border-color:#BBD3F5;color:var(--ink)}
.hm-pop-bar{display:flex;gap:2px;width:100%;height:8px;border-radius:3px;background:#EEF0F3;overflow:hidden}
.hm-pop-bar i{display:block;height:100%;border-radius:3px;background:#9DBDEB}
.hm-pop-sizes button.on .hm-pop-bar i{background:#5B8FD9}
.hm-pop-bar.auto{background:none}
.hm-pop-bar.auto i{flex:1;background:#D5E3F6}
.hm-pop-add{display:flex;flex-direction:column;gap:2px;padding-top:6px}
.hm-pop-add button{display:flex;align-items:center;gap:11px;width:100%;padding:8px;border:0;border-radius:12px;background:none;text-align:left;transition:background .15s}
.hm-pop-add button:hover{background:#F0F5FD}
.hm-pop-add button>span:not(.hm-tile){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hm-pop-add b{font-size:13px;font-weight:800;color:var(--ink)}
.hm-pop-add small{font-size:11.5px;line-height:1.4;color:var(--grey-2)}
.hm-pop-add button>i{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--stroke);background:#fff;color:var(--grey);font-style:normal;transition:color .15s,border-color .15s}
.hm-pop-add button:hover>i{color:var(--ink);border-color:#BBD3F5}
.hm-pop-none{display:flex;align-items:center;gap:8px;padding:14px 4px 6px;font-size:12.5px;font-weight:700;color:var(--grey-2)}
.hm-pop-none svg{color:#12B26E}
@media (max-width:820px){
    .hm-edbar{left:50%;bottom:12px;padding-left:12px;gap:2px}
    .hm-edbar-t small{display:none}
    .hm-edbar-b{padding:0 10px}
    .hm-cust span{display:none}
}
@media (prefers-reduced-motion:reduce){
    .hm-edbar,.hm-pop,.hm-ed{transition:none}
    .hm-b-new>.hm-ed{animation:none}
}

/* ---------- Granular settings: the controls (home_edit.js hmEdRow) ---------- */
.hm-pop{width:368px}
.hm-pop-sec{margin:14px 2px 0;padding-top:12px;border-top:1px solid var(--stroke);font-size:11px;font-weight:900;letter-spacing:.02em;color:var(--ink)}
.hm-pop-h+.hm-pop-sec{margin-top:4px;padding-top:6px;border-top:0}
.hm-pop-l{display:flex;align-items:center;gap:6px}
.hm-pop-l em{font-style:normal;font-weight:800;letter-spacing:0;text-transform:none;color:#2F6FD0}
.hm-pop-all{margin-left:auto;display:inline-flex;gap:2px}
.hm-pop-all button{height:20px;padding:0 7px;border:0;border-radius:6px;background:none;font-size:10.5px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--grey-2)}
.hm-pop-all button:hover{background:#F0F5FD;color:var(--ink)}
.hm-pop-seg.wrap{flex-wrap:wrap}
.hm-pop-seg.wrap button{flex:1 1 calc(50% - 2px)}
/* a switch row: label left, the switch right */
.hm-pop-r.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 2px}
.hm-pop-r.sw .hm-pop-l{margin:0;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--grey)}
.hm-pop-sw{position:relative;flex-shrink:0;width:34px;height:20px;padding:0;border:0;border-radius:999px;background:#DADDE3;transition:background .18s}
.hm-pop-sw i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(7,9,22,.2);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.hm-pop-sw.on{background:#2F6FD0}
.hm-pop-sw.on i{transform:translateX(14px)}
.hm-pop-sw:focus-visible{outline:none;box-shadow:0 0 0 3px #DCE8F8}
.hm-pop-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--stroke);font-size:11.5px;color:var(--grey-2)}
.hm-pop-f button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:0;border-radius:8px;background:none;font-size:12px;font-weight:800;color:var(--grey)}
.hm-pop-f button:hover{background:#F0F5FD;color:var(--ink)}
.hm-pop-f svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.hm-pop-sw,.hm-pop-sw i{transition:none}}

/* ---------- Granular settings: what they change on the page ---------- */
/* Your week: the daily target as a dashed line across the bars */
.hm-bars{position:relative}
.hm-bars-t{position:absolute;left:-4px;right:-4px;height:0;border-top:1.5px dashed #9DBDEB;pointer-events:none}
.hm-bars.bare .hm-bar{gap:0}
/* Start something: small buttons, and buttons without labels */
.hm-acts.small{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 2px}
.hm-acts.small .hm-act i{width:36px;height:36px}
.hm-acts.small .hm-act i svg{width:15px;height:15px}
.hm-acts.small .hm-act span{font-size:11px}
.hm-acts.bare{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px 4px}
/* Needs you: one-line rows, rows without the tick */
.hm-list.one .hm-row{min-height:42px}
.hm-item.no-tick .hm-row{padding-right:12px}
.hm-item.no-tick .hm-go{display:block}
/* Greeting hidden: the eyebrow alone */
.hm-hero.no-hello .hm-eyebrow{margin-bottom:0}
/* 12-hour clock */
.hm-hm u{margin-left:4px;text-decoration:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}
/* a card without its number starts with its list */
.hm-p>.hm-p-h+.hm-p-v{margin-top:0;padding-top:14px}
.hm-p>.hm-p-h+.hm-p-f{margin-top:14px}

/* Next interviews at the foot of the Recruitment card (hmIvMini) */
.hm-ivm{margin-top:12px;padding-top:10px;border-top:1px solid var(--stroke,#E4E6E7)}
.hm-ivm-k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3,#94969E);margin-bottom:4px}
.hm-ivm-k span{color:var(--fg2,#4F5158);letter-spacing:0}
.hm-ivm-r{display:flex;align-items:center;gap:10px;padding:5px 6px;margin:0 -6px;border-radius:8px;cursor:pointer}
.hm-ivm-r:hover{background:var(--hover,#F5F5F5)}
.hm-ivm-d{flex:none;width:92px;display:flex;justify-content:space-between;gap:6px;font-size:12px;font-weight:600;color:var(--fg2,#4F5158)}
.hm-ivm-d b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-ivm-d.now{color:var(--red-acc,#EB1414)}
.hm-ivm-n{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-ivm-you{flex:none;font-size:10.5px;font-weight:800;color:var(--red-acc,#EB1414);background:rgba(253,0,36,.07);border-radius:999px;padding:1px 7px}

/* ---------- Drive block (hm-dv-*): rows like "Jump back in", glyphs from static/drive_icons.js ---------- */
.hm [data-m="drive"]{--m:#2F6FD6;--m-bg:#EAF2FD}
.hm-dv{padding-bottom:10px}
.hm-dv .hm-head{padding-bottom:4px}
.hm-dv-k{font-size:12px;font-weight:700;color:var(--grey-2)}
.hm .hm-dv-all{margin-left:auto;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--grey-2)}
.hm .hm-dv-all:hover,.hm .hm-dv-all:focus-visible{background:var(--bg);color:var(--ink);outline:none}
.hm-dv-list{padding:0 8px}
.hm-dv-list .hm-row{min-height:44px;padding:6px 10px;gap:10px}
.hm-dv-list .hm-row-t{font-size:13.5px}
.hm-dv-list .hm-row-m{display:flex;align-items:center;gap:6px;font-size:12px}
.hm-dv-list .hm-row-m > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-dv-ico{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--grey-2)}
.hm-dv-ico svg{display:block;margin:auto;width:22px;height:22px;max-width:28px;max-height:28px}
.hm-dv-face{flex-shrink:0;width:16px;height:16px;border-radius:50%;object-fit:cover}
.hm-dv-empty{padding:8px 20px 8px;font-size:12.5px;line-height:1.5;color:var(--grey-2)}
.hm .hm-dv-more{display:block;margin:2px 18px 0;font-size:12px;font-weight:700;color:var(--grey-2)}
.hm .hm-dv-more:hover{color:var(--ink)}