/* appointment-move.css -- session 411 (mh-appointments-mockups-v2 8-list-move-date.html, 9-appointment-move.html, 10-card-quick-move.html, and the status
   menu of 7-list-status-menu.html): the drawings' stylesheets, copied as named classes on the tokens in tokens.css (--mv-*, --cln-*, --apl-*). */
/* the list: the Service date is a button like the Time; open it tints navy */
.mv-date .apl-cname{font-weight:800}
.mv-date.on{background:var(--cln-navy-tint);color:var(--cln-navy);text-decoration:underline;text-underline-offset:3px}
.mv-pop1{width:var(--mv-pop1-w);left:-14px;gap:12px}
.mv-pop2{width:var(--mv-pop2-w);left:-14px;gap:12px}
.mv-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mv-day{border:0;font:inherit;border-radius:10px;padding:7px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;min-height:64px;box-sizing:border-box}
.mv-day i{font-style:normal;font-size:11px;font-weight:600}
.mv-day b{font-size:17px;font-weight:800;letter-spacing:-0.02em}
.mv-day small{font-size:10.5px;font-weight:600;line-height:1.2;text-align:center}
.mv-day.past{background:var(--apl-bg);color:var(--apl-faint);cursor:default}
.mv-day.fit{background:var(--apl-green-tint);color:var(--apl-on-green)}
.mv-day.due{background:var(--apl-yellow-tint);color:var(--apl-on-yellow)}
.mv-day.guest{background:var(--mv-guest-stripe);color:var(--apl-on-orange);cursor:default}
.mv-day.sel{background:var(--apl-teal);color:#ffffff}
.mv-day.now{box-shadow:inset 0 0 0 2px var(--apl-yellow)}
.mv-day:not([disabled]):hover{filter:brightness(.97)}
.mv-lg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--apl-text)}
.mv-lg span{display:inline-flex;align-items:center;gap:6px}
.mv-lgr{margin-left:auto}
.mv-sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.mv-sw.fit{background:var(--apl-green-tint)}
.mv-sw.due{background:var(--apl-yellow-tint)}
.mv-sw.guest{background:var(--apl-orange-tint)}
.mv-lbl{font-size:12px;font-weight:700;color:var(--apl-text)}
.mv-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:150px;overflow-y:auto}
.mv-slots3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mv-slot{border:0;font:inherit;font-size:12.5px;font-weight:700;border-radius:8px;padding:8px 0;cursor:pointer;background:var(--apl-s2);color:var(--apl-ink)}
.mv-slot.late{background:var(--apl-orange-tint);color:var(--apl-on-orange)}
.mv-slot.sel{background:var(--apl-teal);color:#ffffff}
.mv-slot[disabled]{background:var(--apl-bg);color:var(--apl-faint);cursor:default}
.mv-slot:not([disabled]):not(.sel):hover{background:#dde2e5}
.mv-chks{display:flex;flex-direction:column;gap:6px}
.mv-chk{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600;line-height:1.45}
.mv-chk svg{flex:none;margin-top:1px}
.mv-held{width:18px;height:18px;border-radius:999px;background:var(--apl-yellow);color:var(--apl-ink);display:inline-flex;align-items:center;justify-content:center;flex:none}
.mv-chips{display:flex;gap:6px;flex-wrap:wrap}
.mv-chip{border:0;font:inherit;font-size:12.5px;font-weight:600;border-radius:999px;padding:6px 11px;cursor:pointer;background:var(--apl-s2);color:var(--apl-ink)}
.mv-chip[aria-pressed="true"]{background:var(--apl-teal);color:#ffffff}
.mv-chip:not([aria-pressed="true"]):hover{background:#dde2e5}
.mv-lk{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--apl-teal-mid);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
/* inside the appointment: the date and time in the hero is a button; the Move this clean panel */
.mv-when{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--mv-when-line);background:var(--mv-when-bg);color:#ffffff;font-family:inherit;font-size:15px;font-weight:700;border-radius:10px;padding:5px 10px 5px 9px;cursor:pointer;box-shadow:var(--mv-when-glow)}
.mv-when:hover{background:rgba(255,255,255,.2)}
.mv-when em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--mh-sky,#a9d4ff);display:inline-flex;align-items:center;gap:4px;border-left:1px solid rgba(255,255,255,.28);padding-left:8px}
.mv-panel{padding:18px 22px 20px;display:flex;flex-direction:column;gap:16px;margin:16px 0}
.mv-ph{display:flex;align-items:center;gap:12px}
.mv-phi{width:38px;height:38px;border-radius:10px;background:var(--cln-navy);display:inline-flex;align-items:center;justify-content:center;flex:none}
.mv-pht{flex:1 1 0%;min-width:0}
.mv-h2{margin:0;font-size:18px;font-weight:800;color:var(--apl-ink);letter-spacing:-0.02em}
.mv-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mv-qk{font-size:12.5px;font-weight:700;color:var(--apl-muted);margin-right:4px}
.mv-qp{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-family:inherit;font-size:13px;font-weight:600;border-radius:999px;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mv-qp small{font-size:11.5px;font-weight:600;color:var(--apl-on-green)}
.mv-qp small.w{color:var(--apl-on-yellow)}
.mv-qp.on{background:var(--apl-teal);border-color:var(--apl-teal);color:#ffffff}
.mv-qp.on small{color:#a8ecd9}
.mv-pgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px 380px;gap:24px;align-items:start}
.mv-h3{font-size:13px;font-weight:800;color:var(--apl-ink);margin:0 0 10px}
.mv-dayhs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:8px}
.mv-dayh{border:0;font-family:inherit;background:transparent;text-align:center;font-size:12px;font-weight:700;color:var(--apl-text);padding:6px 0;border-radius:8px;cursor:pointer}
.mv-dayh b{display:block;font-size:16px;font-weight:800;color:var(--apl-ink)}
.mv-dayh.today{box-shadow:inset 0 0 0 2px var(--apl-yellow)}
.mv-dayh.on{background:var(--apl-teal);color:#ffffff}
.mv-dayh.on b{color:#ffffff}
.mv-dayh[disabled]{color:var(--apl-faint);cursor:default}
.mv-dayh[disabled] b{color:var(--apl-faint)}
.mv-stay{position:relative;height:150px;border-radius:12px;background:var(--mv-stay-grid);overflow:hidden}
.mv-free{position:absolute;top:0;bottom:0;background:var(--mv-free)}
.mv-outbar{position:absolute;left:0;top:14px;height:30px;border-radius:0 8px 8px 0;background:var(--mv-out-bar);color:#ffffff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;box-sizing:border-box;white-space:nowrap;overflow:hidden}
.mv-inbar{position:absolute;right:0;top:14px;height:30px;border-radius:8px 0 0 8px;background:var(--mv-in-bar);color:var(--apl-ink);font-size:11.5px;font-weight:700;display:flex;align-items:center;padding-left:8px;box-sizing:border-box;white-space:nowrap;overflow:hidden}
.mv-freew{position:absolute;top:56px;text-align:center;font-size:12px;font-weight:700;color:var(--apl-on-green)}
.mv-was{position:absolute;top:92px;height:30px;border-radius:8px;border:1.5px dashed var(--cln-navy);color:var(--cln-navy);background:#ffffff;font-size:11.5px;font-weight:700;padding:0 8px;display:flex;align-items:center;box-sizing:border-box;white-space:nowrap}
.mv-new{position:absolute;top:92px;height:30px;border-radius:8px;background:var(--cln-navy);color:#ffffff;font-size:11.5px;font-weight:700;padding:0 8px;display:flex;align-items:center;box-sizing:border-box;white-space:nowrap}
.mv-stayn{margin-top:8px}
.mv-type{display:flex;align-items:center;gap:8px;border:1.5px solid var(--apl-line2);border-radius:10px;padding:8px 10px;margin-top:10px}
.mv-type span{font-size:12.5px;color:var(--apl-muted);font-weight:600}
.mv-type input{border:0;outline:0;font:inherit;font-size:13.5px;flex:1 1 0%;color:var(--apl-ink);min-width:0;background:transparent}
.mv-type:focus-within{border-color:var(--apl-sky)}
.mv-what{background:#f7f9fa;border-radius:12px;padding:12px 16px}
.mv-what .mv-h3{margin-bottom:2px}
.mv-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--cln-head-line);font-size:13px;line-height:1.45;color:var(--apl-text)}
.mv-row b{color:var(--apl-ink)}
.mv-ri{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mv-old{color:var(--apl-faint)}
.mv-tgrow{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--apl-ink);font-weight:600}
.mv-tg{width:36px;height:20px;border-radius:999px;background:var(--apl-line2);position:relative;flex:none;border:0;padding:0;cursor:pointer}
.mv-tg i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:999px;background:#ffffff;transition:left .15s}
.mv-tg[aria-checked="true"]{background:var(--apl-teal)}
.mv-tg[aria-checked="true"] i{left:18px}
.mv-why{padding-top:10px}
.mv-why .mv-lbl{margin-bottom:6px}
.mv-note{margin-top:8px;width:100%;box-sizing:border-box;border:1.5px solid var(--apl-line2);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;color:var(--apl-ink)}
.mv-note:focus{outline:0;border-color:var(--apl-sky)}
.mv-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--cln-head-line);padding-top:14px;flex-wrap:wrap}
/* the Day page card: the time pill is a button (Day page only); its menu over the card */
.mv-tm{border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.mv-tm:hover,.mv-tm.on{box-shadow:var(--mv-pill-ring)}
.mv-cmenu{position:absolute;left:-10px;top:40px;z-index:60;width:var(--mv-card-menu-w);background:#ffffff;border-radius:14px;box-shadow:var(--apl-pop-shadow);padding:8px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;font-family:'Inter','Segoe UI',system-ui,sans-serif;cursor:default;text-align:left}
.mv-cmenu.confirm{gap:6px}
.mv-cmenu .mv-mhd{padding:8px 10px 10px;border-bottom:1px solid var(--apl-panel-line);margin-bottom:4px}
.mv-cmenu .mv-mhd b{display:block;font-size:13.5px;font-weight:800;color:var(--apl-ink)}
.mv-cmenu .mv-mhd small{display:block;font-size:12px;color:var(--apl-muted);margin-top:2px;line-height:1.4}
.mv-cmenu .mv-mi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:var(--apl-ink);padding:8px 10px;border-radius:9px;text-align:left;cursor:pointer;box-sizing:border-box;text-decoration:none}
.mv-cmenu .mv-mi:hover{background:var(--apl-s2)}
.mv-cmenu .mv-mi.mv-mic{cursor:default}
.mv-cmenu .mv-mi.mv-mic:hover{background:transparent}
.mv-cmenu .mv-mi em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--apl-on-green)}
.mv-cmenu .mv-mi em.w{color:var(--apl-on-yellow)}
.mv-cmenu .mv-mi.mv-pick{color:var(--apl-teal-mid);text-decoration:underline;text-underline-offset:2px}
.mv-tms{display:flex;gap:6px;padding:2px 10px 8px;flex-wrap:wrap}
.mv-cmenu .mv-t{border:0;font-family:inherit;font-size:12px;font-weight:700;border-radius:8px;padding:6px 9px;cursor:pointer;background:var(--apl-s2);color:var(--apl-ink)}
.mv-cmenu .mv-t:hover{background:#dde2e5}
.mv-msep{height:1px;background:var(--apl-panel-line);margin:4px 6px}
.mv-cmenu .mv-chk{border-radius:9px;padding:8px 10px;font-size:12px;gap:8px;margin:0 2px;line-height:1.4}
.mv-cmenu .mv-held{width:16px;height:16px}
.mv-cchips{padding:2px 4px}
.mv-cchips .mv-chip{font-size:12px;padding:5px 10px}
.mv-cbtns{display:flex;gap:8px;padding:4px}
.mv-strap{background:var(--apl-yellow-tint);color:var(--apl-on-yellow);font-size:10.5px;font-weight:700;padding:4px 10px;letter-spacing:.02em;text-transform:uppercase}
.mv-when:focus-visible,.mv-day:focus-visible,.mv-slot:focus-visible,.mv-chip:focus-visible,.mv-qp:focus-visible,.mv-dayh:focus-visible,.mv-mi:focus-visible,.mv-t:focus-visible,.mv-tm:focus-visible,.mv-tg:focus-visible{outline:2px solid var(--apl-sky);outline-offset:2px}
@media (max-width:1300px){ .mv-pgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .mv-what{grid-column:1 / -1} }
@media (max-width:760px){
  .mv-pgrid{grid-template-columns:minmax(0,1fr)}
  .mv-pop1,.mv-pop2{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:80vh;overflow-y:auto}
  .mv-panel{padding:16px}
}
/* the list's status menu (7-list-status-menu.html .menu): the square is a button; its menu opens in the name cell */
.apl-sqb{border:0;padding:0;cursor:pointer;font:inherit}
.apl-sqb:hover,.apl-sqb[aria-expanded="true"]{box-shadow:var(--mv-sq-ring)}
.apl-sqb:focus-visible{outline:0;box-shadow:var(--mv-sq-ring)}
.apl-menupop{width:var(--mv-menu-w);padding:8px;gap:0;top:64px;left:4px;border-radius:14px}
.apl-menu{display:flex;flex-direction:column;gap:2px}
.apl-menu .mhd{padding:8px 10px 10px;border-bottom:1px solid var(--apl-panel-line);margin-bottom:4px}
.apl-menu .mhd b{display:block;font-size:14px;font-weight:800;color:var(--apl-ink);letter-spacing:-0.01em}
.apl-menu .mhd small{display:block;font-size:12.5px;color:var(--apl-muted);margin-top:2px;line-height:1.4}
.apl-menu .mi{display:flex;align-items:flex-start;gap:10px;width:100%;border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--apl-ink);padding:9px 10px;border-radius:9px;text-align:left;cursor:pointer;box-sizing:border-box;text-decoration:none}
.apl-menu .mi:hover{background:var(--apl-s2);text-decoration:none;color:var(--apl-ink)}
.apl-menu .mi:focus-visible{outline:2px solid var(--apl-sky);outline-offset:-2px}
.apl-menu .mi svg{flex:none;margin-top:1px}
.apl-menu .mi em{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--apl-muted);margin-top:2px;line-height:1.35}
.apl-menu .mi.red{color:#b3261e}
.apl-menu .mi.red:hover{color:#b3261e}
.apl-menu .mi.off{color:var(--apl-faint);cursor:default}
.apl-menu .mi.off:hover{background:transparent;color:var(--apl-faint)}
.apl-menu .msep{height:1px;background:var(--apl-panel-line);margin:4px 6px}
.apl-cx{display:flex;flex-direction:column;gap:8px;padding:6px 8px 8px}
.apl-cx input{box-sizing:border-box;width:100%;border:1.5px solid var(--apl-line2);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;color:var(--apl-ink)}
.apl-cx input:focus{outline:0;border-color:var(--apl-sky)}
@media (max-width:760px){ .apl-menupop{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:80vh;overflow-y:auto;z-index:300} }
.apl-lift{z-index:80 !important;position:relative}
.mv-date .apl-cname{white-space:nowrap}

.mv-cmenu .mv-chip{font-family:inherit;font-weight:600}
.mv-cmenu .mv-chip[aria-pressed="true"]{background:var(--apl-teal);color:#ffffff}
.mv-cmenu .mv-chk{font-weight:600}
/* inside the list's popovers the list sets every button to font:inherit (.mhapl button, .apl-pop button): the drawing's own type, scoped above it */
.mv-pop1 .mv-slot{font-size:12.5px;font-weight:700}
.mv-pop1 .mv-lk,.mv-pop2 .mv-lk{font-size:12.5px;font-weight:700}
.mv-pop2 .mv-chip{font-size:12.5px;font-weight:600}
.mv-date.apl-cbtn{font-size:13.5px;font-weight:800}