/* packcal — 样式。配色沿用好日历（米色底、暖白卡片、绿色页头）。无构建步骤。 */
:root {
  --green-900: #22382c;
  --green-700: #2f7d3b;
  --green-600: #3b9147;
  --green-500: #8aa98c;
  --green-200: #dfe9d6;
  --green-100: #edf2e5;
  --green-50: #f2f5ec;
  --red: #cf4a33;
  --red-bg: #fcefea;
  --orange: #dc5a22;
  --blue: #2563a8;
  --blue-bg: #eaf2fc;
  --ink: #1c2a25;
  --ink-2: #4a5550;
  --muted: #767b78;
  --line: #e9e7de;
  --bg: #f2f0e9;
  --card: #fefdf9;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(70, 60, 40, .05), 0 4px 16px rgba(70, 60, 40, .05);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg); }
a { color: var(--green-700); }
h1, h2, h3 { margin: 0; }
button, input, select, textarea { font: inherit; }
.muted { color: var(--muted); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.page { padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 18px; }
.page.narrow { max-width: 520px; }
.hidden { display: none !important; }
.inline { display: inline; }

/* ---------------------------------------------------------------- 页头 / 页脚 */
.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 16px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(160deg, #52a85d, #2f7d3b); color: #fff; font-weight: 700; font-size: 19px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: .3px; white-space: nowrap; }
/* 2026-10-30 页头加了时间条，放不下这句了（时间条要 840px 左右，页头一共 1068px） */
.brand-tag { display: none; font-size: 12px; color: var(--muted); }
/* 页头的时间（参照好日历的时间条，2026-10-30）：本地时间 + 别的城市，从本地往东排。放不下时城市那段可以左右滑 */
.clockbar { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; padding: 5px 6px 5px 12px; border-radius: 8px; background: #245f2f; color: #e8f5e9; font-size: 13px; line-height: 1.4; }
.clockbar[hidden] { display: none; }
.local-clock { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; flex: none; }
.lc-label { opacity: .8; }
.lc-time { font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.lc-offset { opacity: .75; font-size: 11px; }
.world-clocks { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.world-clocks::-webkit-scrollbar { display: none; }
.world-clocks li { white-space: nowrap; font-variant-numeric: tabular-nums; }
.world-clocks .wc-time { color: #fff; font-weight: 600; margin: 0 3px 0 4px; }
.world-clocks .wc-off { opacity: .7; font-size: 11px; }
.world-clocks .wc-am, .wt-time .wc-am { font-size: .78em; font-weight: 500; margin-left: 1px; opacity: .85; }
.world-clocks.more { mask-image: linear-gradient(90deg, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); }
.wc-more { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 24px; padding: 0 6px 0 8px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
.wc-more[hidden] { display: none; }
.wc-more-arrow { font-size: 16px; line-height: 1; }
.wc-more:hover { background: rgba(255, 255, 255, .25); }
/* "更多"弹出的世界时间 */
#dlg-world { width: min(520px, calc(100vw - 24px)); }
.wt-list { column-count: 2; column-gap: 24px; margin: 4px 0 0; padding: 0; list-style: none; } /* 先读完左列再读右列，从西到东的顺序不乱 */
.wt-list li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; break-inside: avoid; }
.wt-list li.here { background: var(--green-50); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.wt-city { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-time .wc-am { color: var(--muted); opacity: 1; }
.wt-time small { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--orange); }
.wt-diff { flex: none; min-width: 3.2em; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wt-hint { margin: 10px 0 0; font-size: 12px; }
/* 页头不到 1040 宽就放不下城市的时区：只留"纽约 22:12"（时间条全显示要 760px 左右） */
@media (max-width: 1039px) {
  .world-clocks .wc-off { display: none; }
}
.lang-switch { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.lang-switch a { color: var(--muted); text-decoration: none; padding: 2px 6px; border-radius: 6px; font-weight: 600; }
.lang-switch a.on { color: #fff; background: var(--green-700); }

/* ---------------------------------------------------------------- 通用 */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2, .h2 { font-size: 18px; }
.card-sub { color: var(--muted); font-size: 13px; display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-sub .hol { color: var(--red); }
.pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; background: var(--green-700); color: #fff; }
.btn { display: inline-block; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--green-700); background: var(--green-700); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.4; }
.btn:hover { background: var(--green-600); border-color: var(--green-600); }
.btn-ghost { background: transparent; color: var(--green-700); }
.btn-ghost:hover { background: var(--green-50); color: var(--green-700); }
.btn-small { padding: 4px 12px; font-size: 13px; }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--green-700); font-size: inherit; }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--red); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.flash { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--green-100); color: var(--green-900); border: 1px solid var(--green-200);
  overflow: hidden; transition: opacity .3s ease, height .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease; }
/* app.js 2 秒后加 .gone：淡出、收起，连同下面那段间距（.page 的 gap 18px，手机 14px）一起收，内容不会最后跳一下 */
.flash.gone { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: -18px; }

/* 组织名一行
   2026-10-31 用户：间距太大 ——「Pack 4526」离上面 15px，介绍离上 10px、离下 15px。说的是看得见的字到字、字到边的距离：
   字体本身上下自带留白（26px 的标题字顶上空 7px、字底下空 6px；15px 的介绍字顶上空 6px、字底下空 4px），下面的数都把它算进去了：
   上 8 + 7 = 15；标题下 6 + 介绍上 6 - 2 = 10；介绍下 4 + 页面块间距 18 - 7 = 15。改字号、行高要重新量（scratchpad 里的 measure.js 那种量法） */
.org-page { padding-top: 8px; }
.org-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: -7px; }
.org-name { font-size: 26px; line-height: 1.25; }
.org-name .h-sub { font-size: 16px; font-weight: 500; }
.org-intro { margin: -2px 0 0; color: var(--ink-2); }
/* min-width: 0 / max-width: 100%：标题这一块不许比屏幕宽（小屏上 .org-head 竖排，长介绍会把 ✎ 顶出屏幕） */
.org-head-text { flex: 1 1 auto; min-width: 0; max-width: 100%; }
/* align-items: center：里面的东西高矮不一时上下居中 */
.org-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------------------------------------------------------------- 月历 */
.cal { padding: 0; overflow: hidden; }
.cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(180deg, #52a85d, #2f7d3b); color: #fff; }
.cal-title { font-size: 18px; font-weight: 700; color: #fff; min-width: 7em; text-align: center; }
.tb-arrow { display: grid; place-items: center; width: 32px; height: 34px; color: #fff; font-size: 26px; line-height: 1; text-decoration: none; border-radius: 6px; }
.tb-arrow:hover { background: rgba(255, 255, 255, .15); }
.tb-arrow:not([href]) { opacity: .35; pointer-events: none; }
.tb-today { margin-left: auto; padding: 4px 14px; border-radius: 6px; color: #fff; text-decoration: none; font-weight: 600; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); }
.tb-today:hover { background: rgba(255, 255, 255, .28); }
/* 假期下拉框（2026-11-01，代替原来的"中国假期"勾）：和"今天"一起靠右，比它更淡一点，样子和原来那个勾一样。
   自己画右边的小箭头（浏览器自带的是黑的）；展开的选项是浏览器的白底，字要改回深色 */
.tb-hol-form { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; }
.tb-hol { -webkit-appearance: none; appearance: none; margin: 0; padding: 4px 26px 4px 10px; border-radius: 6px; color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  line-height: 1.3; background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px;
  border: 1px solid rgba(255, 255, 255, .3); cursor: pointer; white-space: nowrap; }
.tb-hol:hover { background-color: rgba(255, 255, 255, .18); }
.tb-hol:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tb-hol option { color: var(--ink, #222); background: #fff; font-weight: 400; }
.tb-hol-go { padding: 3px 8px; border-radius: 6px; color: #fff; font: inherit; font-size: 12px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); cursor: pointer; }
.tb-hol-form + .tb-today { margin-left: 0; }
/* 加了假期之后工具栏挤：按钮和箭头都不许被压扁（"今天"会折成两行） */
.tb-arrow, .tb-today { flex: none; }
.tb-today { white-space: nowrap; }
.cal-grid { padding: 0 10px 10px; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--green-100); margin: 0 -10px 6px; padding: 7px 10px; text-align: center; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.cal-head .weekend { color: var(--orange); }
.wd-short { display: none; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; }
.cell { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 86px; padding: 5px 6px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.cell:hover { border-color: var(--green-500); box-shadow: 0 2px 8px rgba(75, 117, 86, .12); }
.cell .num { font-size: 15px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cell .sub { font-size: 11px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .sub .k-hol, .cell .sub .k-fest { color: var(--ink-2); font-weight: 400; }
.cell .sub .k-month { color: var(--orange); }
.cell.weekend .num { color: var(--orange); }
.cell.out { opacity: .4; }
/* 2026-10-30 用户：日历上活动不显眼，反倒是老兵节、感恩节（整格浅蓝）更亮。
   节假日只留一行小字（和农历一样，不加粗、不涂底色）；有活动的那天整格淡绿、活动条更大更粗。 */
.cell.has-ev { background: #eef6ea; border-color: #b5d6b0; }
/* 中国的放假安排（2026-10-30 用户：仿照好日历，但不要显眼）：好日历是整格粉底 + 红底白字的"休"，
   这里只在右上角放一个淡色小字，不涂底色、不加底框，活动永远是格子里最显眼的 */
/* 格子第一行：日期数字 + 中国的"休 / 班"（2026-10-30 右上角让给了天气，"休 / 班"挪到数字右边） */
.cell-top { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
.hol-mark { font-size: 10.5px; line-height: 1; color: #c48a7b; }
.hol-mark.hol-work { color: #9aa19d; }
.card-sub .hol.hol-work { color: var(--muted); }
.cell.has-ev:hover { border-color: var(--green-600); }
.cell.today { background: #c8e6c4; border-color: #3b9147; }
.cell.today .num { color: #1d4d26; }
.cell.today .num::after { content: "•"; margin-left: 3px; color: var(--green-700); }
.cell.selected { border-color: var(--green-600); box-shadow: inset 0 0 0 2px var(--green-600); }
/* 已经过去的（2026-10-31 用户：过了的活动不要再显示浓绿色，可以考虑灰色）：格子不再绿底，活动条浅灰底深灰字。
   选中的那一格照样是绿框；取消了的照样有删除线 */
.cell.past.has-ev { background: #f5f4f0; border-color: #e2dfd6; }
.cell.past.has-ev:hover { border-color: #c4c0b5; }
.cell.past.has-ev.selected { border-color: var(--green-600); }
.cell .chip.past, .cell .chip.past.st-open, .cell .chip.past.st-closed { background: #e4e3dd; color: #59615c; box-shadow: none; }
.chip.tbd.past { background: #f1f0eb; border-color: #d9d6cc; color: #6b706c; }
.chips { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.chip { display: block; padding: 3px 7px; border-radius: 5px; background: var(--green-700); color: #fff; font-size: 12.5px; line-height: 1.35; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(31, 77, 38, .25); }
/* 报名中：橙色，提醒去报名。报名已截止：活动照常办，还是绿色（以前的灰色看着像没这回事），只是淡一点 */
.chip.st-open { background: var(--orange); box-shadow: 0 1px 2px rgba(150, 60, 20, .3); }
.chip.st-closed { background: #4f8a59; }
.chip.st-cancelled { background: #dcd9d0; color: #5d6670; text-decoration: line-through; font-weight: 500; box-shadow: none; }
.chip.more { background: var(--green-100); color: var(--green-900); font-weight: 600; box-shadow: none; }
/* 长活动名称在月历内换行；不影响底部的待定标签和新增按钮。 */
/* 上下留白用透明边框，不用 padding（2026-10-31 手机检查）：overflow 只裁到 padding 外沿，截断后下一行的头会从下边的 padding 里露出一条；
   边框里不画内容，背景色照样铺满。纯英文的活动名带 lang="en"（calendar.html），hyphens 让长单词按音节断、加连字符 */
.cell .chip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; max-width: 100%; padding: 0 7px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; font-size: 13px; white-space: normal; overflow-wrap: anywhere;
  -webkit-hyphens: auto; hyphens: auto; }
.cell .chip.st-closed { background: #477b50; }
.cell .chip.more { display: block; padding: 2px 5px; border: 0; background: transparent; font-size: 11px; }
.chip.tbd { display: inline-block; background: #fff3e4; color: #9b5630; border: 1px dashed #e7b98f; box-shadow: none; }
.cal-tbd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px 12px; border-top: 1px dashed var(--line); font-size: 13px; }
.tbd-label { color: var(--muted); margin-right: 4px; }
.cal-tbd a.chip { text-decoration: none; }
.cal-tbd a.chip.tbd:hover { border-style: solid; }
.chip.tbd-add { display: inline-block; background: transparent; color: var(--green-700); border: 1px dashed var(--green-200); font-weight: 600; box-shadow: none; }
.chip.tbd-add:hover { background: var(--green-50); }

/* ---------------------------------------------------------------- 日程列表 */
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; padding-top: 0; }
.ev.past { opacity: .6; }
.ev-date { flex: none; width: 92px; display: flex; flex-direction: column; text-decoration: none; color: var(--green-700); font-weight: 600; line-height: 1.3; }
.ev-wd { font-size: 12px; color: var(--muted); font-weight: 500; }
.ev-main { min-width: 0; flex: 1; }
.ev-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ev-title { font-weight: 700; font-size: 16px; }
.ev.st-cancelled .ev-title { text-decoration: line-through; color: var(--muted); }
.ev-time { color: var(--ink-2); }
.badge { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; background: var(--green-100); color: var(--green-900); }
.badge.st-open { background: #fff3e4; color: #9b5630; }
.badge.st-closed { background: #eeede8; color: #5d6670; }
.badge.st-cancelled { background: var(--red-bg); color: var(--red); }
.ev-details { margin-top: 3px; color: var(--ink-2); font-size: 14px; word-break: break-word; }
/* 详情、图片可以收起（2026-10-31 用户：每条活动加 hide / show，箭头放右边）：标题这一行就是开关，箭头在最右边，
   收起时朝下（点了展开），展开时朝上。浏览器自带的小三角藏掉 */
.ev-more > summary { display: flex; align-items: flex-start; gap: 8px; list-style: none; cursor: pointer; border-radius: 6px; }
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary::marker { content: ""; }
.ev-more > summary > .ev-title-row { flex: 1; min-width: 0; }
.ev-more > summary:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.ev-arrow { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; color: var(--muted); }
.ev-arrow::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.ev-more[open] .ev-arrow::before { transform: translateY(2px) rotate(-135deg); }
.ev-more > summary:hover .ev-arrow { background: var(--green-50); color: var(--green-700); }
@media (prefers-reduced-motion: reduce) { .ev-arrow::before { transition: none; } }
.ev-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13px; }
.ev-deadline { color: var(--orange); }

/* 工具行：订阅 / 分享 */
.tools { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.tool summary { padding: 6px 0; cursor: pointer; color: var(--green-700); font-weight: 600; }
.tool p { margin: 6px 0 0; }
.copy-row { display: flex; gap: 8px; align-items: center; max-width: 560px; }
.copy-row input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-2); font-size: 14px; }

/* ---------------------------------------------------------------- 首页 */
.hero { padding: 8px 0 0; }
.hero h1 { font-size: 30px; line-height: 1.25; }

/* ---------------------------------------------------------------- 表单 */
.form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.form label > span { font-weight: 600; color: var(--ink-2); }
.form label small { color: var(--muted); font-size: 12px; }
/* 组织名称能不能用（边打边查）：空的时候不占地方 */
.form label small.field-msg:empty { display: none; }
.form label small.field-msg.ok { color: var(--green-700); font-weight: 600; }
.form label small.field-msg.ok::before { content: "✓ "; }
.form label small.field-msg.taken, .form label small.field-msg.bad { color: var(--red); }
.form input[type=text], .form input[type=password], .form input[type=url], .form input[type=email], .form input[type=date], .form input[type=month], .form input[type=time], .form select, .form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d9d6cc; border-radius: 8px; background: #fff; color: var(--ink); font-size: 16px; /* 16px：iPhone 点进输入框不放大 */
}
.form textarea { resize: vertical; }
/* ⚠️ 它是 label 下面直接的 span，会吃到 .form label > span 的粗体和颜色，这里改回来（不然占位的 pack452 像是填好了的） */
.form label > .url-field { font-weight: 400; color: var(--ink); }
/* 网址前缀是输入框左边的普通文字，不在框里（2026-10-30 用户：http://www.packcal.org/ 不要放在 textfield 里） */
.url-field { display: flex; align-items: center; gap: 6px; }
.url-prefix { color: var(--ink-2); font-size: 16px; white-space: nowrap; user-select: none; }
.form .url-field input[type=text] { flex: 1; min-width: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: var(--green-500); }
.form label.check { flex-direction: row; align-items: center; gap: 8px; }
.form label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-700); }
.form label.f-every { flex-wrap: wrap; row-gap: 2px; }
.form label > .time-range { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.time-range input { flex: 1 1 0; min-width: 0; }
.time-dash { color: var(--muted); }
.form label.f-every small { flex-basis: 100%; padding-left: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .span2 { grid-column: 1 / -1; }
/* 报名截止日一整行，日期框还是半宽 */
.form label.f-deadline input { max-width: calc(50% - 9px); }
.form label.f-deadline small { line-height: 1.45; }
@media (max-width: 640px) { .form label.f-deadline input { max-width: none; } }
/* 修改活动时才有的"取消活动 / 恢复活动"：靠右，和"保存 / 取消"分开。.btn 的 display 会盖过 hidden，这里补上 */
.form-actions .ev-cancel, .form-actions .ev-restore { margin-left: auto; }
.form-actions [hidden] { display: none; }
/* "已恢复上次没保存的草稿 · 丢弃"（app.js 加在活动表单最上面） */
.draft-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 12px; border-radius: 8px;
  background: #fff6e8; border: 1px solid #f1d7b3; color: #8a5a2b; font-size: 13px; }
.draft-note[hidden] { display: none; }
.draft-note .link-btn { color: var(--red); font-weight: 600; }
/* 管理模式过期（2026-10-30）：比草稿提示更显眼，因为现在保存不了 */
.expired-note { grid-column: 1 / -1; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; border: 1px solid #f3c2b8;
  color: #8a2a17; font-size: 14px; line-height: 1.7; }
.expired-note[hidden] { display: none; }
.expired-note .btn { margin: 0 4px; vertical-align: baseline; }
/* 登录框上的"管理模式已经过期，请重新登录" */
.login-expired { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #fff6e5; border: 1px solid #f1d9a8; color: #7a5a2a; font-size: 13px; line-height: 1.6; }
.btn-danger { color: var(--red); border-color: #f3c9bf; }
.btn-danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.form-actions { display: flex; gap: 10px; align-items: center; margin: 4px 0 0; }
.form-error { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--red-bg); color: var(--red); border: 1px solid #f3c9bf;
  overflow: hidden; transition: opacity .35s ease, height .35s ease, padding .35s ease, margin .35s ease, border-width .35s ease; }
/* 5 秒后消失（notice.js） */
.form-error.gone { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: 0; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .form-error { transition: none; } }
.form p { margin: 0 0 8px; }

/* ---------------------------------------------------------------- 管理模式（长在日历页上） */
.cal-hint { margin: 0; padding: 7px 14px; background: var(--green-50); border-bottom: 1px solid var(--line); color: var(--green-900); font-size: 13px; }
/* 管理模式下格子是"可编辑"的，给个明确的手势和描边提示 */
.cal.editing .cell { cursor: pointer; }
.cal.editing .cell:hover { border-color: var(--green-600); box-shadow: 0 2px 10px rgba(47, 125, 59, .18); }
.head-act { margin-left: auto; }
.admin-card { border: 1px solid var(--green-200); }
/* 名字 / 一句话介绍：管理员点一下就改（2026-10-29 用户："点击日历名字就可以进行修改"）。
   输入框长得和标题一样，鼠标移上去出虚线、点进去变白底实线。宽度由 app.js 按字宽定；
   没有脚本时就是一个固定宽度的框，保存 / 取消一直显示，回车照样提交。 */
.org-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.org-edit .org-name, .org-edit .org-intro { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
/* 和访客看到的一样：标题字底到介绍字顶 10px（2026-10-31 用户，见上面"组织名一行"） */
.org-edit-intro { margin-top: -2px; }
.edit-field { position: relative; display: flex; align-items: center; max-width: 100%; cursor: text; }
/* 上下 margin -1px：抵掉 1px 的边框（平时透明，指上去才显出来），不然管理员看到的标题、介绍各往下多 1px，和访客的不一样 */
.edit-field input { flex: 0 1 auto; width: 14em; min-width: 3em; max-width: 100%; margin: -1px 0 -1px -5px; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; outline: none; text-overflow: ellipsis; }
.edit-field:hover input { border-color: var(--green-500); border-style: dashed; }
.edit-field input:focus { border-color: var(--green-600); border-style: solid; background: #fff; box-shadow: 0 0 0 3px var(--green-100); }
.edit-field input::placeholder { color: var(--muted); }
.pen { flex: none; margin-left: 4px; color: var(--muted); font-size: .72em; font-weight: 400; pointer-events: none; }
.edit-field:focus-within .pen, .org-edit.dirty .pen { visibility: hidden; }
/* 量字宽用的影子，和输入框同字体，不占位置也看不见 */
/* 量字宽用的隐身 span。⚠️ 必须往左边伸（right: 100%）：往右伸的话，长标题会比手机屏幕宽，
   手机浏览器就把整页缩小来装下它（2026-10-30 管理模式下 390 宽的手机被撑成 486）。往左超出不算可滚动区域 */
.fit-mirror { position: absolute; right: 100%; top: 0; visibility: hidden; white-space: pre; pointer-events: none; }
.edit-acts { display: inline-flex; gap: 6px; }
.org-edit.js:not(.dirty) .edit-acts { display: none; }
.org-edit-error { margin: 8px 0 0; }
/* 一条日程右边的"改 / 删" */
.ev-act { flex: none; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; white-space: nowrap; }

/* ---------------------------------------------------------------- 弹窗 */
/* ⚠️ 这些 .dlg 规则只在 app.js 把卡片搬进 <dialog> 之后才匹配得上。
   脚本没跑起来时卡片还是页面上一张普通的卡，样式走 .card，不受这里影响。 */
.dlg { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--radius); background: transparent; overflow: visible; }
.dlg::backdrop { background: rgba(28, 42, 37, .45); }
/* ⚠️ 底色和内边距挂在 .dlg-body 上，不是 .card：搬进来的也可能是登录框那个 <details> */
.dlg > .dlg-body { position: relative; max-height: calc(100vh - 48px); overflow: auto; margin: 0; padding: 18px 20px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.dlg > .dlg-body > .card-head { position: sticky; top: 0; z-index: 1; background: var(--card); margin: -18px -20px 12px; padding: 16px 20px 10px; border-bottom: 1px solid var(--line); }
/* ⚠️★★ 有标题栏的卡（活动弹窗）：app.js 把标题栏以下包进 .dlg-scroll，只滚这一块。
   以前标题栏是 sticky 盖在内容上的，内容稍微一滚，"活动名称"就被压在标题栏底下（2026-10-29 用户截图）。 */
.dlg > .dlg-body.dlg-split { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.dlg > .dlg-body.dlg-split > .card-head { position: static; flex: none; margin: 0; }
.dlg-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 20px 16px; }
.dlg .form label { margin-bottom: 10px; }
.dlg-when { font-weight: 600; color: var(--green-900); }
.dlg-chday { font-size: 13px; }
/* 能点到的范围四周各加 9px、再用负 margin 抵掉：字形位置不变，手指好点（原来 17×22，2026-10-31 手机检查） */
.dlg-x { margin: -9px -9px -9px auto; border: 0; background: none; cursor: pointer; text-decoration: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 9px 11px; }
.dlg-x:hover { color: var(--ink); }
.dlg-x-float { position: absolute; top: 1px; right: 1px; margin: 0; }
/* 活动弹窗右下角拖的角（app.js 的 resizable，2026-10-30 用户：弹窗要能伸缩放大）。拖过以后弹窗有了固定的宽高（.sized），
   里面的卡撑满它；max-width / max-height 保证窗口变小时不出屏幕 */
.dlg-grip { position: absolute; right: 3px; bottom: 3px; z-index: 2; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  border-radius: 0 0 var(--radius) 0; opacity: .55;
  background: linear-gradient(135deg, transparent 0 45%, var(--muted) 45% 52%, transparent 52% 64%, var(--muted) 64% 71%, transparent 71% 83%, var(--muted) 83% 90%, transparent 90%); }
.dlg-grip:hover, .dlg.resizing .dlg-grip { opacity: 1; }
.dlg.sized { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
.dlg.sized > .dlg-body { height: 100%; max-height: none; }
.dlg.resizing, .dlg.resizing * { user-select: none; }
/* ---------------------------------------------------------------- 某一天的详情 */
/* 2026-10-29 用户：点日历上的某一天，详情**从日历右边展出来**；不要贴着屏幕右边、不要撑满整个高度。
   宽屏（> 980px）：.cal-area 是两栏 [日历 | 详情]。关着的时候右栏宽 0；打开时右栏长到 360px，
   详情卡就像从日历右边抽出来一样（卡本身是固定宽，右栏变宽的过程中被 overflow 裁着，一点点露出来）。
   ⚠️ 日历右边有空地（屏幕比 1100px 的页面宽）就先占空地：margin-right 是负的，最多往右伸 372px，
     伸不出去的部分才让日历缩。所以大屏上日历一点不动，只是右边多出一张卡。
   ⚠️ 详情卡最高和日历一样高：卡是 absolute 的，不撑高这一行，行高就是日历的高；
     max-height: 100% 顶到日历的底，内容多了在卡里滚。
   窄屏右边没地方，app.js 改用从底下弹出来的框（.dlg），这里的两栏规则都不生效。 */
.cal-area { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px; align-items: start; }
.day-slot > .day-card { overflow: auto; }
.day-card .card-head .card-sub { flex-basis: 100%; }
.day-card .ev:first-child { border-top: 0; padding-top: 0; }
.day-none { margin: 4px 0 0; }
.dlg-day-sheet > .dlg-body:focus { outline: none; }
@media (max-width: 980px) {
  .cal-area:not(.day-open) > .day-slot { display: none; }
}
@media (min-width: 981px) {
  .cal-area { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; row-gap: 0;
    transition: grid-template-columns .22s ease, column-gap .22s ease, margin-right .22s ease, margin-left .22s ease; }
  .cal-area.day-open { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 12px;
    margin-right: calc(-1 * clamp(0px, (100vw - 1100px) / 2 - 8px, 372px)); }
  .day-slot { position: relative; align-self: stretch; overflow: hidden; border-radius: var(--radius); }
  .day-slot > .day-card { position: absolute; top: 0; left: 0; width: 360px; max-height: 100%; }
  /* 2026-10-30 用户：周日、一、二（日历左半边的格子）详情卡放日历**左边**，周三到周六放右边 —— 卡挨着点的那一格。
     左边的做法和右边对称：左栏从 0 长到 360px，先占日历左边的空地（margin-left 负的），卡贴着日历那一侧一点点露出来。
     换边时 app.js 先加 .no-anim 关掉动画，不然栏宽会从一边滑到另一边 */
  .cal-area > .cal { grid-column: 1; grid-row: 1; }
  .cal-area > .day-slot { grid-column: 2; grid-row: 1; }
  .cal-area.day-left { grid-template-columns: 0px minmax(0, 1fr); }
  .cal-area.day-left > .day-slot { grid-column: 1; }
  .cal-area.day-left > .cal { grid-column: 2; }
  .cal-area.day-left.day-open { grid-template-columns: 360px minmax(0, 1fr); margin-right: 0;
    margin-left: calc(-1 * clamp(0px, (100vw - 1100px) / 2 - 8px, 372px)); }
  .cal-area.day-left .day-slot > .day-card { left: auto; right: 0; }
  .cal-area.no-anim { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-area { transition: none; }
}
/* 登录框弹窗：只有一个密码框，窄一点。
   ⚠️ 这里不要写 #login.in-dlg { padding: 0 } —— id 选择器比 .dlg > .dlg-body 优先，
   会把弹窗内边距清零，标题和输入框贴着边（2026-10-29 用户截图）。 */
#dlg-login { width: min(400px, calc(100vw - 24px)); }
#login.in-dlg { border: 0; padding: 22px 24px 24px; }
/* 搬进弹窗之后不再需要 <details> 那个三角 */
#login.in-dlg > summary { list-style: none; cursor: default; margin: 0 28px 16px 0; font-size: 18px; font-weight: 700; color: var(--ink); }
#login.in-dlg > summary::-webkit-details-marker { display: none; }
#login.in-dlg .dlg-x-float { top: 9px; right: 7px; }
#login.in-dlg .form label { margin-bottom: 16px; }
#login.in-dlg .form-actions { margin: 0; }
#login.in-dlg .form-error { margin: 0 0 14px; }
#login.in-dlg .form-actions .btn { width: 100%; padding: 10px 16px; font-size: 15px; }
/* 弹窗顶部："这天已有的活动" */
.dlg-day { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--green-50); border: 1px solid var(--green-200); }
.dlg-day-h { margin: 0 0 4px; font-size: 12px; }
.dlg-day-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.dlg-pick { flex: 1; min-width: 0; text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- 天气（weather.js，2026-10-30）
   用户：「直接把天气预报放到日历的每个方格里，放在右上角」—— 未来 10 天的格子右上角一个图标 + "18°/8°"，灰色小字，不抢活动的眼。
   格子窄了先省掉最低温，再省掉温度只留图标（容器查询按格子本身的宽度算；不支持的旧浏览器靠下面手机那条媒体查询）。 */
.cal .cell { container-type: inline-size; }
.wx-c { position: absolute; top: 5px; right: 6px; display: inline-flex; align-items: center; gap: 2px; height: 18px;
  font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-c .wx-i { font-size: 13px; }
.wx-c small { font-size: 10px; opacity: .85; }
@container (max-width: 112px) { .wx-c small { display: none; } }
@container (max-width: 72px) { .wx-c .wx-t { display: none; } }

/* "📍 森尼韦尔"：天气用的是哪个城市，点了换（IP 定位的城市可能不对）。电脑上在绿条月份右边，手机上在页头 */
.tb-city { flex: 0 1 auto; min-width: 0; max-width: 16em; display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; }
.tb-city[hidden] { display: none; }
/* 城市后面：今天的天气预报（2026-10-31 用户）。绿条按自己的宽度省字（container query）：先省降水、再省"阴"、太窄就整个藏起来 */
.cal-toolbar { container-type: inline-size; }
/* 是个按钮：点开每小时的天气（2026-10-31 用户），指上去和城市按钮一样亮一点。后面不带"›"（2026-10-31 用户：去掉向右的箭头） */
.tb-wx { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; margin-left: 2px; padding: 4px 8px; overflow: hidden;
  border: 0; border-radius: 6px; background: transparent; color: #fff; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.tb-wx:hover { background: rgba(255, 255, 255, .15); }
.tb-wx:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tb-wx:disabled { cursor: default; background: transparent; }
.tb-wx[hidden] { display: none; }
.tb-wx-day, .tb-wx-pop { opacity: .85; }
.tb-wx .wx-i { font-size: 15px; }
.tb-wx-t { font-weight: 700; font-variant-numeric: tabular-nums; }
@container (max-width: 820px) { .tb-wx-pop { display: none; } }
@container (max-width: 680px) { .tb-wx-sky { display: none; } }
@container (max-width: 560px) { .tb-wx { display: none; } }
.tb-city:hover, .tb-city[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }
.tb-city .pin, .top-wx .pin { font-size: .9em; }
.tb-city .city-name, .top-wx .city-name { overflow: hidden; text-overflow: ellipsis; }
.top-wx { display: none; } /* 手机才显示，见响应式部分 */

/* 点了城市按钮，在绿条下面展开：现在用的城市、搜城市、°C / °F */
.wx-panel { padding: 10px 16px 8px; background: var(--green-50); border-bottom: 1px solid var(--green-200); }
.wx-panel[hidden] { display: none; }
.wx-head { display: flex; align-items: baseline; gap: 10px; }
.wx-head b { flex: none; font-size: 15px; }
.wx-cur { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-cur small { color: var(--muted); font-size: 12px; }
.wx-acts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; flex: none; }
.wx-x { margin: -9px -11px -9px 0; padding: 9px 11px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.wx-x:hover { color: var(--ink); }
.wx-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 13px; }
.wx-search input { flex: 1 1 220px; max-width: 340px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; }
.wx-search input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.wx-search .link-btn[hidden] { display: none; }
.wx-results { flex: 1 1 100%; margin: 0; padding: 0; list-style: none; }
.wx-results:empty { display: none; }
.wx-results button { display: block; width: 100%; max-width: 480px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.wx-results button:hover { background: var(--green-100); }
.wx-results small { margin-left: 6px; color: var(--muted); }
.wx-results li.muted { padding: 6px 8px; }
.wx-msg { margin: 8px 0 0; font-size: 14px; }
.wx-msg[hidden] { display: none; }
.wx-attr { margin: 6px 0 0; font-size: 11px; }
.wx-attr a { color: inherit; }
/* 某一天的详情卡：那天的预报 + 一句话概括 */
.day-wx { margin: -4px 0 12px; font-size: 13px; color: var(--ink-2); }
.day-wx[hidden] { display: none; }
.day-wx-sum { display: block; color: var(--muted); }
.day-wx-more { margin-top: 2px; font-size: 13px; font-weight: 600; }
/* 一句话概括和"每小时 ›"收在 hide / show 里（2026-10-31 用户），箭头借活动那个（.ev-more / .ev-arrow） */
.day-wx-box > summary { align-items: center; }
.day-wx-box > summary > .day-wx-main { flex: 1; min-width: 0; }
.day-wx-box > summary .ev-arrow { margin-top: 0; }
.day-wx-box > .day-wx-sum { margin-top: 2px; }

/* 每小时天气弹窗（weather.js，2026-10-31 用户：点今天天气要列出每个小时）。
   标题栏贴顶：这个弹窗打开时会滚到"现在"，所以 .dlg-body 顶上不留内边距，不然滚过去的行会从标题栏上面那条缝里露出来
   （sticky 贴的位置要扣掉滚动区的内边距）。表头贴在标题栏下面（--hr-head 是标题栏的高度，weather.js 量了填上） */
#dlg-hours { width: min(600px, calc(100vw - 24px)); }
#dlg-hours > .dlg-body { padding-top: 0; }
#dlg-hours > .dlg-body > .card-head { margin-top: 0; }
.hr-day { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.hr-day-sum { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.hr-table thead th { position: sticky; top: var(--hr-head, 52px); z-index: 1; padding: 6px; background: var(--card); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.hr-table tbody th, .hr-table td { padding: 7px 6px; border-bottom: 1px dashed var(--line); text-align: left; font-weight: 400; white-space: nowrap; }
.hr-table .hr-t { width: 4.5em; }
.hr-table tbody .hr-t { color: var(--ink-2); font-weight: 600; }
.hr-table .hr-sky { white-space: normal; }
.hr-i { display: inline-block; width: 1.5em; }
.hr-table .hr-temp, .hr-table .hr-pop, .hr-table .hr-wind { text-align: right; }
.hr-table tbody .hr-temp { font-weight: 700; }
.hr-table tbody .hr-pop, .hr-table tbody .hr-wind { color: var(--muted); }
.hr-table tbody .hr-pop.wet { color: var(--blue); font-weight: 600; }
.hr-pop small { margin-left: 4px; font-size: 11px; font-weight: 500; }
.hr-table tr.past { opacity: .5; }
.hr-table tr.now > * { background: var(--green-50); }
.hr-table tbody tr.now .hr-t { color: var(--green-700); }

/* ---------------------------------------------------------------- AI 小建议（tips.js，2026-10-30，照好日历的事务小贴士）
   保存活动后在屏幕上方弹出：几秒后自己关（底下的进度条），点一下就留着，× 关掉 */
.tip-toast {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 300;
  width: min(440px, calc(100% - 24px)); padding: 12px 44px 14px 14px; overflow: hidden; cursor: pointer;
  border: 1px solid #eadfc8; border-radius: 12px; background: var(--card); box-shadow: 0 10px 30px rgba(60, 50, 30, .22);
  animation: tip-in .25s ease-out;
}
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, -10px); } }
.tip-toast-h { margin-bottom: 4px; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tip-toast .ev-tips-list li { font-size: 15px; }
.tip-toast-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.tip-toast-x { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.tip-toast-x:hover { background: var(--green-50); color: var(--ink); }
.tip-toast-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--green-600); transform-origin: left; animation: tip-bar linear forwards; }
@keyframes tip-bar { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .tip-toast { animation: none; } }
/* 每条建议前面一个 💡；天气那句蓝字、前面是 📍（城市按 IP 猜的，可能不准，要看清是哪里的天气） */
.ev-tips-list { margin: 0; padding: 0; list-style: none; }
.ev-tips-list li { position: relative; padding: 2px 0 2px 24px; font-size: 14px; line-height: 1.5; color: #7a5a2a; }
.ev-tips-list li::before { content: "💡"; position: absolute; left: 0; top: 2px; font-size: 14px; }
.ev-tips-list li.wx { color: #2d5a87; }
.ev-tips-list li.wx::before { content: "📍"; }
/* 改活动的弹窗里：保存时弹出过的建议 */
.ev-tips { padding: 8px 12px; border-radius: 8px; background: #fbf6ea; border: 1px solid #eadfc8; }
.ev-tips[hidden] { display: none; }
.ev-tips-h { margin: 0 0 2px; font-size: 12px; color: var(--muted); }
/* 活动详情里的 AI 小建议（2026-10-31 用户：「活动里也没有智能提醒」）：详情、图片下面，大家都看得到。
   max-width：宽屏上别拉成一长条，和图片差不多宽 */
.ev-more .ev-ai { margin-top: 8px; max-width: 560px; }

/* ---------------------------------------------------------------- 图文详情（2026-10-30，editor.js + RichText）
   颜色、字号只有这几个 class（服务器把编辑器的 <font> 换成它们），编辑器里的 <font> 也按同样的大小显示，所见即所得 */
.fc-red { color: #cf4a33; }
.fc-orange { color: #dc5a22; }
.fc-green { color: #2f7d3b; }
.fc-blue { color: #2563a8; }
.fc-gray { color: #767b78; }
.fs-s, .rt-area font[size="1"], .rt-area font[size="2"] { font-size: .85em; }
.fs-l, .rt-area font[size="4"], .rt-area font[size="5"] { font-size: 1.3em; line-height: 1.4; }
.fs-xl, .rt-area font[size="6"], .rt-area font[size="7"] { font-size: 1.6em; line-height: 1.35; }
.ev-details ul, .ev-details ol, .rt-area ul, .rt-area ol { margin: .2em 0; padding-left: 1.5em; }
.ev-details li, .rt-area li { margin: 0; }
/* 活动卡本身是列表里的一项（.ev-list > li），详情里的列表默认会变成二级的空心圈：写明实心圆点 / 数字 */
.ev-details ul, .rt-area ul { list-style: disc; }
.ev-details ol, .rt-area ol { list-style: decimal; }

/* 编辑器：上面一排按钮，下面是可以直接打字的框（长得和别的输入框一样） */
.rt { display: flex; flex-direction: column; gap: 4px; }
.rt-label { font-weight: 600; font-size: 14px; }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 4px; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: var(--green-50); }
.rt-btn { min-width: 28px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: none;
  font: inherit; font-size: 14px; line-height: 1; color: var(--ink); cursor: pointer; }
.rt-btn:hover { background: #fff; border-color: var(--line); }
.rt-btn.on { background: #fff; border-color: var(--green-500); color: var(--green-700); }
.rt-b { font-weight: 800; }
.rt-fs { font-size: 13px; }
.rt-fs-l { font-size: 16px; font-weight: 600; }
.rt-color { min-width: 24px; padding: 0; }
.rt-list { font-size: 15px; font-weight: 700; }
.rt-color::before { content: ""; display: block; width: 16px; height: 16px; margin: auto; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.rt-sep { width: 1px; height: 18px; margin: 0 2px; background: var(--line); }
/* 编辑框可以往下拉高（右下角的小斜线，2026-10-30 用户）；不拉的话跟着内容长高，弹窗里滚 */
.rt-area { min-height: 120px; overflow-y: auto; resize: vertical; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0 0 8px 8px;
  background: #fff; font-size: 15px; line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.rt-area:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.rt-area.empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }

/* 活动图片（只限一张）：表单里一行"预览 | 上传 / 换一张、删掉、提示"，可以拖进来 */
.f-image { display: flex; flex-direction: column; gap: 6px; }
.f-image-h { font-weight: 600; font-size: 14px; }
.f-image .img-preview { max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); object-fit: contain; background: #fff; }
.img-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.f-image.drag .img-row { border-color: var(--green-600); background: var(--green-50); }
.img-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.img-acts .img-hint { flex-basis: 100%; color: var(--muted); }
.img-hint .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .img-hint .hint-desk { display: none; }
  .img-hint .hint-touch { display: inline; }
}
.img-msg { flex-basis: 100%; color: var(--orange); }
.img-msg:empty { display: none; }
.img-remove[hidden] { display: none; }
/* 活动卡上的图：点了在新窗口看原图 */
.ev-img { display: inline-block; margin-top: 8px; max-width: 100%; }
.ev-img img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.upcoming .ev-img img { max-height: 200px; }

/* 近期活动 / 以往活动（2026-10-31）：卡片标题换成两个标签，选中的深色、底下一道绿线，另一个灰色 */
.list-tabs { display: flex; gap: 22px; margin: 0; }
.list-tab { padding: 0 0 4px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap; }
.list-tab:hover { color: var(--ink-2); }
.list-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green-600); }
.list-tab:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; border-radius: 4px; }
.list-panel[hidden] { display: none; }
/* 以往活动里每条都是过去的，不再一条条变淡 */
#list-past .ev.past { opacity: 1; }
/* "显示更多"：列表底下一整条，点了只接下一页 */
.list-more { display: block; margin-top: 10px; padding: 9px 0 1px; border-top: 1px solid var(--line); text-align: center;
  color: var(--green-700); font-weight: 600; font-size: 14px; text-decoration: none; }
.list-more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.list-more:hover { color: var(--green-900); }
.list-more[aria-busy="true"] { color: var(--muted); pointer-events: none; }
.list-more[aria-busy="true"]::after { display: none; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 900px) {
  .lc-label, .lc-offset { display: none; } /* 平板宽度：本地只剩时间，和手机一样 */
  .wc-more-txt { display: none; }
  .wc-more { width: 24px; padding: 0; justify-content: center; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wt-list { column-count: 1; }
  .page { padding: 14px 12px 24px; gap: 14px; }
  .flash.gone { margin-bottom: -14px; }
  .card { padding: 14px 14px; }
  .cal { padding: 0; }
  .brand-tag { display: none; }
  /* 手机：按钮排在介绍下面。上 10 + 22px 标题字顶自带的 5 = 15；介绍字底自带 5.5 + 9.5 = 15 到按钮；按钮到日历照常是块间距 */
  .org-page { padding-top: 10px; }
  .org-head { flex-direction: column; gap: 9.5px; margin-bottom: 0; }
  .org-name { font-size: 22px; }
  .cal-toolbar { padding: 6px 8px; }
  .cal-title { font-size: 16px; min-width: 6em; }
  .tb-today { padding: 3px 10px; font-size: 13px; }
  .cal-grid { padding: 0 6px 6px; }
  .cal-head { margin: 0 -6px 4px; padding: 5px 6px; font-size: 12px; }
  .wd-long { display: none; }
  .wd-short { display: inline; }
  .cal-row { gap: 3px; margin-bottom: 3px; }
  .cell { min-height: 64px; padding: 3px 4px 4px; border-radius: 6px; }
  .cell .num { font-size: 13px; }
  .cell .sub { font-size: 9.5px; }
  .url-prefix { font-size: 14px; }
  .hol-mark { font-size: 9px; }
  .cell-top { gap: 2px; }
  .wx-c { top: 3px; right: 3px; height: 16px; }
  .wx-c .wx-i { font-size: 11px; }
  .wx-c .wx-t { display: none; } /* 手机格子只放得下图标 */
  .tb-hol { padding: 3px 22px 3px 7px; font-size: 12px; background-position: right 7px center; }
  /* 今天的天气（2026-10-31 用户：手机上当天的天气预报没有了）：第一行放不下，换到绿条第二行，整句都显示。
     上面按绿条宽度省字、藏起来的 container query 在手机上不算（这里的选择器更具体） */
  .cal-toolbar { flex-wrap: wrap; row-gap: 0; }
  .cal-toolbar .tb-wx:not([hidden]) { display: inline-flex; order: 10; flex: 1 1 100%; margin: 0 0 1px; padding: 3px 6px; font-size: 13.5px; }
  .cal-toolbar .tb-wx-sky, .cal-toolbar .tb-wx-pop { display: inline; }
  /* 城市按钮：绿条放不下，放到页头 EN | CN 左边（好日历放天气的地方），点了一样在绿条下面展开 */
  .tb-city { display: none; }
  .top-wx:not([hidden]) { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 9em; margin: 0 0 8px auto; padding: 2px 9px; border: 0; border-radius: 999px;
    background: var(--green-50); color: var(--ink-2); font: inherit; font-size: 14px; line-height: 1.6; white-space: nowrap; cursor: pointer; }
  .top-wx[aria-expanded="true"] { background: var(--green-100); }
  .top-wx:not([hidden]) + .lang-switch { margin-left: 0; }
  .wx-panel { padding: 10px 10px 8px; }
  .wx-head { flex-wrap: wrap; row-gap: 2px; }
  .wx-cur { order: 3; flex: 1 1 100%; }
  .wx-search input { font-size: 16px; } /* 小于 16px 时 iPhone 点进去会把整页放大 */
  /* 格子太窄放不下"初三 老兵节"：农历、节日各占一行，长的节日名截断 */
  .cell .sub > span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .chips { gap: 2px; margin-top: 2px; }
  /* 手机格子窄，一行只放得下两三个字母（"Ch…"）：活动名折成最多两行 */
  .chip { font-size: 10px; padding: 1px 3px; border-radius: 3px; line-height: 1.25; box-shadow: none;
    white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .chip.more { display: block; }
  .cell .chip { font-size: 11px; padding: 0 3px; border-top-width: 4px; border-bottom-width: 4px; border-radius: 4px; line-height: 1.3; -webkit-line-clamp: 3; }
  .cell .chip.more { padding: 1px 3px; font-size: 10px; }
  .ev { gap: 10px; }
  .ev-date { width: 74px; font-size: 14px; }
  /* 一列：用 flex 竖排，不用 grid —— 网格里的一格只有它自己那么大，"保存"那一行贴不住弹窗底边（sticky 只能在所在的格子里挪） */
  .form-grid { display: flex; flex-direction: column; }
  .hero h1 { font-size: 24px; }
  /* 修改 / 删除：字不变，能点到的范围上下左右加大（原来 25×19，2026-10-31 手机检查）；删除前本来就会问一句 */
  .ev-act { font-size: 13px; gap: 2px; }
  .ev-act .ev-edit, .ev-act .link-btn { display: inline-block; margin: -8px 0; padding: 8px 6px; }
  /* iPhone：输入框的字小于 16px，点进去会把整页放大 —— 详情编辑框、订阅 / 分享的网址框 */
  .rt-area, .copy-row input { font-size: 16px; }
  /* 保存 / 取消贴在弹窗底边：表单比屏幕长、软键盘又占掉半屏，不用往下翻找按钮 */
  /* bottom 写 -16px：贴边的位置要扣掉滚动区（.dlg-scroll）底下 16px 的内边距，不抵消的话按钮下面会漏出一条表单 */
  #dlg-event .form-actions { position: sticky; bottom: -16px; z-index: 2; margin: 4px -20px 0; padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line); }
  /* 世界时间也和别的弹窗一样贴底、占满宽（#dlg-world 自己的宽度规则比 .dlg 的优先，这里再写一次） */
  #dlg-world, #dlg-hours { width: 100%; }
  .hr-table tbody th, .hr-table td, .hr-table thead th { padding-left: 4px; padding-right: 4px; }
  .hr-table { font-size: 13.5px; }
  /* 小屏上弹窗贴着底边、占满宽度：拇指够得着，也不会被软键盘顶没 */
  .dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; max-height: 88vh; }
  .dlg-grip { display: none; }
  .dlg.sized { width: 100% !important; height: auto !important; max-width: 100%; max-height: 88vh; }
  .dlg.sized > .dlg-body { height: auto; max-height: 88vh; }
  .dlg > .dlg-body { max-height: 88vh; border-radius: var(--radius) var(--radius) 0 0; }
  #dlg-login { width: 100%; }
  .org-edit-intro .org-intro { font-size: 16px; }
  .org-edit-intro { margin-top: -1px; } /* 介绍框是 16px 字（防 iPhone 放大），字顶自带的空白少 1px，这里补回去，标题到介绍还是 10px */
  #login.in-dlg { padding: 20px 18px 24px; }
}

/* 手机（和 700 以下的窄平板，标题右边放不下）：照好日历的做法（2026-10-30 用户）——
   时间条是标题下面贴边的一整条深绿（不圆角、40 高），本地只剩时间，城市只剩"纽约 22:12"、撑满可左右滑，"›" 靠最右。
   尺寸和好日历一样 */
@media (max-width: 700px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: 8px; padding-bottom: 0; }
  .brand, .lang-switch { margin-bottom: 8px; }
  .clockbar { order: 3; flex: 1 1 100%; margin: 0 -16px; min-height: 40px; padding: 0 10px; gap: 7px; border-radius: 0; font-size: 14px; }
  .lc-time { font-size: 15px; }
  .world-clocks { flex: 1; gap: 7px; font-size: 12.5px; }
  .world-clocks .wc-time { margin-left: 2px; }
}
/* 小手机：和好日历同样的两档 */
@media (max-width: 380px) {
  .cal-toolbar { gap: 4px; }
  .topbar-inner { gap: 10px; }
  /* 320–380 宽放不下"历 活动日历  📍森尼韦尔  EN | CN"：和好日历一样，语言只留要切换过去的那个（中文页只显示 EN） */
  .top-wx:not([hidden]) + .lang-switch a.on, .top-wx:not([hidden]) + .lang-switch > span { display: none; }
  .tb-arrow { width: 26px; }
  .clockbar { gap: 6px; padding: 0 8px; }
  .lc-time { font-size: 14px; }
  .world-clocks { gap: 6px; font-size: 12px; }
  .world-clocks .wc-time { margin: 0 0 0 2px; }
}
@media (max-width: 340px) {
  .world-clocks .wc-am { display: none; } /* 320px 的老手机放不下 am，北京时间优先 */
  .cal-title { font-size: 15px; min-width: 0; }
  .tb-arrow { width: 22px; }
  .tb-hol { padding: 2px 19px 2px 5px; font-size: 11px; background-position: right 6px center; }
}

/* ---------------------------------------------------------------- 首页：组织 / 个人（2026-10-31） */
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.kind-pick legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.form .kind-opt { flex-direction: row; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid #d9d6cc; border-radius: 8px; background: #fff; cursor: pointer; }
.form .kind-opt:hover { border-color: var(--green-500); }
.form .kind-opt:has(input:checked) { border-color: var(--green-600); box-shadow: inset 0 0 0 1px var(--green-600); background: var(--green-50); }
.kind-opt input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--green-700); }
/* ⚠️ 它是 label 下面直接的 span，会吃到 .form label > span 的粗体和灰色，改回来 */
.form .kind-opt > .kind-text { display: flex; flex-direction: column; gap: 1px; font-weight: 400; color: var(--ink); }
.kind-text b { font-size: 15px; }
.kind-text small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ---------------------------------------------------------------- 个人日历（2026-10-31，personal.html）
   用户给的样子像 calendly 选时间的页：一天一列，列里一格一格的时间段。这里一屏七天，绿条和月历的一样。
   空闲：白底细框的格子（只读链接看到的是虚线框，点不了）；忙：灰底；看得到内容的日程：浅绿底、左边一道绿；
   拿可编辑链接的人自己加的：浅橙底。手机上七列放不下，这一块左右滑（页面本身不横着滚），一屏露两列多一点，看得出能滑 */
.pc-note { margin: 0; padding: 9px 14px; border-radius: 8px; background: var(--blue-bg); color: #1d4a7a; border: 1px solid #cfe0f5; font-size: 14px; }
.pc-note.edit { background: #fff6e8; color: #7a4f1d; border-color: #f1d7b3; }
.pc-msg-h { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.pc-msg p { margin: 0; }
.wk-zone { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .92; }
.wk-zone + .tb-today { margin-left: 0; }
.wk-hours { color: var(--muted); }
.wk-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 8px; padding: 10px 12px 14px; }
.wk-day { min-width: 0; scroll-snap-align: start; scroll-margin-left: 8px; }
.wk-head { display: flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 5px 4px 5px 8px; margin-bottom: 8px; border-radius: 8px; background: var(--green-100); }
.wk-wd { font-weight: 700; }
.wk-date { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.wk-day.weekend .wk-wd { color: var(--orange); }
.wk-day.today .wk-head { background: #c8e6c4; box-shadow: inset 0 0 0 1px #3b9147; }
.wk-day.past { opacity: .62; }
.wk-add { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -3px 0 -3px auto; border-radius: 6px; color: var(--green-700); font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none; }
.wk-add:hover { background: #fff; }
.wk-items { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk-it .slot { display: block; padding: 7px 4px; border: 1px solid #cfccc2; border-radius: 6px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.35;
  text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.wk-it a.slot:hover, .wk-it a.slot:focus-visible { border-color: var(--green-600); background: var(--green-50); color: var(--green-900); box-shadow: 0 1px 4px rgba(47, 125, 59, .15); outline: none; }
.wk-it .slot.ro { border-style: dashed; background: transparent; color: var(--ink-2); }
/* 已经过去了的格子（2026-11-01）：虚线、没底色、点不了。过去的日子整列已经淡了（.wk-day.past）；今天已经开始了的那几格自己淡一点 */
.wk-it .slot.gone { border-style: dashed; background: transparent; color: var(--ink-2); cursor: default; }
.wk-day:not(.past) .wk-it.gone { opacity: .62; }
.wk-it.busy, .wk-it.entry { padding: 6px 8px; border-radius: 6px; font-size: 13.5px; line-height: 1.4; }
.wk-it.busy { display: flex; flex-wrap: wrap; gap: 0 6px; background: #e9e7e0; color: #59615c; }
.wk-it.entry { background: #e3f0de; box-shadow: inset 3px 0 0 var(--green-700); padding-left: 10px; }
.wk-it.entry.private { background: #ecefe9; box-shadow: inset 3px 0 0 #7d9283; }
.wk-it.entry.mine { background: #fff1de; box-shadow: inset 3px 0 0 var(--orange); }
.it-time { display: block; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wk-it.busy .it-time { display: inline; color: inherit; }
.it-t { font-weight: 600; overflow-wrap: anywhere; }
a.it-edit { color: var(--ink); text-decoration: none; }
a.it-edit:hover { color: var(--green-900); text-decoration: underline; }
.it-by { display: block; font-size: 12px; color: var(--muted); }
.it-lock { margin-left: 3px; font-size: 11px; }
.it-d { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.wk-none { margin: 2px 4px; font-size: 13px; color: var(--muted); }
/* 全天忙（2026-10-31 用户：点上后全天变成灰色；原来叫全天休假）：有全天日程的那天整列灰底，那一条灰色、居中 */
.wk-day.off { background: #ecebe5; border-radius: 8px; }
.wk-day.off .wk-head { background: #dddad2; }
.wk-day.off .wk-wd, .wk-day.off .wk-date { color: #5d6670; }
.wk-it.allday.entry, .wk-it.allday.busy { padding: 12px 8px; background: #d7d4cb; color: #3f4743; box-shadow: none; text-align: center; justify-content: center; }
.wk-it.allday a.it-edit { color: #3f4743; }
/* 弹窗标题旁边的"全天忙"勾 */
.day-off { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 2px 10px 2px 8px; border: 1px solid #d9d6cc; border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.day-off[hidden] { display: none; }
.day-off:has(input:checked) { background: #e4e2db; border-color: #a9a69c; color: var(--ink); }
.day-off input { width: 15px; height: 15px; margin: 0; accent-color: #6b726d; }
/* 分享给别人 */
.pc-share-hint { margin: -4px 0 12px; font-size: 13.5px; line-height: 1.6; }
.pc-share-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 8px; }
.pc-share-form label { margin: 0; }
.seg { display: flex; min-width: 0; margin: 0; padding: 0; border: 0; }
.seg legend, .pc-days-pick legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.form .seg label { flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #d9d6cc; background: #fff; cursor: pointer; font-size: 14px; line-height: 1.4; }
.form .seg label + label { margin-left: -1px; }
.seg label:first-of-type { border-radius: 8px 0 0 8px; }
.seg label:last-of-type { border-radius: 0 8px 8px 0; }
.form .seg label:has(input:checked) { position: relative; z-index: 1; border-color: var(--green-600); background: var(--green-50); }
.seg input { margin: 0; accent-color: var(--green-700); }
.form label.pc-days { width: 110px; }
.form .pc-make { margin: 0; }
.pc-make .btn { padding: 8px 18px; }
.pc-links { margin: 6px 0 0; padding: 0; list-style: none; }
.pc-link { padding: 10px 0; border-top: 1px solid var(--line); }
.pc-link-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.pc-link-label { font-weight: 600; }
.pc-link-exp { color: var(--muted); font-size: 13px; }
.pc-revoke { margin-left: auto; }
.pc-link .copy-row { margin: 6px 0 0; max-width: 680px; }
.pc-link.expired .badge, .pc-link.expired .pc-link-label { opacity: .55; }
.pc-link.expired .pc-link-exp { color: var(--red); }
.pc-link.made { margin: 0 -10px; padding: 10px; border-radius: 8px; background: var(--green-50); }
.badge.b-read { background: var(--blue-bg); color: var(--blue); }
.badge.b-edit { background: #fff3e4; color: #9b5630; }
.pc-new { font-size: 11px; }
/* 设置（2026-10-31 用户：原来是页面下面收起来的"可预约时间"，改名"设置"、绿条上一个按钮、点了弹出来）。
   2026-10-31 先放在绿条中间；2026-11-01 用户：「设置放在中间太难看了，跟时区靠齐吧」—— 靠右，紧挨在"时区"左边
   （左边 margin auto 把它和后面的时区、假期、今天一起推到右边；时区那边就不再 auto） */
.tb-set { flex: none; display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 auto; padding: 4px 14px; border-radius: 6px; color: #fff; font-weight: 600;
  text-decoration: none; white-space: nowrap; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); }
.tb-set:hover { background: rgba(255, 255, 255, .28); }
.tb-set + .wk-zone { margin-left: 0; }
/* 假期下拉框（主人，2026-10-31 是"中国假期"的勾，2026-11-01 改成下拉框）：和组织日历的那个一个样子，挨着"今天" */
.wk-toolbar .tb-hol-form { margin-left: 0; }
/* 放假日（下拉框选的那个国家的）：整列灰（.wk-day.off），最上面一块"国庆节 放假"，主人多一个"改成可约" */
.wk-it.holiday { padding: 12px 8px; border-radius: 6px; background: #d7d4cb; color: #3f4743; text-align: center; font-size: 13.5px; line-height: 1.4; }
.wk-it.holiday .it-t { display: block; }
.hol-act { margin: 4px 0 0; }
.hol-act .link-btn, .wk-hol-open .link-btn { font-size: 12.5px; font-weight: 600; }
.wk-hol-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: -2px 4px 8px; font-size: 12.5px; color: var(--muted); }
#dlg-settings { width: min(520px, calc(100vw - 24px)); }
.pc-hours-now { margin: -4px 0 12px; font-size: 13.5px; }
.pc-hours-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pc-hours-row label { flex: 1 1 130px; max-width: 190px; }
.pc-days-pick { display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.form .pc-days-pick label.check { margin: 0; }
.pc-hours-form > label { max-width: 420px; }
@media (max-width: 640px) {
  .kind-pick { grid-template-columns: 1fr; }
  /* 一屏露两列多一点：卡宽 = 屏宽 - 24（页面左右各 12），再扣掉列表左右的 8 */
  /* 手机：一列一列横着排。什么都没有的那天（周末不开放、已经过去）只占窄窄一条，不然今天是周六时，
     一打开看到的两列都是"不开放预约"，能约的时间全在右边看不见（2026-10-31 手机检查）。personal.js 再滚到第一个有内容的那天 */
  .wk-grid { display: flex; gap: 6px; padding: 8px 8px 12px; }
  .wk-day { flex: 0 0 calc((100vw - 44px) / 2.3); }
  .wk-day.empty { flex-basis: 76px; }
  .wk-day.empty .wk-head { flex-wrap: wrap; row-gap: 0; padding-right: 2px; }
  .wk-day.empty .wk-add { margin-left: 0; }
  .wk-toolbar .wk-zone { order: 10; flex: 1 1 100%; margin: 0 0 2px; padding: 0 4px; font-size: 12.5px; }
  /* 手机：第一行（‹ 标题 › 今天）放满了。主人的假期下拉框、"设置"另起一行，时区在最下面一行。
     ::after 是一个占满整行的空块（order 10），把 order 比它大的挤到下一行 —— 不然宽一点的手机上假期会挤进第一行 */
  .wk-toolbar::after { content: ""; order: 10; flex-basis: 100%; height: 0; }
  .wk-toolbar .tb-hol-form { order: 11; margin: 0 0 4px; }
  .wk-toolbar .tb-set { order: 12; margin: 0 0 4px; padding: 2px 10px; font-size: 13px; }
  .wk-toolbar .tb-set ~ .wk-zone { order: 13; }
  #dlg-settings { width: 100%; }
  .wk-toolbar .tb-today { margin-left: auto; }
  .wk-it .slot { padding: 8px 4px; }
  .pc-share-form { flex-direction: column; align-items: stretch; }
  .form label.pc-days { width: auto; flex: none; }
  .form .seg label { flex: 1; justify-content: center; }
  .pc-make .btn { width: 100%; }
  .pc-hours-row label { max-width: none; }
  /* 保存 / 取消贴在弹窗底边（同活动弹窗 #dlg-event） */
  #dlg-entry .form-actions { position: sticky; bottom: -16px; z-index: 2; margin: 4px -20px 0; padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line); }
}