/* 喵的，又要上班了 v4 班表 extras (assets/meow-v4-share.js): 分享班表圖片 page, 多選 grid, the batch bar and its toast.
   Tokens come from assets/meow-v4.css. */

/* ── 分享 button in the 班表 header, 多選 in the month row ── */
.v4-sq.v4sh-sq{font-size:20px}
.v4-month .v4ms-toggle{height:32px;padding:0 12px;border-radius:10px;font-size:13px;letter-spacing:.08em}
.v4-month .v4ms-toggle::before{border-radius:7px}

/* ── 分享班表 page ── */
.v4sh-preview{padding:14px;align-items:center}
.v4sh-frame{display:flex;justify-content:center;align-items:center;width:100%;min-height:240px}
.v4sh-img{display:block;width:100%;max-width:320px;height:auto;border-radius:12px;border:1px solid var(--v4-tile-line);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.v4sh-actions .v4-btn{min-width:0}
.v4sh-wait{margin:0;font-size:13px;line-height:20px;font-weight:700;color:var(--v4-muted)}
.v4-sub-body [data-sh="share"] .v4-ic{font-size:18px}
.v4sh-note{text-align:center}

/* ── 多選 grid: picked days get a brown ring and a red tick on the corner ── */
.v4-cal.v4ms-on .v4-cell{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.v4-cal.v4ms-on .v4-cell.msel{background:var(--v4-tile);box-shadow:inset 0 0 0 2px var(--v4-brown);z-index:2}
.v4-cal.v4ms-on .v4-cell.msel::after{content:"";position:absolute;top:-4px;right:-3px;width:16px;height:16px;border-radius:50%;border:1.5px solid #fff7ec;box-sizing:border-box;pointer-events:none;
  background:#bb453d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.6' fill='none' stroke='%23fff7ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 1px 3px rgba(59,36,23,.35)}
.v4-cal.v4ms-on .v4-cell.today.msel{background:var(--v4-leather-red);box-shadow:0 0 0 2px var(--v4-ink),0 4px 8px rgba(127,36,28,.22)}
.v4ms-hint{margin:0;padding:0 6px;font-size:13px;line-height:20px;font-weight:700;color:var(--v4-sub);text-align:center}

/* ── The batch bar takes the bottom nav's place while choosing days ── */
html.v4.v4ms-open .bottom-nav,html.v4.v4ms-open #meowAssistantFab{display:none!important}
html.v4.v4ms-open #v4-calendar{padding-bottom:calc(200px + var(--v4-safe-bottom))}
.v4ms-bar{position:fixed;left:max(calc(var(--v4-safe-left) + 16px),calc(var(--v4-safe-left) + (100% - var(--v4-safe-left) - var(--v4-safe-right))/2 - 214px));width:calc(min(100vw - var(--v4-safe-left) - var(--v4-safe-right),460px) - 32px);bottom:max(14px,calc(var(--v4-safe-bottom) - 8px));z-index:42;box-sizing:border-box;
  display:flex;flex-direction:column;gap:8px;padding:11px 12px 12px;border-radius:20px;background:var(--v4-card);border:1.25px solid var(--v4-card-line);
  box-shadow:var(--v4-shadow-float);font-family:var(--v4-sans);color:var(--v4-ink)}
.v4ms-bar::before{content:"";position:absolute;inset:3.25px;border:1px dashed var(--v4-stitch);border-radius:16px;pointer-events:none}
.v4ms-bar[hidden],html.v4-sub-open .v4ms-bar{display:none}
.v4ms-bar *{box-sizing:border-box}
:where(.v4ms-bar) button{font:inherit;-webkit-tap-highlight-color:transparent}
.v4ms-top{position:relative;display:flex;align-items:center;gap:12px;min-height:36px;padding-left:4px}
.v4ms-count{flex:1;min-width:0;font-family:var(--v4-serif);font-weight:900;font-size:16px;line-height:22px;letter-spacing:.04em;color:var(--v4-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4ms-count em{font-style:normal;color:var(--v4-red)}
.v4ms-link{flex:none;background:none;border:0;padding:6px 0;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-red-text);cursor:pointer;white-space:nowrap}
.v4ms-done{flex:none;height:36px;width:72px;border-radius:11px;font-size:14px}
.v4ms-done::before{border-radius:8px}
.v4ms-row{position:relative;display:grid;gap:6px}
.v4ms-choice{min-width:0;height:40px;padding:0 4px;border-radius:11px;border:1px solid var(--v4-tile-line);background:var(--v4-tile);color:var(--v4-sub);font-size:14px;line-height:18px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4ms-choice.early{background:var(--v4-early-bg);border-color:var(--v4-early-line);color:var(--v4-early-ink)}
.v4ms-choice.middle{background:var(--v4-middle-bg);border-color:var(--v4-middle-line);color:var(--v4-middle-ink)}
.v4ms-choice.night{background:var(--v4-night-bg);border-color:var(--v4-night-line);color:var(--v4-night-ink)}
.v4ms-choice.work{background:var(--v4-work-bg,var(--v4-early-bg));border-color:var(--v4-work-line,var(--v4-early-line));color:var(--v4-work-ink,var(--v4-early-ink))}
.v4ms-choice.off{background:var(--v4-off-bg);border-color:var(--v4-off-line);color:var(--v4-off-ink)}
.v4ms-choice.leave{background:var(--v4-leave-bg);border-color:var(--v4-leave-line);color:var(--v4-leave-ink)}
.v4ms-choice.reset{background:var(--v4-input);border-style:dashed;border-color:var(--v4-switch-line);color:var(--v4-sub);font-size:13px;padding:0 2px;text-overflow:clip}
.v4ms-choice:active:not([disabled]){transform:translateY(1px)}
.v4ms-choice[disabled]{opacity:.45;cursor:default}

/* ── Toast with 復原, above the bar (or above the bottom nav after 完成) ── */
.v4ms-toast{position:fixed;left:50%;bottom:calc(96px + var(--v4-safe-bottom,0px));z-index:72;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 40px);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;padding:9px 10px 9px 16px;border-radius:12px;background:var(--v4-toast-bg);color:var(--v4-toast-ink);
  font-family:var(--v4-sans);font-size:14px;line-height:20px;font-weight:700;box-shadow:0 8px 20px rgba(59,36,23,.28)}
.v4ms-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.v4ms-toast span{min-width:0}
.v4ms-toast button{flex:none;height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--v4-toast-btn-line);background:var(--v4-toast-btn-bg);color:var(--v4-toast-act);font:inherit;font-weight:900;cursor:pointer}
.v4ms-toast:not(:has(button)){padding-right:16px}
html.v4.v4ms-open .v4ms-toast{bottom:calc(180px + var(--v4-safe-bottom,0px))}