/* apple.com-inspired: full-bleed tiles, centered headlines, pill buttons, quiet chrome. */
:root {
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --bg: #ffffff;
  --gray: #f5f5f7;
  --line: #d2d2d7;
  --blue: #0071e3;
  --link: #0066cc;
  --link-dark: #2997ff;
  --night: #0b1226;
  --amber: #b86a12;         /* lit stained glass, darkened for text */
  --amber-soft: #f3c77e;
  --cream: #fbf6ee;
  --cream-2: #f4ebdc;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Helvetica Neue", Arial, sans-serif; /* the device's own fonts: nothing to download */
}

* { box-sizing: border-box; }

/* 中文 / English switch: show only the chosen language's text */
html[data-lang="en"] .t-zh,
html:not([data-lang="en"]) .t-en { display: none !important; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ---------- Global nav (the redesign, 10/2026) ---------- */
/* Wide screens: logo + name, the places people look for (主日聚會 認識我們 中文事工 英文事工 行事曆 訂餐 奉獻), then the
   reader's tools (中/EN, 大字) and the account links. Phones: logo + name and the tools on top; the places move to the
   bottom tab bar (首頁 本週 行事曆 家人專區 更多), always within reach of a thumb. */
.globalnav { position: sticky; top: 0; z-index: 100; background: rgba(20, 33, 61, 0.97); box-shadow: inset 0 -1px 0 rgba(243, 199, 126, 0.35);
  display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 0 max(22px, calc((100% - 1240px) / 2)); }
.globalnav-bar { display: flex; align-items: center; gap: 14px; flex: none; }
.globalnav-logo { display: flex; align-items: center; gap: 10px; color: #fff; min-width: 0; }
.globalnav-logo img { display: block; width: 38px; height: 38px; border-radius: 50%; }
.globalnav-name { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
.globalnav a { color: rgba(255, 255, 255, 0.88); white-space: nowrap; }
.globalnav a:hover { color: #fff; text-decoration: none; }
.globalnav-inner { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.globalnav-inner a { font-size: 18px; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.globalnav-inner a:hover { background: rgba(255, 255, 255, 0.08); }
.globalnav-inner a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--amber-soft); border-radius: 0; }
.globalnav-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.22); margin: 0 8px; }
.globalnav-inner .nav-account { font-size: 17px; color: rgba(255, 255, 255, 0.78); }
.globalnav-inner .nav-join { margin-left: 6px; border: 1px solid rgba(243, 199, 126, 0.7); color: var(--amber-soft); border-radius: 999px; padding: 8px 16px; }
.globalnav-tools { display: flex; align-items: center; gap: 8px; order: 3; }
.nav-lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; overflow: hidden; }
.nav-lang button { font: inherit; font-size: 16px; color: rgba(255, 255, 255, 0.8); background: none; border: 0; min-width: 44px; min-height: 40px; padding: 0 10px; cursor: pointer; }
.nav-lang button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: var(--navy, #14213d); font-weight: 700; }
.nav-big { font: inherit; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: none; color: rgba(255, 255, 255, 0.9); cursor: pointer; }
.nav-big sup { font-size: 0.7em; }
.nav-big[aria-pressed="true"] { background: var(--amber-soft); border-color: var(--amber-soft); color: #14213d; font-weight: 700; }
.globalnav button:focus-visible, .globalnav a:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 2px; }
/* wide: logo · the places · the tools at the far right (the bar's children join the nav's own row) */
@media (min-width: 1069px) {
  .globalnav-bar { display: contents; }
  .globalnav-logo { order: 0; }
  .globalnav-inner { order: 1; }
  .globalnav-tools { order: 2; margin-left: 6px; }
}

/* 大字: the whole site about 15% larger */
html[data-big="1"] body { zoom: 1.15; }

/* ---------- Phones and tablets: the places fold into ☰ 選單, which drops down under the header ---------- */
.nav-menu, .more-sheet { display: none; }
@media (max-width: 1068px) {
  .globalnav { min-height: 60px; padding: 0 12px 0 14px; padding-top: env(safe-area-inset-top, 0px); }
  .globalnav-bar { flex: 1; justify-content: space-between; min-width: 0; }
  .globalnav-name { overflow: hidden; text-overflow: ellipsis; font-size: 21px; }
  .globalnav-inner { display: none; }
  .nav-big-label { display: none; }
  .nav-menu { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 17px; color: #fff; background: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; cursor: pointer; }
  .nav-menu span { white-space: nowrap; }
  .nav-menu[aria-expanded="true"] { background: var(--amber-soft); border-color: var(--amber-soft); color: #14213d; }
  .more-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(10, 16, 32, 0.45); }
  /* the visible height (dvh: on a phone, 100vh reaches under Safari's toolbar, so the last lines couldn't be reached),
     room for the home indicator, and scrolling that stays in the menu */
  .more-panel { position: absolute; left: 0; right: 0; top: calc(60px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 80px); max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fbfaf7; border-radius: 0 0 18px 18px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .more-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 21px; color: #14213d; }
  .more-head button { font: inherit; font-size: 20px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: #4a4f5c; }
  .more-groups { display: grid; gap: 14px; }
  .more-h { margin: 6px 0 2px; font-size: 15px; letter-spacing: 0.1em; color: #8a6430; }
  .more-groups a { display: flex; align-items: center; min-height: 50px; padding: 0 4px; font-size: 19px; color: #23262e; border-bottom: 1px solid #ece6da; }
  .more-groups a:hover { text-decoration: none; background: #f3efe6; }
  body.is-sheet-open { overflow: hidden; }
  .ab-subnav { top: 60px; }
}
/* small phones: keep the church's name readable — ☰ alone, and search lives inside the menu */
@media (max-width: 560px) {
  .globalnav-tools { gap: 6px; }
  .nav-menu { padding: 0 10px; }
  .nav-menu span, .globalnav-tools .nav-search { display: none; }
}

/* ---------- 首頁第一屏 (the redesign): this Sunday — when, where, how to join ---------- */
.hero2 { position: relative; isolation: isolate; overflow: hidden; background: #14213d; }
.hero2-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* only the text side is shaded; the church and its windows keep their own light and colour */
.hero2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 20, 40, 0.78) 0%, rgba(12, 20, 40, 0.5) 34%, rgba(12, 20, 40, 0) 62%); }
.hero2-card { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.hero2-act.is-main { text-shadow: none; }
.hero2-inner { max-width: 1240px; margin: 0 auto; padding: 48px max(22px, 4vw) 56px; }
.hero2-card { max-width: 560px; color: #fff; }
.hero2-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--serif); font-size: 19px; letter-spacing: 0.08em; color: var(--amber-soft); }
.hero2-eyebrow img { border-radius: 50%; }
.hero2-title { font-family: var(--serif); font-size: clamp(34px, 5vw, 48px); line-height: 1.2; margin: 0 0 4px; letter-spacing: 0.04em; }
.hero2-date { margin: 0 0 18px; font-size: 20px; color: rgba(255, 255, 255, 0.86); }
.hero2-times { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.hero2-times li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; font-size: 18px; color: rgba(255, 255, 255, 0.82); }
.hero2-times li.is-main { font-size: 22px; color: #fff; font-weight: 500; }
.hero2-time { font-variant-numeric: tabular-nums; }
.hero2-addr { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0 0 22px; font-size: 18px; color: rgba(255, 255, 255, 0.86); }
.hero2-addr a { color: var(--amber-soft); font-weight: 500; }
.hero2-acts { display: grid; grid-template-columns: repeat(4, auto); gap: 10px; justify-content: start; }
.hero2-act { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 12px; font-size: 18px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.hero2-act:hover { text-decoration: none; background: rgba(255, 255, 255, 0.16); }
.hero2-act.is-main { background: var(--amber-soft); border-color: var(--amber-soft); color: #14213d; font-weight: 700; }
@media (max-width: 760px) {
  .hero2-inner { padding: 26px 18px 28px; }
  .hero2::after { background: linear-gradient(180deg, rgba(12, 20, 40, 0.72) 0%, rgba(12, 20, 40, 0.6) 100%); }
  .hero2-card { min-width: 0; }
  .hero2-title { font-size: 32px; }
  .hero2-date { margin-bottom: 12px; }
  .hero2-times li { font-size: 17px; grid-template-columns: 100px 1fr; }
  .hero2-times li.is-main { font-size: 20px; }
  .hero2-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero2-act { padding: 0 6px; font-size: 17px; min-width: 0; }
  .hero2-addr span { min-width: 0; overflow-wrap: anywhere; }
  .hero2-act.is-main { grid-column: 1 / -1; }
}

/* ---------- Tiles ---------- */
.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: 56px 22px 0;
}
.tile + .tile, .tile + .tile-grid, .tw + .tile,
.tw + .ministry-split, .ministry-split + .tile { margin-top: 12px; }
.tile-copy { position: relative; max-width: 980px; margin: 0 auto; }
.tile-light { background: var(--gray); }
.tile-white { background: var(--bg); }
.tile-dark { background: #000; color: #f5f5f7; }
.tile-dark .link-more { color: var(--link-dark); }
.tile-dark .subhead, .tile-dark .subhead-sm, .tile-dark .kicker { color: #a1a1a6; }

.headline {
  font-size: 56px;
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.headline-verse {
  font-size: 38px;
  line-height: 1.3;
  max-width: 820px;
  margin: 0 auto;
}
.subhead {
  font-size: 30px;
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: 0.007em;
  margin: 8px 0 0;
}
.kicker { font-size: 19px; font-weight: 600; color: var(--text-2); margin: 0 0 8px; }
.headline-sm { font-size: 42px; line-height: 1.1; font-weight: 600; margin: 0; }
.subhead-sm { font-size: 23px; line-height: 1.38; margin: 6px 0 0; color: var(--text-2); }

.ctas { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.pill {
  display: inline-block;
  padding: 11px 21px;
  border-radius: 980px;
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  font-size: 19px;
  line-height: 1.18;
  transition: background 0.2s;
}
.pill:hover { background: #0077ed; text-decoration: none; }
.pill.is-off, .pill.is-off:hover { background: #dedad2; border-color: #dedad2; color: #6f695f; cursor: not-allowed; }
.pill-outline { background: transparent; color: var(--link-dark); border-color: var(--link-dark); }
.pill-outline:hover { background: var(--link-dark); color: #fff; }
.link-more { font-size: 19px; }
.link-more::after { content: " ›"; }

/* Hero: church at night */
.tile-hero {
  min-height: min(600px, 66vh);
  background: var(--night);
  color: #fff;
  padding-top: 48px;
}
.tile-hero .tile-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 75%;
}
.tile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 18, 38, 0.92) 0%, rgba(11, 18, 38, 0.55) 34%, rgba(11, 18, 38, 0) 60%);
}
.tile-hero .subhead { color: #e8e8ed; }
.tile-hero .pill-outline { color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.tile-hero .pill-outline:hover { background: #fff; color: var(--text); }
.lang-switch {
  display: inline-flex;
  margin-top: 26px;
  padding: 4px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang-switch button {
  min-width: 108px;
  padding: 10px 22px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lang-switch button:hover { background: rgba(255, 255, 255, 0.12); }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--text); font-weight: 600; }
.hero-logo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  border-radius: 50%;
  filter: invert(1);           /* white line-art on the night sky */
  mix-blend-mode: screen;
}

/* News + live stream, side by side */
/* 本週家訊 */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 980px;
  background: var(--amber);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.verse {
  position: relative;
  margin: 0 auto;
  max-width: 460px;
  padding: 18px 0 0;
  background: none;
  border-radius: 0;
}
.verse::before {
  content: "“";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, var(--serif);
  font-size: 72px;
  line-height: 1;
  color: var(--amber);
  opacity: 0.35;
}
.verse p {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #2b2118;
  margin: 0;
}
.verse cite {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.verse cite::before { content: "— "; }
.news-alt { margin: 28px 0 0; font-size: 17px; }
.news-alt .link-more { font-size: 17px; }
.past { list-style: none; max-width: 360px; margin: 28px auto 14px; padding: 0; text-align: left; }
.past li { border-top: 1px solid rgba(184, 106, 18, 0.18); }
.past li:last-child { border-bottom: 1px solid rgba(184, 106, 18, 0.18); }
.past a { display: flex; justify-content: space-between; padding: 10px 2px; color: var(--text); font-size: 17px; }
.past a:hover { color: var(--amber); text-decoration: none; }
.past-title { color: var(--text-2); }
.past a::after { content: "›"; color: var(--text-2); margin-left: 8px; }
.past a .past-title { margin-left: auto; }
.video {
  position: relative;
  margin: 24px auto 0;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 中文事工 | English Ministry over the sanctuary photo; the chosen language goes first */
.ministry-split {
  display: flex;
  min-height: min(620px, 80vh);
  background: #fff;
}
.ms-panel {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 44px 44px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0) 60%);
  transition: background 0.3s;
}
.ms-panel + .ms-panel { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.ms-panel:hover { text-decoration: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%); }
html[data-lang="en"] .ms-en { order: -1; }
html[data-lang="en"] .ms-en + .ms-zh { border-left: 1px solid rgba(255, 255, 255, 0.25); }
html[data-lang="en"] .ms-zh + .ms-en { border-left: 0; }
.ms-kicker { font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-soft); }
.ms-name { font-size: 48px; line-height: 1.1; font-weight: 600; margin-top: 4px; }
.ms-zh .ms-name { font-family: var(--serif); letter-spacing: 0.06em; }
.ms-meta { font-size: 21px; color: #e8e8ed; margin-top: 6px; }
.ms-go { margin-top: 18px; font-size: 19px; color: #fff; }
.ms-go::after { content: " ›"; transition: margin 0.2s; }
.ms-panel:hover .ms-go::after { margin-left: 4px; }

.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tile grid (2-up) */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 12px; }
.tile-grid .tile { margin-top: 0; }
.tile-grid-2 { grid-template-columns: 1fr 1fr; }
.tile-sm { padding: 52px 32px 48px; }

/* 直播 + 認識立石教會 side by side (home): a big video per tile, the words fitted tightly around it */
.tile-pair { margin-top: 12px; }
.tile-live, .tile-welcome { background: var(--night); padding: 22px 14px 18px; text-align: left; display: flex; flex-direction: column; }
.pair-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0 6px 14px; }
.pair-head .kicker { margin: 0; font-size: 16px; color: var(--amber-soft); }
.pair-head h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; }
.tile-pair .video { margin: 0; width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.welcome-video { background: #000; }
.welcome-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pair-strip { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 6px 0; padding: 0; font-size: 16px; line-height: 1.5; color: #d2d2d7; }
.pair-strip li { min-width: 0; padding-left: 12px; border-left: 2px solid rgba(243, 199, 126, 0.35); }
.pair-strip li > strong, .pair-strip li > span, .pair-strip li > a { display: block; }
.pair-strip strong { color: #f5f5f7; font-weight: 600; }
.pair-strip a { color: var(--link-dark); overflow-wrap: anywhere; }
.pair-strip .pair-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pair-wide > a { margin-left: auto; }
.pair-contacts a { color: var(--link-dark); overflow-wrap: anywhere; }

/* ---------- Church calendar ---------- */
.tile-calendar { padding-bottom: 64px; }
.tile-calendar .kicker { color: var(--amber); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
.sample-badge { display: inline-block; margin: 14px 0 0; padding: 4px 12px; border-radius: 980px; background: var(--cream); color: var(--amber); font-size: 15px; }
.cal { max-width: 1040px; margin: 36px auto 0; text-align: left; }
.cal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-title { flex: 1; margin: 0; font-size: 28px; font-weight: 600; }
.cal-nav, .cal-today {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 980px;
  font: inherit;
  cursor: pointer;
}
.cal-nav { width: 36px; height: 36px; font-size: 22px; line-height: 1; order: 2; }
.cal-today { padding: 7px 16px; font-size: 16px; order: 3; }
.cal-nav:hover, .cal-today:hover { background: var(--gray); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 980px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}
.cal-chip .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--m); }
.cal-chip[aria-pressed="false"] { color: var(--text-2); background: var(--gray); border-color: transparent; }
.cal-chip[aria-pressed="false"] .sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--m); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { padding: 0 8px 8px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.cal-grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cal-cell {
  position: relative;
  min-height: 118px;
  padding: 6px 6px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}
.cal-cell.is-out { background: #fafafc; }
.cal-cell.is-out .cal-day { color: #b0b0b5; }
.cal-cell.is-sel { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-day {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.cal-cell.is-today .cal-day { background: #e8590c; color: #fff; }
.cal-evs { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.cal-ev {
  display: block;
  padding: 2px 6px 2px 7px;
  border-left: 3px solid var(--m);
  border-radius: 5px;
  background: color-mix(in srgb, var(--m) 12%, white);
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev:hover { text-decoration: none; background: color-mix(in srgb, var(--m) 22%, white); }
.cal-ev-time { color: color-mix(in srgb, var(--m) 70%, black); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-more { align-self: flex-start; border: 0; background: none; padding: 0 6px; font: inherit; font-size: 15px; color: var(--link); cursor: pointer; }
.cal-dots { display: none; }
.cal-agenda { margin-top: 20px; padding: 20px 24px; border-radius: 18px; background: var(--gray); }
.cal-agenda h4 { margin: 0 0 10px; font-size: 21px; }
.cal-agenda ul { list-style: none; margin: 0; padding: 0; }
.cal-agenda li a {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0 10px 14px;
  border-left: 4px solid var(--m);
  margin-bottom: 8px;
  background: #fff;
  border-radius: 8px;
  color: var(--text);
}
.cal-agenda li a:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.ag-time { font-size: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ag-title { font-size: 19px; font-weight: 500; }
.ag-m { font-size: 15px; color: var(--m); padding-right: 14px; white-space: nowrap; }
.ag-empty { color: var(--text-2); padding: 6px 0; }

/* ---------- 主日學 ---------- */
.tile-ss { padding-bottom: 64px; }
.tile-ss .kicker { color: var(--amber); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
.ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
html[data-lang="en"] .ss-en { order: -1; }
.ss-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border-radius: 20px;
  background: #fff;
  border-top: 5px solid var(--m);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ss-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.ss-tag { align-self: flex-start; padding: 3px 10px; border-radius: 980px; background: color-mix(in srgb, var(--m) 12%, white); color: var(--m); font-size: 15px; font-weight: 600; }
.ss-card h3 { margin: 14px 0 4px; font-size: 26px; }
.ss-time { margin: 0 0 16px; color: var(--text-2); font-size: 17px; }
.ss-classes { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.ss-classes li { display: flex; flex-direction: column; padding: 10px 12px; margin-bottom: 8px; border: 1px dashed var(--line); border-radius: 10px; }
.ph { font-weight: 600; color: #b0b0b5; }
.ph-sub { font-size: 15px; color: #b0b0b5; }
.ss-classes-live li { border-style: solid; border-color: #e8e8ed; background: #fff; }
.ss-cname { font-weight: 600; }
.ss-csub { font-size: 15px; color: var(--text-2); }
.bp-sslist { margin: 4px 0 0; padding-left: 1.4em; color: #2b2118; font-family: var(--serif); font-size: 18px; line-height: 1.55; }
.bp-sslist li::marker { color: #a31d1d; font-size: 16px; }
.ss-card .link-more { color: var(--link); font-size: 17px; }

/* ---------- Ministry pages ---------- */
.mp-hero {
  padding: 72px 22px 64px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--m) 0%, color-mix(in srgb, var(--m) 55%, black) 100%);
}
.mp-hero-inner { max-width: 760px; margin: 0 auto; }
.mp-hero .kicker a { color: rgba(255, 255, 255, 0.8); }
.mp-hero .subhead { color: rgba(255, 255, 255, 0.85); }
.mp-summary { font-size: 21px; line-height: 1.6; margin: 20px auto 0; max-width: 600px; color: rgba(255, 255, 255, 0.92); }
.pill-white { background: #fff; border-color: #fff; color: var(--text); }
.pill-white:hover { background: #f0f0f2; }
.template-note { padding: 12px 16px; border-radius: 12px; background: var(--cream); color: var(--amber); font-size: 16px; margin: 0 0 8px; }
.mp-h2 { font-size: 30px; margin: 40px 0 12px; }
.mp-list { list-style: none; padding: 0; margin: 0; }
.mp-list li { display: flex; flex-direction: column; padding: 12px 0 12px 16px; border-left: 4px solid var(--m); margin-bottom: 10px; background: var(--gray); border-radius: 8px; }
.mp-when { font-size: 16px; color: var(--text-2); }
.mp-what { font-size: 19px; font-weight: 500; }
.mp-back { margin-top: 48px; }

/* Ministry sub-menu (ministries.json → subpages) */
.mp-subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.mp-subnav a { padding: 6px 16px; border-radius: 980px; color: var(--text); font-size: 17px; }
.mp-subnav a:hover { text-decoration: none; background: var(--gray); }
.mp-subnav a[aria-current="page"] { background: var(--m); color: #fff; font-weight: 600; }
.mp-feature { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; margin: 0 0 24px; padding: 12px; border-radius: 16px; background: var(--gray); color: var(--text); }
.mp-feature:hover { text-decoration: none; background: #ececf0; }
.mp-feature img { width: 100%; height: auto; border-radius: 10px; display: block; }
.mp-feature strong { display: block; font-size: 21px; margin-bottom: 4px; }
.mp-feature span { font-size: 17px; color: var(--text-2); }
@media (max-width: 520px) { .mp-feature { grid-template-columns: 1fr; } }
.mp-hero-sm { padding: 48px 22px 44px; }
.mp-summary small { font-size: 17px; opacity: 0.8; }

/* 中文事工 › 宣教 / 兒童敬拜 */
.mx-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 16px 0; }
.mx-jump a { padding: 6px 14px; border-radius: 980px; border: 1px solid var(--line); color: var(--text); font-size: 16px; }
.mx-jump a:hover { text-decoration: none; border-color: var(--m); color: var(--m); }
.mx .container:not(.narrow) { max-width: 1080px; }
.mx-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: start; padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.mx-block:first-child { border-top: 0; padding-top: 8px; }
.mx-flip .mx-photo { order: 2; }
.mx-photo { margin: 0; position: sticky; top: 90px; }
.mx-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.mx-portrait img { max-width: 380px; margin: 0 auto; }
.mx-kicker { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.12em; color: var(--m); }
.mx-text h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.25; }
.mx-text h3 { margin: 22px 0 6px; font-size: 21px; }
.mx-text p, .mx-list li { font-size: 19px; line-height: 1.8; }
.mx-list { list-style: none; padding: 0; margin: 0 0 14px; }
.mx-list li { padding: 12px 0 12px 16px; border-left: 3px solid var(--m); margin-bottom: 12px; }
.mx-list strong { display: block; font-size: 20px; }
.mx-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.mx-tags li { padding: 5px 14px; border-radius: 980px; background: var(--gray); font-size: 17px; }
.cw-lead { font-size: 21px; line-height: 1.85; }
.cw-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.cw-facts div { flex: 1 1 180px; padding: 14px 18px; border-radius: 14px; background: var(--gray); border-left: 4px solid var(--m); }
.cw-facts span { display: block; font-size: 15px; color: var(--text-2); }
.cw-facts strong { font-size: 20px; }
.cw-table { width: 100%; border-collapse: collapse; font-size: 19px; }
.cw-table th, .cw-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.cw-table th { font-size: 16px; color: var(--text-2); font-weight: 600; }
.cw-mission { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cw-mission li { padding: 16px; border-radius: 14px; background: var(--gray); font-size: 17px; line-height: 1.6; }
.cw-mission strong { display: block; font-size: 20px; color: var(--m); margin-bottom: 4px; }

/* 奉獻 / Give (/give/; the ways to give are also a page in the home Bible) */
.give-page p, .give-page li { font-size: 19px; line-height: 1.8; }
.give-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; padding: 16px 20px; border-radius: 14px; background: var(--gray); font-size: 18px; }
.give-dl dt { color: var(--text-2); }
.give-dl dd { margin: 0; }
.give-address { padding: 14px 20px; border-left: 4px solid var(--amber); background: var(--ivory); font-style: normal; font-size: 19px; line-height: 1.7; }

/* 關於 › 教會同工 */
.ab-staff { padding-top: 24px; }
.ab-staff-photo { margin: 18px 0 0; }
.ab-staff-photo img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px rgba(35, 26, 16, 0.18); }
.ab-staff-names { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; text-align: center; }
.ab-staff-names strong { display: block; font-family: var(--serif); font-size: 24px; color: #231a10; }
.ab-staff-names span { display: block; font-size: 17px; color: var(--gold); letter-spacing: 0.12em; }
.ab-staff-names a { display: block; margin-top: 2px; font-size: 15px; overflow-wrap: anywhere; }

/* 英文事工 › Groups / Events / Youth (em.json) */
.em-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.em-photos figure { margin: 0; }
.em-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.em-photos figcaption { font-size: 16px; color: var(--text-2); margin-top: 4px; }

/* ---------- 中文事工 › 小組 Family Tree ---------- */
.sg-section .container { max-width: 1100px; }
.sg-hint { text-align: center; margin: 0 0 14px; font-size: 17px; }
.sg-tree { position: relative; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); background: #dcecf6; }
.sg-swipe { display: none; }
@media (max-width: 760px) { .sg-swipe { display: inline; } }
/* Drawn tree (src/_data/familyTree.js) */
.sg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sg-grown svg.ft { display: block; width: 100%; min-width: 760px; height: auto; font-family: "LXGW WenKai TC", var(--serif); }
.ft .ft-sign { font-family: "Dancing Script", cursive; }
.ft-tag { cursor: pointer; }
.ft-tag rect { fill: #fbf5df; stroke-width: 3.5; transition: fill 0.15s, stroke-width 0.15s; }
.ft-tag text { fill: #2b1a0e; }
.ft-now rect { stroke: #c4243f; }
.ft-past rect { stroke: #7a4ea3; }
.ft-special rect { stroke: #2d57a8; }
.ft-tag:hover rect, .ft-tag:focus-visible rect { fill: #fff; stroke-width: 5; }
.ft-tag:focus { outline: none; }
.ft-tag.is-on rect { fill: #ffe9a8; stroke-width: 6; }
.ft-line { transition: opacity .2s; }
.ft.ft-focus .ft-line:not(.is-lit) { opacity: .12; }
.ft.ft-focus .ft-line.is-lit path:last-child { stroke-width: 7.5; }
.ft.ft-focus .ft-tag:not(.is-kin) { opacity: .45; }
.sg-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 10px 14px; background: #fff; font-size: 16px; color: var(--text-2); }
.sg-key::before { content: ""; display: inline-block; width: 18px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 3px solid; border-radius: 2px; background: #fbf5df; }
.sg-key-now::before { border-color: #c4243f; }
.sg-key-past::before { border-color: #7a4ea3; }
.sg-key-special::before { border-color: #2d57a8; }
.sg-key-arrow::before { content: "➜"; color: #e8590c; margin-right: 6px; }
/* Original artwork with clickable labels */
.sg-original { margin: 28px 0 0; }
.sg-original summary { cursor: pointer; font-size: 19px; font-weight: 600; padding: 8px 0; }
.sg-photo img { display: block; width: 100%; height: auto; }
.sg-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-photo rect { fill: transparent; stroke: transparent; stroke-width: 5; cursor: pointer; transition: fill 0.15s, stroke 0.15s; }
.sg-photo a:hover rect, .sg-photo a:focus-visible rect { fill: rgba(255, 255, 255, 0.25); stroke: var(--m); }
.sg-photo a:focus { outline: none; }
.sg-photo a.is-on rect { fill: rgba(255, 214, 102, 0.35); stroke: var(--m); stroke-width: 7; }
.sg-panel { position: relative; margin: 18px auto 0; max-width: 640px; padding: 22px 26px; border-radius: 18px; background: #fff; border-top: 5px solid var(--m, var(--amber)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.sg-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--gray); font-size: 24px; line-height: 1; cursor: pointer; color: var(--text); }
.sg-kicker { margin: 0; font-size: 15px; color: var(--text-2); }
.sg-now { color: #2b8a3e; font-weight: 600; }
.sg-past { color: var(--text-2); }
.sg-panel h3 { margin: 4px 0 2px; font-size: 28px; }
.sg-span { margin: 0 0 12px; color: var(--text-2); }
.sg-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; }
.sg-dl dt { color: var(--text-2); }
.sg-dl dd { margin: 0; }
.sg-desc { line-height: 1.6; }
.sg-rel { margin: 8px 0 0; font-size: 17px; }
.sg-note { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--cream); color: var(--amber); font-size: 16px; }
.sg-verse { margin: 32px auto 0; max-width: 760px; text-align: center; font-family: var(--serif); font-size: 21px; line-height: 1.7; }
.sg-verse cite { display: block; margin-top: 6px; font-family: var(--font); font-style: normal; font-size: 16px; color: var(--text-2); }
.sg-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.sg-count { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 980px; background: var(--gray); font-size: 16px; text-align: center; vertical-align: middle; color: var(--text-2); }
.sg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sg-list a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--gray); color: var(--text); font-size: 17px; border-left: 4px solid var(--m, var(--amber)); }
.sg-list a:hover { text-decoration: none; background: #ececf0; }
.sg-leads { display: block; font-size: 15px; color: var(--muted, #6e6e73); margin-top: 2px; white-space: nowrap; }
.sg-list:not(.sg-list-past) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sg-list-past a { border-left-color: var(--line); color: var(--text-2); }
.sg-years { font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- 網站維護 ---------- */
.a-roles { padding: 3px 10px; border-radius: 980px; background: var(--cream); color: var(--amber); font-size: 15px; }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.a-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
}
.a-card:hover { text-decoration: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); }
.a-card strong { font-size: 20px; }
.a-card span:last-child { font-size: 16px; color: var(--text-2); }
.a-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--c); color: #fff; font-weight: 700; }

/* ---------- 教會公告 announcements tile (home) ---------- */
/* 本週 / This Week (home): 1 scripture, 2 posters, 3 週報 links — verse and links on the left, the poster big on the right */
.tw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "verse ann" "links ann"; gap: 0; margin: 12px 0 0; background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); }
.tw-verse { grid-area: verse; display: flex; flex-direction: column; justify-content: center; padding: 30px 32px 12px; text-align: center; }
.tw-meta { margin: 0 0 18px; }
.tw .verse { max-width: 520px; }
.tw .verse p { font-size: clamp(23px, 2vw, 30px); line-height: 1.6; }
.tw .verse cite { font-size: 18px; }
.tw-links { grid-area: links; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; padding: 8px 32px 26px; }
.tw-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 14px; background: transparent; border: 1px solid rgba(184, 106, 18, 0.35); color: var(--text); text-align: left; position: relative; transition: background 0.2s, box-shadow 0.2s; }
.tw-link::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--amber); font-size: 22px; }
.tw-link:hover { text-decoration: none; background: rgba(184, 106, 18, 0.07); }
.tw-link.tw-main { grid-column: 1 / -1; padding: 16px 20px; background: var(--amber); border-color: var(--amber); color: #fff; }
.tw-link.tw-main .nl-label { font-size: 21px; }
.tw-link.tw-main .nl-sub { color: rgba(255, 255, 255, 0.85); }
.tw-link.tw-main::after { color: #fff; font-size: 28px; }
.tw-link.tw-main:hover { background: #a35d0f; }
/* 教會公告 — the board (home 本週 band) and the text cards (home and /announcements/) */
.tw .an-board { grid-area: ann; display: flex; flex-direction: column; padding: 26px 28px 22px; background: transparent; border-left: 1px solid var(--line); }
.tw .an-cards { gap: 0; }
.tw .anc { padding: 14px 10px; border: 0; border-bottom: 1px solid rgba(184, 106, 18, 0.22); border-radius: 0; background: transparent; box-shadow: none; }
.tw .anc:last-child { border-bottom: 0; }
.tw .anc:hover { background: rgba(184, 106, 18, 0.06); box-shadow: none; }
.tw .anc-title a::after { border-radius: 0; }
.an-board-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--amber); }
.an-board-head h2 { margin: 0; font-family: var(--serif); font-size: 26px; letter-spacing: 0.06em; color: #231a10; }
.an-cards { display: grid; gap: 12px; }
.an-board .an-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 10px; text-align: center; }
.an-board.has-items .an-empty { display: none; }
.an-empty-title { margin: 0; font-family: var(--serif); font-size: 26px; color: #231a10; }
.an-empty-text { margin: 8px 0 12px; max-width: 360px; font-size: 17px; color: var(--text-2); }
.anc { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--ivory); border: 1px solid #ece3d2; transition: box-shadow 0.2s, background 0.2s; }
.anc:hover { background: #fff; box-shadow: 0 10px 26px rgba(35, 26, 16, 0.1); }
.anc-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; background: var(--amber); color: #fff; line-height: 1.1; }
.anc-date small { font-size: 15px; opacity: 0.9; }
.anc-date b { font-family: var(--serif); font-size: 28px; }
.anc-date-none { background: var(--navy); font-family: var(--serif); font-size: 17px; letter-spacing: 0.1em; }
.anc-title { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.35; }
.anc-title a { color: #231a10; }
.anc-title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } /* the whole card opens the details */
.anc-title a:hover { text-decoration: none; }
.anc-meta { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--amber); }
.anc-sum { margin: 4px 0 0; font-size: 17px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.anc-side img { display: block; width: 92px; height: 70px; object-fit: contain; border-radius: 10px; background: #fff; }
/* 自動排版 (announce.js sets is-wide / is-tall from the photo's shape) on /announcements/: a wide poster across the card,
   whole, under the text; a tall or square one beside it, larger */
.an-cards-page .anc.is-wide .anc-side { grid-column: 1 / -1; flex-direction: column; align-items: stretch; }
.an-cards-page .anc.is-wide .anc-side img { width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.an-cards-page .anc.is-wide .anc-go { align-self: flex-end; }
.an-cards-page .anc.is-tall .anc-side img { width: 130px; height: auto; max-height: 190px; }
.anc-go { position: relative; z-index: 1; padding: 6px 14px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.anc-go:hover { text-decoration: none; background: #173d70; }
/* 未開放: a 特別活動 sign-up not open yet — greyed, not a link */
.anc-off { display: inline-block; padding: 6px 14px; border-radius: 980px; background: #e8e6e1; color: #6e6e73; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: not-allowed; }
.anc-go.anc-off, .anc-go.anc-off:hover { background: #e8e6e1; color: #6e6e73; }
.an-cards-page { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.an-cards-page .anc-sum { -webkit-line-clamp: 4; }
.an-board .anc-sum { -webkit-line-clamp: 1; }
/* narrower screens: verse and links side by side on top, the poster full width below */
@media (max-width: 1180px) and (min-width: 735px) {
  .tw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "verse links" "ann ann"; }
  .tw-verse { padding: 36px 28px 30px; }
  .tw-links { align-content: center; padding: 30px 28px 30px 0; }
}


/* live stream band, bottom of the home page */

/* /announcements/ and detail */
.an-page-hero { padding-bottom: 40px; }
.an-detail { padding: 56px 22px 80px; background: var(--ivory); }
.an-detail-inner { max-width: 760px; margin: 0 auto; }
.an-detail-title { margin: 0; font-family: var(--serif); font-size: clamp(32px, 5vw, 46px); line-height: 1.25; color: #231a10; }
.an-detail-meta { margin: 10px 0 14px; font-size: 19px; font-weight: 600; color: var(--amber); }
.an-detail-sum { margin: 0 0 22px; font-size: 21px; line-height: 1.8; color: #3a2d20; }
.an-detail-figure { margin: 0 0 26px; }
.an-detail-figure img { width: 100%; border-radius: 18px; box-shadow: 0 20px 44px rgba(35, 26, 16, 0.15); }
.an-detail-body { font-size: 20px; line-height: 1.9; color: #2b2118; }
.an-detail-body img { max-width: 100%; height: auto; border-radius: 12px; }
.an-detail-body table { border-collapse: collapse; width: 100%; }
.an-detail-body td, .an-detail-body th { border: 1px solid #e7dcc7; padding: 8px 10px; }

/* announcements management (portal) */
.am-form { display: grid; gap: 14px; padding: 22px; border-radius: 18px; background: var(--gray); }
.am-form label { display: grid; gap: 6px; font-size: 16px; font-weight: 600; color: var(--text); }
.am-form input, .am-form textarea { font: inherit; font-weight: 400; font-size: 17px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.am-form textarea { font-family: inherit; line-height: 1.6; }
.am-buttons { display: flex; gap: 10px; align-items: center; }
.am-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.am-form .pill { justify-self: start; cursor: pointer; }
.am-status { margin: 0; color: var(--amber); }
.am-list { display: grid; gap: 12px; }
.am-item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #e8e8ed; }
.am-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 10px; background: var(--gray); }
.am-imginfo { margin: -4px 0 0; }
.am-curphoto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.am-curphoto img { display: block; max-width: min(100%, 360px); max-height: 240px; border-radius: 10px; border: 1px solid #ece3d2; background: var(--gray); }
.am-curphoto label { display: flex; align-items: center; gap: 6px; }
.am-imginfo.am-warn { color: #b35c00; background: #fff4e5; border: 1px solid #ffd8a8; border-radius: 10px; padding: 8px 12px; }
.am-item.is-expired, .am-item.is-no-expiry { opacity: 0.6; }
.am-item-body { display: flex; flex-direction: column; gap: 4px; }
.am-item.no-photo { grid-template-columns: 1fr; }
.am-item-meta { font-size: 16px; color: var(--amber); font-weight: 600; }
.am-item-sum { margin: 0; font-size: 16px; color: var(--text-2); }
.am-item.is-editing { outline: 3px solid var(--blue); }
.am-badge { align-self: flex-start; padding: 1px 9px; border-radius: 980px; font-size: 15px; background: var(--gray); color: var(--text-2); }
.am-item.is-active .am-badge { background: #e6f4ea; color: #2b8a3e; }
.am-item.is-upcoming .am-badge { background: #eef4ff; color: var(--blue); }
.am-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 16px; }
.am-actions input { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; }
.am-actions button { font: inherit; padding: 4px 12px; border: 1px solid var(--line); border-radius: 980px; background: #fff; cursor: pointer; }
.am-actions .am-danger { color: #c2255c; border-color: #f3c3d4; }

/* ---------- Home: 每週聚會 + 主日學 tiles (under the ministries photo) ---------- */
.ministry-split + .tile-grid, .tile-grid + .tile-grid { margin-top: 12px; }
.tile-link { display: flex; flex-direction: column; align-items: center; color: var(--text); text-decoration: none; transition: box-shadow 0.25s, transform 0.25s; }
.tile-link:hover { text-decoration: none; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08); }
.tile-link .kicker { color: var(--amber); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
.tile-link .link-more { margin-top: auto; padding-top: 22px; color: var(--link); }
.tile-link:hover .link-more { text-decoration: underline; }
.tile-week { background: var(--gray); }
.tile-ss-mini { background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); }
.wk-list, .ssm-list { list-style: none; margin: 22px 0 0; padding: 0; width: 100%; max-width: 440px; text-align: left; }
.wk-list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid #e3e3e8; }
.wk-list li:last-child { border-bottom: 1px solid #e3e3e8; }
.wk-day { font-weight: 600; font-size: 17px; }
.wk-items { display: flex; flex-direction: column; gap: 4px; font-size: 17px; color: #3a3a3f; line-height: 1.45; }
.wk-item { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.wk-time { color: var(--amber); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssm-list { display: flex; flex-direction: column; }
.ssm-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(184, 106, 18, 0.18); }
.ssm-list li:last-child { border-bottom: 1px solid rgba(184, 106, 18, 0.18); }
html[data-lang="en"] .ssm-en { order: -1; }
.ssm-name { font-family: var(--serif); font-size: 21px; color: #2b2118; }
.ssm-time { font-size: 16px; color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssm-note { margin: 14px 0 0; font-size: 16px; color: var(--text-2); }

/* /sundayschool/ extra links */
.ss-more { padding-top: 40px; }
.ss-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- ECC 維護 (portal) ---------- */
.ecc-form select, .rb-form select { font: inherit; font-weight: 400; font-size: 17px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ecc-map { margin: 0; }
.ecc-map figcaption { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.ecc-map svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.ecc-room { cursor: pointer; outline: none; }
.ecc-room polygon { fill: #f7f7f9; stroke: #3a3a3f; stroke-width: 3; stroke-linejoin: round; transition: fill 0.15s; }
.ecc-room-corridor polygon { fill: #fbfbfd; stroke-dasharray: 10 8; stroke-width: 2; }
.ecc-room text { font-family: var(--font); font-size: 28px; font-weight: 600; fill: #1d1d1f; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.ecc-room:hover polygon, .ecc-room:focus-visible polygon { fill: #e8f1fd; }
.ecc-room.is-on polygon { fill: var(--blue); }
.ecc-room.is-on text { fill: #fff; }
.ecc-photos-label input[type=file] { padding: 14px; border: 2px dashed #c7c7cc; background: #fff; }
.ecc-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.ecc-previews img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.ecc-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ecc-filters { display: flex; gap: 6px; }
.ecc-filters button { font: inherit; font-size: 16px; padding: 5px 14px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.ecc-filters button[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.ecc-list { display: grid; gap: 12px; }
.ecc-item { padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #e8e8ed; border-left: 5px solid #8e8e93; }
.ecc-item.is-new { border-left-color: var(--blue); }
.ecc-item.is-assigned { border-left-color: #7048e8; }
.ecc-item.is-inprogress { border-left-color: #e8590c; }
.ecc-item.is-resolved { border-left-color: #2b8a3e; }
.ecc-item.is-closed { opacity: 0.7; }
.ecc-item header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ecc-id { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ecc-status { padding: 1px 10px; border-radius: 980px; background: var(--gray); font-size: 15px; }
.ecc-urgent { padding: 1px 10px; border-radius: 980px; background: #fdecf2; color: #c2255c; font-size: 15px; font-weight: 600; }
.ecc-meta { margin: 6px 0 0; font-size: 16px; color: var(--text-2); }
.ecc-desc { margin: 8px 0 0; white-space: pre-wrap; }
.ecc-notes { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gray); font: inherit; font-size: 15px; white-space: pre-wrap; color: #3a3a3f; }
.ecc-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ecc-thumbs img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--gray); }
.ecc-thumbs .link-more { border: 0; background: none; font: inherit; color: var(--link); cursor: pointer; padding: 0; }
.ecc-review { display: grid; grid-template-columns: 150px 1fr 1.4fr auto; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e8e8ed; }
.ecc-review select, .ecc-review input { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.ecc-review .pill { padding: 8px 16px; font-size: 16px; cursor: pointer; }

/* ---------- 每週聚會 · 主日學 as an open Bible (home) ---------- */
.bible-wrap { margin-top: 12px; padding: 44px 16px 36px; background: radial-gradient(120% 120% at 50% 0%, #f7f1e6 0%, #efe5d3 60%, #e7dbc4 100%); }
.bible {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 16px 18px 20px; border-radius: 22px; outline: none;
  background:
    radial-gradient(140% 90% at 30% 10%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.035) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    linear-gradient(160deg, #5a3520 0%, #3d2214 55%, #2a170c 100%);
  box-shadow: 0 30px 70px rgba(43, 23, 12, 0.35), 0 4px 10px rgba(43, 23, 12, 0.25), inset 0 0 0 2px rgba(212, 169, 78, 0.35), inset 0 0 0 7px rgba(0, 0, 0, 0.15);
}
.bible:focus-visible { box-shadow: 0 0 0 3px var(--blue), 0 30px 70px rgba(43, 23, 12, 0.35); }
.bible-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; min-height: 580px; perspective: 2600px; }
.bible-page { position: relative; isolation: isolate; padding: 38px 46px 58px; color: #2b2118; overflow: hidden; }
/* faint printed-Bible text behind the page content */
.bp-bg { position: absolute; inset: 74px 40px 48px; z-index: -1; padding: 0; overflow: hidden; pointer-events: none; user-select: none;
  column-count: 2; column-gap: 28px; column-rule: 1px solid rgba(90, 53, 32, 0.25);
  font-family: var(--serif); font-size: 15px; line-height: 2; text-align: justify; color: #6b4a2b; opacity: 0.05; }
/* the church logo, faintly printed in the middle of every page (and on the turning leaves) */
.bible-page::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(300px, 70%); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url("/assets/logo.jpg") center / contain no-repeat; filter: sepia(1) saturate(0.8); mix-blend-mode: multiply; opacity: 0.09; pointer-events: none; }
.bp-bg p { margin: 0 0 10px; }
.bp-bg sup { font-size: 15px; color: #a31d1d; margin: 0 2px; }
.bible-left {
  border-radius: 12px 3px 3px 12px;
  background: linear-gradient(to right, #fbf6ea 0%, #fbf6ea 84%, #efe3c9 95%, #e2d2ad 100%);
  box-shadow: -2px 0 0 #f1e8d4, -4px 0 0 #e4d6b6, -6px 0 0 #d8c69c, -7px 0 0 #b8914a;
}
.bible-right {
  border-radius: 3px 12px 12px 3px;
  background: linear-gradient(to left, #fbf6ea 0%, #fbf6ea 84%, #efe3c9 95%, #e2d2ad 100%);
  box-shadow: 2px 0 0 #f1e8d4, 4px 0 0 #e4d6b6, 6px 0 0 #d8c69c, 7px 0 0 #b8914a;
}
.bible-spread.is-single { grid-template-columns: 1fr; }
.bible-spread.is-single .bible-right[data-right] { display: none; }
.bible-spread.is-single .bible-left { border-radius: 12px; background: linear-gradient(to right, #e9dcbf 0%, #fbf6ea 7%, #fbf6ea 100%); box-shadow: 2px 0 0 #f1e8d4, 4px 0 0 #e4d6b6, 5px 0 0 #b8914a; }

/* turning leaf */
.bible-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.33, 0.08, 0.2, 1), opacity 0.85s ease; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-back { transform: rotateY(180deg); }
.leaf-right { left: 50%; transform-origin: left center; }
.leaf-right.turn-next { transform: rotateY(-180deg); }
.leaf-left { left: 0; transform-origin: right center; }
.leaf-left.turn-prev { transform: rotateY(180deg); }
.leaf-full { left: 0; width: 100%; transform-origin: left center; }
.leaf-full.turn-next { transform: rotateY(-160deg); opacity: 0; }
.leaf-full.back-in { transform: rotateY(-160deg); opacity: 0; }
.leaf-full.back-in.turn-back { transform: none; opacity: 1; }
.leaf-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 30%); }

/* ribbon bookmark */
.bible-ribbon { position: absolute; top: -10px; left: calc(50% + 10px); z-index: 4; width: 16px; height: calc(100% + 58px); background: linear-gradient(90deg, #8e1a18 0%, #b32622 50%, #8e1a18 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 94%, 0 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); pointer-events: none; }
.bible-spread.is-single .bible-ribbon { left: auto; right: 34px; }

/* page corners (turn) */
.bible-corner { position: absolute; bottom: 0; z-index: 6; width: 56px; height: 56px; border: 0; padding: 0; cursor: pointer; background: transparent; transition: width 0.2s, height 0.2s; }
.bible-corner-next { right: 0; border-radius: 0 0 12px 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #e3d4b2 50%, #fffaf0 78%); }
.bible-corner-prev { left: 0; border-radius: 0 0 0 12px; background: linear-gradient(225deg, rgba(0, 0, 0, 0) 50%, #e3d4b2 50%, #fffaf0 78%); }
.bible-corner:hover, .bible-corner:focus-visible { width: 72px; height: 72px; }
.bible-corner:disabled { display: none; }
.bible-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; }
.bible-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #c9b48a; background: #fffaf0; color: #5a3520; font-size: 24px; line-height: 1; cursor: pointer; }
.bible-btn:disabled { opacity: 0.35; cursor: default; }
.bible-pos { min-width: 70px; text-align: center; font-family: var(--serif); color: #5a3520; font-variant-numeric: tabular-nums; }

/* page content — Bible style */
.bp-head { margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid #d9c89f; text-align: center; font-size: 15px; letter-spacing: 0.28em; color: #8a6a3a; text-transform: uppercase; }
.bp-title { margin: 0 0 14px; font-family: var(--serif); font-size: 32px; font-weight: 700; color: #2b2118; }
.bp-title::first-letter { color: #a31d1d; font-size: 1.25em; }
.bp-list { list-style: none; margin: 0; padding: 0; }
.bp-list li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dotted #e0d2b2; }
.bp-events li { grid-template-columns: 130px 1fr; }
html[data-lang="en"] .bp-ss .bp-ss-en { order: -1; }
.bp-ss { display: flex; flex-direction: column; }
.bp-note { margin: 16px 0 0; font-family: var(--serif); color: #5a4630; }
.bp-classes { margin: 0; }
.bp-classes dt { margin-top: 12px; font-family: var(--serif); font-weight: 700; font-size: 20px; }
.bp-classes dd { margin: 2px 0 0; color: #8a6a3a; }
.bp-link { display: inline-block; margin-top: 20px; font-family: var(--serif); color: #8e1a18; font-weight: 600; }
.bp-verse { margin: 40px 0 26px; padding: 0; background: none; text-align: center; }
.bp-verse p { font-family: var(--serif); font-size: 28px; line-height: 1.8; color: #2b2118; margin: 0; }
.bp-verse p::before, .bp-verse p::after { color: #b8914a; }
.bp-verse cite { display: block; margin-top: 12px; font-family: var(--serif); font-style: normal; color: #a31d1d; letter-spacing: 0.08em; }
.bp-links { list-style: none; margin: 0 auto; padding: 0; max-width: 300px; }
.bp-links li { text-align: center; padding: 8px 0; border-top: 1px dotted #e0d2b2; }
.bp-links a { font-family: var(--serif); color: #5a3520; }
.bp-num { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-family: var(--serif); font-size: 15px; color: #b8914a; }
.bp-blank { height: 100%; }
/* 詩篇 1 (opening page) */
.bp-psalm { margin: 56px 0 0; }
.bp-psalm p { font-size: 25px; line-height: 2; text-align: justify; text-indent: 0; }
.bp-psalm sup { font-size: 0.55em; color: #a31d1d; margin: 0 3px 0 6px; vertical-align: super; }
.bp-psalm p::before, .bp-psalm p::after { content: none; }
/* 中文事工 / 英文事工: the ministry's tabs as a table of contents */
html[data-lang="en"] .bp-psalm { margin-top: 30px; }
html[data-lang="en"] .bp-psalm p { font-size: 20px; line-height: 1.75; text-align: left; }
/* 奉獻 */
.bp-sign { margin: 34px 0 0; text-align: center; font-family: var(--serif); font-size: 22px; letter-spacing: 0.3em; color: #8a6a3a; }
.bp-title-2 { margin-top: 34px; padding-top: 22px; border-top: 1px solid #d9c89f; }
.bp-title-2 small { display: block; margin-top: 4px; font-size: 16px; font-weight: 400; color: #8a6a3a; }
.bp-title-2::first-letter { font-size: 1.25em; }

/* ---------- 家訊 tile: weekly message + newsletter links ---------- */
.news-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin: 22px auto 0; }
.news-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(184, 106, 18, 0.2); color: var(--text); text-align: left; position: relative; transition: background 0.2s, box-shadow 0.2s; }
.news-link::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--amber); font-size: 22px; }
.news-link:hover { text-decoration: none; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); }
.nl-label { font-weight: 600; font-size: 18px; }
.nl-sub { font-size: 15px; color: var(--text-2); }

/* hero: the church's name and address (the address opens the map) */
.hero-addr { margin: 12px 0 0; font-size: 21px; letter-spacing: 0.04em; }
.hero-addr a { color: rgba(255, 255, 255, 0.9); }
.hero-addr a::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.4em; border: 2px solid var(--amber-soft); border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(-2px); vertical-align: middle; } /* a map pin */
.hero-addr a:hover { color: #fff; text-decoration: underline; }

/* ---------- 信仰告白 ---------- */

/* ---------- 關於我們 /about/ — formal, light ---------- */
:root { --ivory: #fbf8f2; --gold: #b8914a; }
.ab-hero { padding: 88px 22px 56px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--ivory) 60%, #f4ecdc 100%); }
.ab-hero-inner { max-width: 820px; margin: 0 auto; }
.ab-eyebrow { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.ab-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 6vw, 64px); line-height: 1.15; letter-spacing: 0.08em; color: #231a10; }
.ab-sub { margin: 14px 0 0; font-size: 19px; color: var(--text-2); letter-spacing: 0.02em; }
.ab-rule { display: block; width: 64px; height: 1px; margin: 28px auto 0; background: var(--gold); position: relative; }
.ab-rule::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; background: var(--gold); transform: translateX(-50%) rotate(45deg); }

.ab-subnav { position: sticky; top: 64px; z-index: 50; display: flex; justify-content: center; gap: 6px; padding: 10px; background: rgba(251, 248, 242, 0.9); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid #ece3d2; }
.ab-subnav a { padding: 7px 18px; border-radius: 980px; font-size: 17px; color: var(--text); }
.ab-subnav a:hover { background: #f1e7d4; text-decoration: none; }

.ab-section { padding: 88px 22px; scroll-margin-top: 100px; }
.ab-wrap { max-width: 1080px; margin: 0 auto; }
.ab-narrow { max-width: 760px; }
.ab-label { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.ab-label-light { color: var(--amber-soft); text-align: center; }

.ab-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ab-lead { margin: 0 0 22px; font-family: var(--serif); font-size: 36px; line-height: 1.35; font-weight: 700; color: #231a10; }
.ab-intro-text p { font-size: 20px; line-height: 1.95; color: #3a3128; margin: 0 0 16px; text-align: justify; }
.ab-photo { margin: 0; }
.ab-photo img { display: block; width: 100%; border-radius: 22px; box-shadow: 0 30px 60px rgba(35, 26, 16, 0.18); }
.ab-photo figcaption { margin-top: 12px; font-size: 15px; color: var(--text-2); text-align: right; letter-spacing: 0.02em; }

.ab-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid #e7dcc7; border-bottom: 1px solid #e7dcc7; }
.ab-facts div { padding: 26px 12px; text-align: center; }
.ab-facts div + div { border-left: 1px solid #e7dcc7; }
.ab-facts dt { font-family: var(--serif); font-size: 38px; font-weight: 700; color: #231a10; line-height: 1.1; }
.ab-facts dd { margin: 8px 0 0; font-size: 16px; color: var(--text-2); letter-spacing: 0.06em; }

.ab-mission { padding: 88px 22px; background: linear-gradient(160deg, #16213f 0%, var(--night) 100%); color: #f5f5f7; }
.ab-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.ab-pillar { padding: 34px 28px 30px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(243, 199, 126, 0.25); text-align: center; }
.ab-pillar-en { display: block; font-family: Georgia, var(--serif); font-size: 32px; font-style: italic; color: var(--amber-soft); }
.ab-pillar-zh { display: block; margin-top: 6px; font-family: var(--serif); font-size: 24px; letter-spacing: 0.3em; text-indent: 0.3em; color: #fff; }
.ab-pillar p { margin: 18px 0 0; font-size: 18px; line-height: 1.8; color: #cfd3dc; }

.ab-strives { background: var(--ivory); text-align: center; }
.ab-strive-grid { list-style: none; margin: 18px auto 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-strive-grid li { padding: 26px 20px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; font-family: var(--serif); font-size: 23px; line-height: 1.5; color: #2b2118; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }


.ab-pano { margin: 0; }
.ab-pano img { display: block; width: 100%; height: clamp(180px, 26vw, 360px); object-fit: cover; object-position: center 55%; }

.ab-faith { background: var(--ivory); text-align: center; }
.ab-faith-title { margin: 0; font-family: var(--serif); font-size: 42px; letter-spacing: 0.12em; color: #231a10; }
.ab-articles { list-style: none; margin: 44px 0 20px; padding: 0; text-align: left; }
.ab-articles li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 22px 0; border-top: 1px solid #e7dcc7; }
.ab-articles li:last-child { border-bottom: 1px solid #e7dcc7; }
.ab-num { font-family: Georgia, var(--serif); font-size: 30px; line-height: 1.2; color: var(--gold); font-variant-numeric: lining-nums; }
.ab-articles p { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.95; color: #2b2118; }
.ab-articles li.ab-group { display: block; padding: 28px 0 6px; border-top: 0; }
.ab-articles li.ab-group h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.ab-articles li.ab-group + li { border-top: 0; }
.ab-refs { display: block; margin-top: 6px; font-family: var(--font); font-size: 15px; letter-spacing: 0.02em; color: var(--text-2); }
.ab-back { margin-top: 36px; }

/* ---------- Resource library (/portal/resources/) ---------- */
.res-app { margin: 24px 0 8px; }
.res-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.res-tabs button { border: 0; background: none; padding: 10px 14px; font: inherit; font-size: 17px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.res-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--blue); font-weight: 600; }
.res-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.res-crumbs button { border: 0; background: none; font: inherit; font-size: 17px; color: var(--link); cursor: pointer; padding: 2px 4px; }
.res-crumbs button:last-child { color: var(--text); font-weight: 600; }
.res-sep { color: var(--text-2); }
.res-upload { cursor: pointer; font-size: 17px; padding: 8px 18px; }
.res-list { list-style: none; margin: 8px 0 16px; padding: 0; }
.res-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 12px 10px; border: 0; border-top: 1px solid #e8e8ed; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.res-item:hover { background: var(--gray); text-decoration: none; }
.res-ico { color: var(--text-2); }
.res-name { font-weight: 500; overflow-wrap: anywhere; }
.res-meta { font-size: 15px; color: var(--text-2); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.res-tag { padding: 1px 8px; border-radius: 980px; background: var(--gray); }

.res-file { display: flex; align-items: center; }
.res-file .res-item { flex: 1; }
.res-sp { flex: none; font-size: 15px; padding: 4px 10px; margin-left: 6px; border: 1px solid var(--line); border-radius: 980px; color: var(--text-2); }
.res-edit-dot { color: var(--blue); font-size: 15px; vertical-align: middle; }
.res-access { width: 100%; border-collapse: collapse; font-size: 17px; margin-top: 8px; }
.res-access th, .res-access td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.res-access th { font-size: 15px; color: var(--text-2); font-weight: 600; }

/* ---------- Admin console ---------- */
.ac-banner { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; background: #eef4ff; color: #1d3f8f; font-size: 16px; }
.ac-banner.is-warn { background: var(--cream); color: var(--amber); }
.ac-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.ac-tabs button { border: 0; background: none; padding: 10px 14px; font: inherit; font-size: 17px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ac-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--blue); font-weight: 600; }
.ac-note { color: var(--text-2); font-size: 16px; margin: 0 0 16px; max-width: 820px; }
.ac-members { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.ac-grouplist { display: flex; flex-direction: column; gap: 6px; }
.ac-group { text-align: left; border: 1px solid transparent; background: #fff; border-radius: 12px; padding: 10px 14px; font: inherit; cursor: pointer; }
.ac-group:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.ac-group.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.ac-group-name { display: block; font-weight: 600; font-size: 17px; }
.ac-group-sub { display: block; font-size: 15px; color: var(--text-2); margin-top: 2px; }
.ac-sens { color: #c2255c; font-size: 15px; }
.ac-groupdetail { background: #fff; border-radius: 18px; padding: 22px 24px; min-height: 320px; }
.ac-detail-head h2 { margin: 0; font-size: 28px; }
.ac-detail-head > p { margin: 4px 0 10px; color: var(--text-2); }
.ac-m365 { font-size: 15px; color: var(--text-2); margin: 10px 0 0; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip { padding: 3px 10px; border-radius: 980px; background: var(--gray); font-size: 15px; }
.ac-chip.is-sens { background: #fdecf2; color: #a61e4d; }
.ac-add { margin: 20px 0 8px; position: relative; }
.ac-exchange { margin: 20px 0 8px; padding: 14px 16px; border-radius: 14px; background: #f4f7fc; border: 1px solid #d6e1f3; }
.ac-exchange p { margin: 0 0 8px; }
.ac-exchange ol { margin: 0 0 10px; padding-left: 1.3em; }
.ac-add input, .ac-search input { width: 100%; font: inherit; font-size: 17px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 980px; }
.ac-results { margin-top: 6px; }
.ac-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--gray); margin-bottom: 6px; }
.ac-result small, .ac-member-list small { color: var(--text-2); }
.ac-result em { color: var(--text-2); font-size: 15px; }
.ac-member-list h3 { font-size: 19px; margin: 18px 0 8px; }
.ac-count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 980px; background: var(--gray); font-size: 15px; text-align: center; }
.ac-member-list ul { list-style: none; margin: 0; padding: 0; }
.ac-member-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #e8e8ed; }
.ac-member-list .m-btn { padding: 6px 14px; font-size: 15px; }
.ac-result .m-btn { padding: 6px 14px; font-size: 15px; }
.ac-empty, .ac-muted { color: var(--text-2); }
.ac-empty { margin-top: 20px; padding: 16px; border-radius: 12px; background: var(--cream); color: var(--amber); }
.ac-error { color: #c2255c; }
.m-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ac-matrix-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ac-search { flex: 1; min-width: 240px; }
/* 主日學老師 */
.ac-ss-season { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 600; }
.ac-ss-season select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.ac-ss-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.ac-ss-class { background: #fff; border-radius: 18px; padding: 18px 20px; display: grid; gap: 10px; }
.ac-ss-class.is-off { opacity: 0.7; }
.ac-ss-class h3 { margin: 0; font-size: 19px; }
.ac-ss-class h3 small { font-weight: 400; color: var(--text-2); font-size: 15px; }
.ac-ss-class > p { margin: 0; }
.ac-ss-teachers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ac-ss-teachers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--gray); }
.ac-ss-teachers input { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.ac-ss-teachers small { grid-row: 2; color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.ac-ss-teachers .m-btn { grid-column: 2; grid-row: 1 / span 2; padding: 6px 12px; font-size: 15px; }
.ac-ss-class .ac-search { min-width: 0; }
.ac-ss-class .ac-search input { width: 100%; }
.ac-ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ac-ss-actions .m-btn { padding: 6px 14px; font-size: 15px; }
.ac-matrix-actions { display: flex; gap: 8px; }
.ac-matrix-wrap { overflow-x: auto; background: #fff; border-radius: 18px; margin-top: 10px; }
.ac-matrix { border-collapse: collapse; width: 100%; font-size: 16px; }
.ac-matrix th, .ac-matrix td { padding: 10px 8px; border-bottom: 1px solid #e8e8ed; text-align: center; }
.ac-matrix thead th { vertical-align: bottom; font-weight: 600; font-size: 15px; color: var(--text-2); min-width: 78px; }
.ac-matrix thead th.is-sens { color: #a61e4d; }
.ac-matrix td.is-sens { background: #fff7fa; }
.ac-matrix .ac-mx-group { text-align: left; min-width: 190px; position: sticky; left: 0; background: #fff; }
.ac-matrix .ac-mx-group small { display: block; color: var(--text-2); font-size: 15px; }
.ac-mx-everyone td { background: var(--gray) !important; }
.ac-matrix input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.ac-matrix input:disabled { cursor: not-allowed; }
.ac-mx-areas th { font-size: 15px; font-weight: 600; color: var(--text); text-align: center; border-bottom: 0; padding-top: 14px; }
.ac-area-resources { background: #f3f8fb; }
th.ac-area-resources, .ac-mx-areas th.ac-area-resources { background: #e8f2f7; }
.ac-mx-everyone td { background: #fffbf3 !important; }
.ac-mx-everyone td.ac-area-resources { background: #f3f8fb !important; }
.ac-x { border: 0; background: none; font-size: 22px; color: var(--text-2); cursor: pointer; }
.ac-card { background: #fff; border-radius: 18px; padding: 22px 24px; }
.ac-card h3 { margin: 0 0 10px; }
.ac-audit { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; font-size: 16px; }
.ac-audit th, .ac-audit td { padding: 10px 12px; border-bottom: 1px solid #e8e8ed; text-align: left; vertical-align: top; }
.ac-audit pre { margin: 0; white-space: pre-wrap; font: inherit; }
.ac-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; padding: 12px 20px; border-radius: 12px; background: var(--text); color: #fff; font-size: 17px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.ac-toast.is-error { background: #a61e4d; }

/* ---------- Staff portal ---------- */
.pt-hero { padding: 64px 22px 48px; text-align: center; background: linear-gradient(170deg, #16213f 0%, var(--night) 100%); color: #fff; }
.pt-hero-sm { padding: 52px 22px 40px; }
.pt-hero-inner { max-width: 760px; margin: 0 auto; }
.pt-hero .kicker, .pt-hero .kicker a { color: var(--amber-soft); }
.pt-hero .subhead { color: #d8dbe3; }
.pt-user { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.pt-who { font-size: 19px; }
.pt-signout { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.pt-section { background: var(--gray); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pt-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04); transition: transform 0.2s, box-shadow 0.2s; }
.pt-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.pt-tile h2 { margin: 6px 0 0; font-size: 24px; }
.pt-tile p { margin: 0; color: var(--text-2); font-size: 17px; }
.pt-tile.is-sensitive { border-top: 4px solid #c2255c; }
.pt-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-phase, .pt-status, .pt-editor { padding: 2px 9px; border-radius: 980px; font-size: 15px; background: var(--gray); color: var(--text-2); }
.pt-status.is-preview { background: #e6f4ea; color: #2b8a3e; }
.pt-editor { background: #eef4ff; color: var(--blue); }
.pt-foot { margin-top: 20px; text-align: center; }
.pt-gate { padding: 16px 18px; margin-bottom: 20px; border-radius: 14px; background: #fdecf2; color: #a61e4d; }
.pt-gate p { margin: 6px 0 10px; }
.pt-status-card { padding: 18px 20px; border-radius: 16px; background: var(--gray); }
.pt-status-card p { margin: 0 0 8px; }
/* 家人專區 home: 待辦 first, then 我要 / 我負責 / 管理 (src/portal/index.njk, portal-home.js) */
.ph-hero { padding: 40px 22px 34px; text-align: center; background: linear-gradient(170deg, #16213f 0%, var(--night) 100%); color: #fff; }
.ph-hero-inner { max-width: 900px; margin: 0 auto; }
.ph-title { margin: 0; font-family: var(--serif); font-size: clamp(32px, 5vw, 42px); letter-spacing: 0.06em; }
.ph-who { margin: 6px 0 0; color: #d8dbe3; font-size: 17px; word-break: break-all; }
.ph-signin p { margin: 14px auto 0; max-width: 520px; color: #d8dbe3; font-size: 19px; line-height: 1.6; }
.ph-btn { margin-top: 20px; padding: 14px 30px; border: 0; border-radius: 980px; background: var(--amber-soft); color: #1b1408; font: inherit; font-size: 19px; font-weight: 600; cursor: pointer; }
.ph-signin .ph-note { font-size: 17px; }
.ph-signin .ph-note a { color: var(--amber-soft); }
.ph-signout { margin-top: 12px; padding: 4px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 980px; background: transparent; color: #d8dbe3; font: inherit; font-size: 15px; cursor: pointer; }
.ph-body { max-width: 1040px; margin: 0 auto; padding: 22px 16px 40px; }
.ph-sec { margin: 0 0 26px; }
.ph-sec h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; letter-spacing: 0.08em; color: #231a10; }
.ph-todo-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: #fdf8ef; border: 1px solid #efe1c6; overflow: hidden; }
.ph-todo-list li + li { border-top: 1px solid #efe1c6; }
.ph-todo-list a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text); font-size: 19px; }
.ph-todo-list a:hover { text-decoration: none; background: #f9efdc; }
.ph-todo-n { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 980px; background: var(--amber); color: #fff; font-size: 18px; line-height: 34px; text-align: center; }
.ph-todo-go { margin-left: auto; color: var(--amber); font-size: 24px; }
.ph-todo-none, .ph-todo-wait { padding: 14px 18px; color: var(--text-2); font-size: 18px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ph-tile { gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); box-shadow: none; }
.ph-tile:hover { transform: none; box-shadow: none; border-color: var(--amber); }
.ph-tile { position: relative; }
.ph-tile-badge { position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 980px; background: #d9480f; color: #fff; font-size: 15px; line-height: 26px; text-align: center; }
.pw-todo { display: block; max-width: 640px; margin: 0 auto 16px; padding: 12px 18px; border-radius: 14px; background: rgba(243, 199, 126, 0.16); border: 1px solid rgba(243, 199, 126, 0.5); color: #f3c77e; text-align: center; font-size: 18px; }
.pw-todo:hover { text-decoration: none; background: rgba(243, 199, 126, 0.26); }
.ph-tile-name { font-family: var(--serif); font-size: 21px; font-weight: 600; color: #231a10; }
.ph-tile-desc { color: var(--text-2); font-size: 16px; line-height: 1.45; }
.ph-foot { margin: 8px 0 0; color: var(--text-2); font-size: 15px; text-align: center; }
@media (max-width: 600px) {
  .ph-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ph-tile { padding: 12px 14px; }
  .ph-tile-name { font-size: 19px; }
  .ph-tile-desc { font-size: 15px; }
  .ph-todo-list a { font-size: 18px; padding: 12px 14px; }
}
.pt-perm { list-style: none; padding: 0; margin: 0; }
.pt-perm li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pt-perm-what { color: var(--text-2); font-size: 16px; }
.pt-sens { font-style: normal; font-size: 15px; padding: 1px 8px; border-radius: 980px; background: #fdecf2; color: #a61e4d; }

/* ---------- Inner pages (家訊) ---------- */
.section { padding: 64px 22px 80px; }
.container { max-width: 980px; margin: 0 auto; }
.narrow { max-width: 692px; }
.section h1 { font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; margin: 0 0 8px; }
.muted { color: var(--text-2); }
.small { font-size: 16px; }
.eyebrow-sm { margin: 0 0 12px; font-size: 16px; }
blockquote {
  margin: 28px 0 32px;
  padding: 28px 32px;
  background: var(--cream);
  border-radius: 18px;
}
blockquote p { font-family: var(--serif); font-size: 23px; line-height: 1.7; font-weight: 500; letter-spacing: 0.03em; margin: 0 0 10px; }
blockquote cite { color: var(--amber); font-family: var(--serif); font-style: normal; font-size: 16px; letter-spacing: 0.08em; }
.prose { overflow-wrap: anywhere; }
.prose li { margin-bottom: 10px; }
.news-list { list-style: none; padding: 0; margin: 24px 0 0; }
.news-list li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }

/* ---------- Footer ---------- */
.globalfooter { background: var(--gray); color: var(--text-2); font-size: 15px; line-height: 1.33; letter-spacing: -0.01em; margin-top: 12px; }
.footer-inner { max-width: 980px; margin: 0 auto; padding: 24px 22px 20px; }
.footer-mission { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 0; }
.footer-cols h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.footer-cols p { margin: 0; line-height: 1.8; }
.footer-cols a { color: #424245; }
.footer-legal { border-top: 1px solid var(--line); padding-top: 14px; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1068px) {
  .headline { font-size: 48px; }
  .headline-verse { font-size: 32px; }
  .subhead { font-size: 26px; }
}

@media (max-width: 1068px) and (min-width: 735px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .ss-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 734px) {
  .tile { padding: 44px 16px 0; }
  .tile-live, .tile-welcome { padding: 22px 10px 20px; }
  .pair-head h2 { font-size: 24px; }
  .pair-strip { grid-template-columns: 1fr; gap: 8px; font-size: 16px; }
  .pair-strip li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
  .pair-strip li > strong { min-width: 6em; }
  .pair-strip li { padding-left: 9px; }
  .headline { font-size: 42px; }
  .headline-verse { font-size: 26px; }
  .subhead { font-size: 23px; }
  .tile-hero { min-height: 500px; }
  .tile-hero .tile-bg { object-position: 58% 80%; }
  .tile-grid { grid-template-columns: 1fr; padding: 0; }
  .tw { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "verse" "ann" "links"; margin: 12px 0 0; }
  .tw-verse { padding: 36px 22px 26px; }
  .tw-links { padding: 18px 16px 26px; }
  .tw .an-board { padding: 22px 14px 18px; border-left: 0; border-top: 1px solid var(--line); }
  .anc { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .anc-date { width: 54px; height: 54px; }
  .anc-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .an-cards-page { grid-template-columns: 1fr; }
  .mx-block { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .mx-flip .mx-photo { order: 0; }
  .mx-photo { position: static; }
  .mx-text h2 { font-size: 26px; }
  .cw-mission { grid-template-columns: 1fr; }
  .give-dl { grid-template-columns: 1fr; gap: 2px; }
  .give-dl dd { margin-bottom: 8px; }
  .ab-staff-names strong { font-size: 19px; }
  .ab-staff-names a { display: none; }
  .verse p { font-size: 22px; }
  .ministry-split { flex-direction: column; min-height: 0; background-position: center 40%; }
  .ms-panel { min-height: 260px; padding: 28px 24px; }
  .ms-panel + .ms-panel, html[data-lang="en"] .ms-en + .ms-zh { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  html[data-lang="en"] .ms-zh + .ms-en { border-top: 0; }
  .ms-name { font-size: 38px; }
  .lang-switch button { min-width: 96px; padding: 9px 18px; }
  .cal-title { font-size: 23px; }
  .cal-cell { min-height: 56px; padding: 4px; text-align: center; }
  .cal-day { width: 30px; height: 30px; }
  .cal-evs { display: none; }
  .cal-dots { display: flex; justify-content: center; gap: 3px; margin-top: 2px; }
  .cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
  .cal-head span { text-align: center; padding: 0 0 6px; }
  .cal-agenda { padding: 16px; }
  .cal-agenda li a { grid-template-columns: 1fr; gap: 2px; }
  .ss-grid { grid-template-columns: 1fr; }
  .tile-grid-2 { grid-template-columns: 1fr; }
  .ac-members { grid-template-columns: 1fr; }
  .bible-wrap { padding: 28px 10px 26px; }
  .bible { padding: 10px 10px 14px; border-radius: 16px; }
  .bible-spread { min-height: 520px; }
  .bible-page { padding: 26px 24px 54px; }
  .bp-list li { grid-template-columns: 1fr; gap: 0; }
  .bp-title { font-size: 28px; }
  .bp-verse p { font-size: 23px; }
  .bp-bg { inset: 60px 18px 40px; column-gap: 16px; font-size: 15px; }
  .ecc-review { grid-template-columns: 1fr; }
  .ecc-room text { font-size: 42px; }
  .wk-list li { grid-template-columns: 1fr; gap: 6px; }
  .wk-item { grid-template-columns: 140px 1fr; }
  .ss-links { grid-template-columns: 1fr; }
  .am-row { grid-template-columns: 1fr; }
  .am-item { grid-template-columns: 1fr; }
  .ab-section, .ab-mission { padding: 60px 18px; }
  .ab-intro { grid-template-columns: 1fr; gap: 28px; }
  .ab-lead { font-size: 28px; }
  .ab-intro-text p, .ab-articles p { font-size: 19px; text-align: left; }
  .ab-facts { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .ab-facts div:nth-child(3) { border-left: 0; }
  .ab-facts div:nth-child(n+3) { border-top: 1px solid #e7dcc7; }
  .ab-facts dt { font-size: 30px; }
  .ab-pillars, .ab-strive-grid { grid-template-columns: 1fr; }
  .ab-strive-grid li { font-size: 21px; padding: 20px; }
  .ab-faith-title { font-size: 32px; }
  .ab-articles li { grid-template-columns: 44px 1fr; }
  .ab-num { font-size: 24px; }
  .res-item { grid-template-columns: 20px 1fr; }
  .res-meta { grid-column: 2; white-space: normal; flex-wrap: wrap; }
  .ac-grouplist { flex-direction: row; overflow-x: auto; }
  .ac-group { flex: none; }
  .pt-perm li { grid-template-columns: 1fr; gap: 2px; }
  .tile-sm { min-height: 0; padding: 44px 20px 40px; }
  .headline-sm { font-size: 34px; }
  .subhead-sm { font-size: 21px; }
  .section h1 { font-size: 38px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
/* ---------- 主日午餐 Sunday lunch (lunch.js, lunch-admin.js) ---------- */
.tile-lunch { padding: 52px 22px 48px; }
.tile-lunch .kicker { color: var(--amber); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
.lu-app { max-width: 640px; margin: 22px auto 0; text-align: left; }
.lu-lede { text-align: center; font-size: 21px; margin: 0 0 18px; }
.lu-app .ctas { justify-content: center; }
.lu-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.lu-meta span { padding: 5px 12px; border-radius: 980px; background: #fff; border: 1px solid #e8e8ed; font-size: 16px; }
.lu-date { font-weight: 600; }
.lu-deadline { color: var(--amber); }
.lu-deadline.is-closed { color: var(--text-2); }
.lu-note { font-size: 17px; line-height: 1.6; color: var(--text-2); background: var(--cream); border-radius: 14px; padding: 12px 16px; margin: 0 0 18px; }
.lu-form { display: grid; gap: 14px; }
.lu-menu { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 18px; border: 1px solid #e8e8ed; }
.lu-dish { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.lu-dish + .lu-dish { border-top: 1px solid #f0f0f2; }
.lu-dish-name { font-size: 19px; }
.lu-dish-name small { display: block; font-size: 15px; color: var(--text-2); }
.lu-dish.has-img .lu-dish-name { flex: 1; min-width: 0; }
.lu-img { flex: none; display: block; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #f3efe6; }
.lu-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bible .lu-img { width: 48px; height: 48px; border-radius: 9px; }
.lu-menu-view .lu-dish { justify-content: flex-start; }
.lu-signin { margin: 14px 0 6px; text-align: center; }
.la-photo { width: 76px; white-space: nowrap; }
.la-photo img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.la-photo-add { cursor: pointer; font-size: 15px; }
.la-link { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #e8e8ed; }
.la-link-row { display: flex; gap: 8px; }
.la-link-row input { flex: 1; min-width: 0; font-size: 15px; }
.la-link-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.lu-signin .pill { display: inline-block; }
.lu-signin p { margin: 8px 0 0; }
.lu-step { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.lu-step button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 24px; line-height: 1; color: var(--blue); cursor: pointer; }
.lu-step button:disabled { color: #c7c7cc; cursor: default; }
.lu-step output { min-width: 32px; text-align: center; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lu-name { display: grid; gap: 6px; font-size: 16px; font-weight: 600; }
.lu-name input { font: inherit; font-weight: 400; font-size: 19px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lu-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lu-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lu-actions .pill { cursor: pointer; }
.lu-count { color: var(--text-2); font-size: 17px; }
.lu-status { margin: 0; min-height: 1.4em; font-size: 17px; color: #c9341f; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.lu-score { background: #fff7e6; border: 1px solid #f3d9a4; border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; }
.lu-score h3 { margin: 0 0 2px; font-size: 20px; }
.lu-score-list { list-style: none; margin: 8px 0 0; padding: 0; }
.lu-score-list > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed #f0dcb4; }
.lu-score-list > li:first-child { border-top: 0; }
.lu-score-who { font-weight: 600; justify-content: flex-start !important; }
.lu-score-name { font-size: 18px; }
.lu-stars { display: inline-flex; flex: none; }
.lu-stars button { border: 0; background: none; padding: 2px 3px; font-size: 28px; line-height: 1; color: #e3d6bd; cursor: pointer; }
.lu-stars button.is-on { color: #f2a516; }
.lu-score-brief { margin: 0 0 8px; font-size: 16px; }
.lu-mine { background: #e9f6ec; border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; }
.lu-mine p { margin: 4px 0; }
.lu-mine-actions { display: flex; gap: 18px; }
.lu-mine-one + .lu-mine-one { border-top: 1px solid #cfe8d5; margin-top: 6px; padding-top: 6px; }
.lu-editing { margin: 0 0 8px; font-weight: 600; }
.lu-summary { margin-top: 22px; }
.lu-summary h3, .lu-h3 { font-size: 17px; font-weight: 600; color: var(--text-2); margin: 0 0 8px; }
.lu-h3 { margin-top: 26px; }
.lu-totals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.lu-totals li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: #fff; border-radius: 12px; padding: 8px 12px; font-size: 16px; }
.lu-totals strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.lu-totals .lu-total-all { background: var(--night); color: #fff; }
.lu-more { text-align: center; margin: 18px 0 0; }
.lu-table-wrap { overflow-x: auto; background: #fff; border-radius: 14px; border: 1px solid #e8e8ed; }
.lu-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.lu-table th, .lu-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f2; text-align: center; white-space: nowrap; }
.lu-table th:first-child, .lu-table td:first-child { text-align: left; }
.lu-table tfoot td { font-weight: 600; border-bottom: 0; }
.lu-foot { text-align: center; margin-top: 22px; }
.tile-lunch-page { margin-top: 0; }
/* inside the Bible book (home page) */
.lu-book { max-width: none; margin: 0; }
.lu-book .lu-meta { justify-content: flex-start; gap: 6px; margin-bottom: 10px; }
.lu-book .lu-meta span { background: rgba(255, 255, 255, 0.55); border-color: #e0d2b2; font-size: 15px; padding: 3px 10px; }
.lu-book .lu-deadline { color: #a31d1d; }
.lu-book .lu-lede { text-align: left; font-family: var(--serif); font-size: 19px; }
.lu-book .ctas { justify-content: flex-start; }
.lu-book .lu-form { gap: 10px; }
.lu-book .lu-menu { background: none; border: 0; border-radius: 0; }
.lu-book .lu-dish { padding: 5px 0; border-bottom: 1px dotted #e0d2b2; }
.lu-book .lu-dish + .lu-dish { border-top: 0; }
.lu-book .lu-dish-name { font-family: var(--serif); font-size: 19px; }
.lu-book .lu-step button { width: 34px; height: 34px; font-size: 21px; background: rgba(255, 255, 255, 0.7); border-color: #d9c89f; color: #8e1a18; }
.lu-book .lu-step output { min-width: 26px; font-size: 19px; }
.lu-book .lu-name { font-weight: 400; font-family: var(--serif); color: #5a4630; }
.lu-book .lu-name input { font-size: 18px; padding: 8px 12px; background: rgba(255, 255, 255, 0.75); border-color: #d9c89f; }
.lu-book .pill { background: #8e1a18; border-color: #8e1a18; padding: 9px 20px; font-size: 17px; }
.lu-book .pill:hover { background: #a31d1d; }
.lu-book .lu-mine { background: rgba(233, 246, 236, 0.85); padding: 10px 14px; }
.lu-brief { margin: 12px 0 0; font-size: 16px; color: #5a4630; line-height: 1.6; }
.lu-book .bp-link { margin-top: 8px; }
.lu-book .link-more { color: #8e1a18; font-family: var(--serif); font-weight: 600; }
/* admin */
.la-weeks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.la-weeks button { border: 1px solid var(--line); background: #fff; border-radius: 980px; padding: 6px 14px; font: inherit; font-size: 16px; cursor: pointer; }
.la-weeks button.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.la-menu { width: 100%; border-collapse: collapse; font-size: 16px; }
.la-pick { margin: 10px 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fffaf2; }
.la-pick-top { display: flex; gap: 8px; }
.la-pick-top input, .la-lib input[type=search] { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 980px; background: #fff; }
.la-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.la-cats button { border: 1px solid var(--line); background: #fff; border-radius: 980px; padding: 4px 12px; font: inherit; font-size: 15px; cursor: pointer; }
.la-cats button[aria-pressed=true] { background: var(--text); border-color: var(--text); color: #fff; }
.la-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; }
.la-dish { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 12px; font: inherit; cursor: pointer; }
.la-dish > b { font-size: 17px; }
.la-dish > small { color: var(--text-2); font-size: 13px; }
.la-dish > i { font-style: normal; font-size: 13px; color: var(--text-2); }
.la-rate { color: #b7791f; font-style: normal; }
.la-rate.is-low { color: #c53030; font-weight: 600; }
.la-dish[aria-pressed=true] { border-color: var(--amber); background: #fff1dc; box-shadow: inset 0 0 0 1px var(--amber); }
.la-dish[aria-pressed=true] > b::before { content: "✓ "; color: var(--amber); }
.la-lib > summary { cursor: pointer; font-size: 17px; margin: 4px 0 10px; }
.la-lib-table { min-width: 860px; }
.la-lib-table td:nth-child(2) input { width: 64px; }
.la-lib-table td:nth-child(3) input { min-width: 130px; }
.la-lib-table td:nth-child(4) input { min-width: 200px; }
.la-lib-table th { white-space: nowrap; }
.la-lib-rate { white-space: nowrap; font-size: 14px; }
.la-lib-table td:nth-child(6) input { width: 76px; }
.la-lib-table select { font: inherit; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.la-menu th { text-align: left; font-weight: 600; padding: 4px; }
.la-menu td { padding: 4px; }
.la-menu input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.la-menu input[type=number] { width: 70px; }
.la-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; }
.la-tools { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.lu-table .is-cancelled td { color: #aeaeb2; text-decoration: line-through; }
@media (max-width: 734px) {
  .tile-lunch { padding: 44px 16px 40px; }
  .lu-dish { padding: 10px 12px; }
  .lu-dish-name { font-size: 18px; }
  .la-menu, .la-menu tbody, .la-menu tr, .la-menu td { display: block; }
  .la-menu thead { display: none; }
  .la-menu tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
}

/* ---------- 主日學 classes (/sundayschool/, /sundayschool/<class>/, /sundayschool/all/) ---------- */
.ssc-tone-0 { background: linear-gradient(135deg, #2f5d8a, #7fb2d9); }
.ssc-tone-1 { background: linear-gradient(135deg, #7a4b1e, #e0a85c); }
.ssc-tone-2 { background: linear-gradient(135deg, #3b6b3f, #9cc98a); }
.ssc-tone-3 { background: linear-gradient(135deg, #6b2d4f, #d48bb0); }
.ssc-tone-4 { background: linear-gradient(135deg, #4b3f8a, #a99be0); }
.ssc-tone-5 { background: linear-gradient(135deg, #8a2b22, #e2876a); }
.ssd-lfiles { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ssd-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 14px; border-radius: 980px; background: var(--gray); color: var(--text); font-size: 18px; }
.ssd-file:hover { background: #e8e8ed; text-decoration: none; }
.ssd-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; color: var(--link); }
.ssd-file small { color: var(--text-2); }
.ssd-general { margin-top: 18px; }
/* teacher tools on the public class page (after sign-in) */
.ssd-teacher { margin-top: 20px; font-size: 18px; }
.ssd-login { color: var(--text-2); font-size: 17px; }
.ssd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 14px; background: #fff8eb; border: 1px solid #f3d9a4; }
.ssd-tools .pill { padding: 6px 16px; font-size: 16px; }
.ssd-staff { display: flex; align-items: center; gap: 6px; }
.ssd-hint { margin: 8px 2px 0; font-size: 15px; }
.ssd-status { margin: 6px 2px 0; font-size: 15px; color: var(--amber); }
.ssd-status.is-warn { color: #b35c00; font-weight: 600; }
.ssd-attach { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 10px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 19px; vertical-align: middle; }
.ssd-attach:hover { background: var(--gray); }
.ssd-attach input { display: none; }
.ssd-file.is-staff { background: #fff4e5; }
.ssd-file a { display: inline-flex; align-items: center; gap: 6px; color: inherit; min-width: 0; }
.ssd-file a:hover { text-decoration: none; }
.ssd-fdel { border: 0; background: none; color: var(--text-2); cursor: pointer; font-size: 15px; padding: 0 2px; }
.ssd-general h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; }
.ssd-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 734px) {
}

/* ---------- 主日學控制台 /portal/sundayschool/ ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container.narrow:has(#ss-app) { max-width: 1040px; }
.ss-app { --zh: #3b6fd8; --en: #2f9e6e; --kids: #e8890c; --card: #fff; --soft: var(--gray); }
.ss-app .m-zh { --m: var(--zh); } .ss-app .m-en { --m: var(--en); } .ss-app .m-kids { --m: var(--kids); }

.ss-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 18px; }
.ss-top h2 { margin: 6px 0 0; font-size: 30px; letter-spacing: -0.02em; }
.ss-season-badge { display: inline-block; padding: 3px 12px; border-radius: 980px; background: var(--cream-2); color: var(--amber); font-size: 15px; font-weight: 600; }
.ss-season-badge:empty { display: none; }
.ss-stats { display: flex; gap: 10px; margin: 0; }
.ss-stats div { min-width: 104px; padding: 10px 16px; border-radius: 14px; background: var(--soft); }
.ss-stats dt { font-size: 15px; color: var(--text-2); }
.ss-stats dd { margin: 2px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

.ss-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; border-radius: 12px; background: var(--soft); width: fit-content; max-width: 100%; overflow-x: auto; }
.ss-tabs button { border: 0; background: none; font: inherit; font-size: 17px; padding: 8px 18px; border-radius: 9px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.ss-tabs button[aria-selected="true"] { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.ss-btn { font: inherit; font-size: 17px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); cursor: pointer; }
.ss-btn:hover { border-color: #b0b0b6; }
.ss-btn-sm { font-size: 16px; padding: 5px 12px; }
.ss-icon-btn { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 24px; line-height: 1; color: var(--text); cursor: pointer; }
.ss-icon-btn:hover { background: var(--soft); }
.ss-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ss-toolbar h3 { margin: 0; font-size: 21px; }
.ss-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ss-app select, .ss-form input, .ss-form select, .ss-form textarea, .ss-paste textarea {
  font: inherit; font-size: 17px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); width: 100%; box-sizing: border-box; }
.ss-app input:focus, .ss-app select:focus, .ss-app textarea:focus { outline: 2px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 1px; border-color: var(--blue); }
.ss-season-pick select { width: auto; min-width: 180px; font-weight: 600; }
.ss-note { margin: -6px 0 12px; padding: 8px 12px; border-radius: 10px; background: #fff4e5; color: #b35c00; font-size: 16px; }

/* attendance */
.ss-datebar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ss-date { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ss-date-label { font-size: 21px; font-weight: 600; }
.ss-date input { width: auto; border: 0; padding: 6px; font: inherit; font-size: 16px; color: var(--text-2); background: var(--soft); border-radius: 8px; }
.ss-att-list { display: grid; gap: 18px; }
.ss-att-group h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 17px; color: var(--m); }
.ss-att-group h3::before { content: ""; width: 4px; align-self: stretch; margin-right: 8px; border-radius: 2px; background: var(--m); }
.ss-att-group h3 span:first-child { flex: 1; }
.ss-sub { color: var(--text-2); font-weight: 500; }
.ss-att-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; margin-bottom: 8px; border: 1px solid #e8e8ed; border-radius: 14px; background: var(--card); transition: border-color 0.15s, background 0.15s; }
.ss-att-row.is-dirty { border-color: color-mix(in srgb, var(--blue) 45%, white); background: #f5f9ff; }
.ss-att-name { flex: 1; min-width: 0; display: grid; }
.ss-att-name strong { font-size: 18px; }
.ss-att-name small { color: var(--text-2); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.ss-stepper button { width: 42px; height: 42px; border: 0; background: var(--soft); font-size: 24px; color: var(--text); cursor: pointer; }
.ss-stepper button:active { background: #e5e5ea; }
.ss-stepper input { width: 58px; height: 42px; border: 0; text-align: center; font: inherit; font-size: 21px; font-weight: 600; -moz-appearance: textfield; }
.ss-stepper input::-webkit-inner-spin-button, .ss-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ss-paste { margin: 16px 0; padding: 12px 16px; border-radius: 14px; background: var(--soft); }
.ss-paste summary { cursor: pointer; font-size: 17px; color: var(--link); }
.ss-paste textarea { margin: 8px 0; font-size: 16px; }
.ss-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 12px 14px 12px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e8e8ed; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1); }
.ss-savebar-total { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.ss-savebar-total strong { font-size: 28px; letter-spacing: -0.02em; }
.ss-dirty { padding: 2px 10px; border-radius: 980px; background: #eef4ff; color: var(--blue); font-size: 15px; font-weight: 600; }
.ss-savebar .am-status { flex-basis: 100%; order: 5; font-size: 16px; }
.ss-savebar .am-status:empty { display: none; }
.ss-savebar .pill { cursor: pointer; padding: 10px 26px; }

/* report */
.ss-chart { margin-bottom: 18px; padding: 18px 18px 12px; border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; }
.ss-chart:empty { display: none; }
.ss-bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; overflow-x: auto; }
.ss-bar { flex: 1 0 34px; max-width: 64px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ss-bar-n { font-size: 15px; font-weight: 600; color: var(--text-2); }
.ss-bar-stack { width: 100%; min-height: 3px; display: flex; flex-direction: column-reverse; border-radius: 8px 8px 3px 3px; overflow: hidden; }
.ss-bar-stack i, .ss-legend i { display: block; background: var(--m); }
.ss-bar-d { font-size: 15px; color: var(--text-2); }
.ss-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 15px; color: var(--text-2); }
.ss-legend span { display: flex; align-items: center; gap: 6px; }
.ss-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ss-report th:first-child, .ss-report td:first-child { position: sticky; left: 0; background: #fff; }
.ss-report tbody tr:hover td { background: #fafafc; }

/* classes */
.ss-chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.ss-chipbar button { font: inherit; font-size: 16px; padding: 6px 14px; border-radius: 980px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.ss-chipbar button[aria-pressed="true"] { background: var(--m, var(--text)); border-color: var(--m, var(--text)); color: #fff; font-weight: 600; }
.ss-group-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 17px; color: var(--text-2); }
.ss-group-h span { padding: 0 8px; border-radius: 980px; background: var(--soft); font-size: 15px; }
.ss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ss-card-c { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px; border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; }
.ss-card-c.is-off { opacity: 0.55; }
.ss-card-cover { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--m) 14%, white); color: var(--m); font-size: 28px; font-weight: 700; }
.ss-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-card-body { min-width: 0; }
.ss-card-c h4 { margin: 0 64px 4px 0; font-size: 19px; line-height: 1.3; }
.ss-card-c h4 small { display: block; font-weight: 400; font-size: 15px; color: var(--text-2); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.ss-chips span { padding: 1px 9px; border-radius: 980px; background: color-mix(in srgb, var(--m) 10%, white); color: color-mix(in srgb, var(--m) 80%, black); font-size: 15px; }
.ss-meta { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.ss-off { margin: 4px 0 0; font-size: 15px; color: #c2255c; }
.ss-card-c [data-edit-class] { position: absolute; top: 12px; right: 12px; }
/* 主日學 管理: the class cards as on the public page (the user, 11/2026) — one warm grey, no border, no letter block */
.ss-cards .ss-card-c { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 18px; border: 0; border-radius: 16px; background: #f5f4f1; }
.ss-cards .ss-card-c h4 { margin-right: 70px; font-size: 18px; }
.ss-cards .ss-card-c h4 small { font-size: 14px; color: #86868b; }
.ss-cards .ss-card-c .ss-meta { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: #424245; }
.ss-cards .ss-card-c .ss-none { color: #8a5a1f; }
.ss-banner { margin-bottom: 16px; padding: 16px 18px; border-radius: 16px; background: #fff8eb; border: 1px solid #f3d9a4; }
.ss-banner strong { display: block; margin-bottom: 4px; }
.ss-banner p { margin: 0 0 12px; font-size: 16px; color: var(--text-2); }
.ss-banner .pill { cursor: pointer; }
.ss-empty { padding: 32px; text-align: center; color: var(--text-2); border: 1px dashed var(--line); border-radius: 16px; }

/* dialogs */
.ss-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25); color: var(--text); }
.ss-dialog-wide { width: min(980px, calc(100vw - 32px)); }
.ss-dialog::backdrop { background: rgba(20, 20, 30, 0.45); backdrop-filter: blur(3px); }
.ss-dialog[open] { display: flex; }
.ss-form { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 48px); }
.ss-dialog-head, .ss-dialog-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.ss-dialog-head { border-bottom: 1px solid #ececf0; }
.ss-dialog-head h2 { flex: 1; margin: 0; font-size: 22px; }
.ss-dialog-head .ss-icon-btn { width: 34px; height: 34px; font-size: 17px; border: 0; background: var(--soft); }
.ss-dialog-body { flex: 1; overflow-y: auto; padding: 6px 20px 16px; background: #fafafc; }
.ss-dialog-foot { justify-content: flex-end; border-top: 1px solid #ececf0; }
.ss-dialog-foot .am-status { margin-right: auto; font-size: 16px; }
.ss-dialog-foot .am-status.is-warn { color: #b35c00; font-weight: 600; }
.ss-dialog-foot .pill { cursor: pointer; }
.ss-fs { margin-top: 14px; padding: 16px; border: 1px solid #ececf0; border-radius: 14px; background: #fff; display: grid; gap: 12px; }
.ss-fs h3 { margin: 0; font-size: 17px; }
.ss-form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.ss-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ss-hint { font-weight: 400; font-size: 15px; color: var(--text-2); }
.ss-times { display: flex; align-items: center; gap: 6px; }
.ss-times input { min-width: 0; }
.ss-cover { display: flex; gap: 14px; align-items: flex-start; }
.ss-cover-preview { width: 160px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.ss-cover-pick { flex: 1; }
.ss-switch { display: flex !important; align-items: center; gap: 10px; align-self: end; padding: 10px 0; font-weight: 500 !important; color: var(--text) !important; }
.ss-switch input { width: auto; accent-color: var(--blue); transform: scale(1.3); }
/* teachers: read-only here; assigned in the admin console */
.ss-tro { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; }
.ss-tro li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border-radius: 10px; background: var(--gray); }
.ss-tro small { font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.ss-tro li.is-edit { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 2px 8px; align-items: center; }
.ss-tro li.is-edit input { font-size: 16px; padding: 6px 10px; min-width: 0; }
.ss-tro li.is-edit small { grid-row: 2; }
.ss-tro li.is-edit .link-btn { grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; color: var(--text-2); }
.ss-tro li.is-edit .link-btn:hover { background: var(--soft); text-decoration: none; }
.ss-tfind { position: relative; display: grid; gap: 8px; justify-items: start; margin-bottom: 8px; }
.ss-tfind input { width: 100%; font-size: 16px; padding: 8px 12px; }
.ss-tfind-list { width: 100%; }
.ss-tfind-list:empty { display: none; }
.ss-tfind-list ul { margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); max-height: 280px; overflow-y: auto; }
.ss-tfind-list button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.ss-tfind-list button:hover:not(:disabled), .ss-tfind-list button:focus-visible { background: var(--gray); }
.ss-tfind-list button:disabled { cursor: default; opacity: 0.6; }
.ss-tfind-list button span { font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.ss-hint { margin: 0 0 8px; font-size: 15px; color: var(--text-2); }
.ss-fs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-form .ss-inline { display: flex; align-items: center; gap: 8px; }
.ss-inline input { width: 80px; text-align: center; font-weight: 600; }
.ss-lessons { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.ss-lesson { display: grid; grid-template-columns: 30px 150px 1fr 150px 34px; gap: 8px; align-items: center; }
.ss-attach { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 17px; }
.ss-attach:hover { background: var(--soft); }
.ss-attach input { display: none; }
.ss-lesson-files { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ss-lesson-files:empty { display: none; }
.ss-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 980px; background: #eef4ff; font-size: 15px; }
.ss-fchip a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.ss-fchip small { color: var(--text-2); }
.ss-fchip.is-staff { background: #fff4e5; }
.ss-fchip .link-btn { width: 22px; height: 22px; border-radius: 50%; color: var(--text-2); font-size: 15px; }
.ss-form .ss-staff-toggle { display: flex; align-items: center; gap: 8px; justify-content: flex-start; font-weight: 500; color: var(--text); font-size: 15px; }
.ss-form .ss-staff-toggle input { width: auto; flex: none; accent-color: var(--amber); }
.ss-lesson-n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); font-size: 15px; font-weight: 600; color: var(--text-2); }
.ss-lesson input { font-size: 16px; padding: 7px 10px; }
.ss-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ss-files li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #ececf0; border-radius: 10px; background: #fcfcfd; font-size: 16px; }
.ss-files a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-files small { color: var(--text-2); }
.ss-files .link-btn { width: 28px; height: 28px; border-radius: 50%; color: var(--text-2); }
.ss-files .link-btn:hover { background: var(--soft); text-decoration: none; }
.ss-file-lesson { padding: 1px 8px; border-radius: 980px; background: #eef4ff; color: var(--blue); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ss-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ss-upload select { width: auto; max-width: 100%; font-size: 16px; padding: 6px 10px; }
.ss-form .ss-file-btn { display: inline-flex; color: var(--text); font-weight: 500; font-size: 16px; }
.ss-file-btn input { display: none; }
.ss-sclasses { display: grid; gap: 10px; counter-reset: sclass; }
.ss-sclass { counter-increment: sclass; display: grid; gap: 8px; padding: 12px; border: 1px solid #ececf0; border-radius: 12px; background: #fcfcfd; }
.ss-sclass-head { display: grid; grid-template-columns: 28px 1.3fr 1fr 100px 76px 32px; gap: 8px; align-items: center; }
.ss-sclass-head::before { content: counter(sclass); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); font-size: 15px; font-weight: 600; color: var(--text-2); }
.ss-sclass-head input[name=zh] { font-weight: 600; }
.ss-sclass-del { width: 32px; height: 32px; border-radius: 50%; color: var(--text-2); }
.ss-sclass-del:hover { background: var(--soft); text-decoration: none; }
.ss-sclass-head input { font-size: 16px; padding: 7px 10px; }

@media (max-width: 734px) {
  .ss-top h2 { font-size: 26px; }
  .ss-stats { width: 100%; }
  .ss-stats div { flex: 1; min-width: 0; padding: 8px 12px; }
  .ss-stats dd { font-size: 24px; }
  .ss-tabs { width: 100%; }
  .ss-tabs button { flex: 1; padding: 8px 10px; }
  .ss-date-label { font-size: 18px; }
  .ss-att-row { padding: 10px; }
  .ss-stepper button { width: 38px; }
  .ss-stepper input { width: 46px; }
  .ss-savebar { bottom: 8px; padding: 10px 12px 10px 16px; }
  .ss-savebar [data-ss-copy] { display: none; }
  .ss-grid2, .ss-grid3 { grid-template-columns: 1fr; }
  .ss-dialog, .ss-dialog-wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .ss-form { max-height: 100dvh; }
  .ss-dialog-body { padding: 4px 14px 14px; }
  .ss-cover { flex-direction: column; }
  .ss-sclass-head { grid-template-columns: 26px 1fr 32px; }
  .ss-sclass-head input[name=en], .ss-sclass-head input[name=room] { grid-column: 2; }
  .ss-sclass-head .ss-sclass-del { grid-column: 3; grid-row: 1; }
  .ss-sclass-head input[name=lessonCount] { grid-column: 2; }
  .ss-lesson { grid-template-columns: 26px 1fr 1fr 34px; }
  .ss-lesson [data-l-topic] { grid-column: 2 / -1; grid-row: 2; }
  .ss-lesson { padding-bottom: 6px; border-bottom: 1px dashed #ececf0; }
}

/* ECC: new-request notifications (reviewers) */
.ecc-notify { margin-top: 32px; }
.ecc-notify-form { max-width: 520px; }
.ecc-notify-h { margin: 20px 0 8px; font-size: 18px; }
.ecc-notify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.ecc-notify-list li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid #e8e8ed; border-radius: 10px; font-size: 16px; }
.ecc-notify-list li span { flex: 1; color: var(--text-2); }

/* ---------- 主日學 public pages (/sundayschool/, /sundayschool/<class>/) ---------- */
.ssc-wrap, .ssd { --mc: #8a6420; --mc-soft: #f6efe1; }
.m-en { --mc: #2f6a8a; --mc-soft: #e8f1f6; }
.m-kids { --mc: #c2652a; --mc-soft: #fbeee4; }
.m-zh { --mc: #8a6420; --mc-soft: #f6efe1; }

.ssc-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px 48px; }
.ssc-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin: -28px 0 36px; position: relative; }
.ssc-season-card { padding: 22px 24px; border-radius: 22px; background: #231a10; color: #f5efe3; box-shadow: 0 18px 40px rgba(35, 26, 16, 0.18); }
.ssc-season-name { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: 0.06em; }
.ssc-season-dates { margin: 6px 0 18px; font-size: 19px; color: #cdbf9f; }
.ssc-season-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ssc-season-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d8b26a, #f3d79c); }
.ssc-season-week { margin: 10px 0 0; font-size: 18px; color: #cdbf9f; }
.ssc-ministries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ssc-min { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; border-top: 4px solid var(--mc); color: var(--text); box-shadow: 0 8px 24px rgba(35, 26, 16, 0.06); transition: transform 0.2s, box-shadow 0.2s; }
.ssc-min:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(35, 26, 16, 0.1); }
.ssc-min-name { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #231a10; }
.ssc-min-time { font-size: 18px; color: var(--text-2); }
.ssc-min-count { margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--mc); }

.ssc-block { margin-bottom: 44px; scroll-margin-top: 80px; }
.ssc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #ece3d2; }
.ssc-head h2 { margin: 0; font-family: var(--serif); font-size: 38px; color: #231a10; display: flex; align-items: center; gap: 12px; }
.ssc-head h2::before { content: ""; width: 6px; height: 32px; border-radius: 3px; background: var(--mc); }
.ssc-head p { margin: 0; font-size: 20px; color: var(--text-2); }
.ssc-empty { padding: 28px; font-size: 20px; text-align: center; color: var(--text-2); border: 1px dashed #e0d5bf; border-radius: 18px; background: var(--ivory); }
.ssc-upcoming { padding: 26px 24px 28px; border-radius: 22px; background: var(--ivory); border: 1px dashed #d9c7a3; }
.ssc-upcoming .ssc-head { border-bottom-color: #e6d8bb; }
.ssc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ssc-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; color: var(--text); border: 1px solid #ece3d2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); transition: transform 0.2s, box-shadow 0.2s; }
.ssc-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(35, 26, 16, 0.12); }
.ssc-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.ssc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssc-gen { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: hidden; }
.ssc-gen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.28), transparent 60%); }
.ssc-mark { font-family: var(--serif); font-size: 96px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.92); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.ssc-tone-0 { background: linear-gradient(135deg, #24476b, #6d9ec7); }
.ssc-tone-1 { background: linear-gradient(135deg, #6b4219, #d39a52); }
.ssc-tone-2 { background: linear-gradient(135deg, #2f5a33, #8dbb7c); }
.ssc-tone-3 { background: linear-gradient(135deg, #5c2744, #c47ea3); }
.ssc-tone-4 { background: linear-gradient(135deg, #3d3375, #9a8cd4); }
.ssc-tone-5 { background: linear-gradient(135deg, #7a2620, #d6785c); }
.ssc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.35); }
.ssc-progress i { display: block; height: 100%; background: #fff; }
.ssc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.ssc-name { font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.35; color: #231a10; }
.ssc-en { margin-top: -4px; font-size: 18px; color: var(--text-2); }
.ssc-room { align-self: flex-start; padding: 3px 12px; border-radius: 8px; background: var(--mc-soft); font-size: 18px; color: #3a3128; } .ssc-room b { font-weight: 700; }
.ssc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 18px; color: var(--text-2); }
.ssc-next { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--mc-soft); font-size: 18px; line-height: 1.45; color: #3a3128; }
.ssc-next b { margin-right: 6px; color: var(--mc); }
.ssc-all { text-align: center; margin-top: 4px; }
.ssc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ssc-list li { background: #fff; border: 1px solid #ece3d2; border-radius: 12px; padding: 14px 18px; font-size: 20px; }
/* /sundayschool/ (the user, 11/2026, design A): one Sunday morning by time; one warm grey, type for the rest, the wine
   only for 下次 — no colour blocks, no big letters */
.sst-page { max-width: 1036px; margin: 0 auto; padding: 0 22px; }
.sst-season { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 8px 0 18px; font-size: 17px; color: #424245; }
.sst-season b { font-size: 21px; color: #1d1d1f; }
.sst-up { margin-top: 48px; }
.sst-bar { flex-basis: 100%; max-width: 420px; height: 6px; border-radius: 3px; background: #ecebe7; }
.sst-bar i { display: block; height: 100%; border-radius: 3px; background: #6e6e73; }
.sst-slot { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 30px 0; }
.sst-slot + .sst-slot { box-shadow: 0 -1px 0 #f0efec; }
.sst-time { margin: 0; font: 600 28px/1.15 var(--font); color: #1d1d1f; }
.sst-time small { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: #86868b; }
.sst-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; font: 700 24px/1.3 var(--serif); color: #1d1d1f; }
.sst-h .sst-h-time { font: 400 15px var(--font); color: #6e6e73; }
.sst-sign { margin-left: auto; font: 600 15px var(--font); color: #8c3a2e; font-style: normal; text-decoration: none; }
.sst-sign.is-off { color: #86868b; }
.sst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.sst-card { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 16px; background: #f5f4f1; color: #1d1d1f; text-decoration: none; transition: background .15s; }
.sst-card:hover { background: #ecebe7; text-decoration: none; }
.sst-name { font-size: 18px; line-height: 1.4; }
.sst-en { font-size: 14px; color: #86868b; }
.sst-meta { margin-top: 6px; font-size: 14px; line-height: 1.6; color: #424245; }
.sst-next { margin-top: 6px; font-size: 14px; line-height: 1.6; font-weight: 600; color: #8c3a2e; }
.sst-empty { margin: 0; color: #6e6e73; }
@media (max-width: 640px) {
  .sst-slot { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0; }
  .sst-time { font-size: 24px; } .sst-time small { display: none; }
}
/* 以前的主日學 (family): a season a filled block, each class opening to its plan and files */
/* 主日學 管理: the season's state (草稿 / 公開中 / 已歸檔), each new class's 負責老師 */
.ss-season-state { margin: 6px 0 0; flex-basis: 100%; font-size: 15px; color: #424245; }
.ss-season-state.is-draft { color: #8a5a1f; font-weight: 600; }
.ss-season-state.is-published { color: #2e6b3f; font-weight: 600; }
.ss-sclass-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 14px; color: #6e6e73; }
.ss-sclass-lead > div { flex: 1; min-width: 220px; }
.ss-lead-name { flex-basis: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; }
.ss-invite-out { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #f5f4f1; }
.ss-invite-out .ss-invite-url { margin: 6px 0; font-size: 14px; overflow-wrap: anywhere; }
.ss-lead-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #f5f4f1; color: #424245; }
/* 班級二維碼: the editor's preview, and the class page's card for 家人 */
.ss-qr { margin-top: 12px; } .ss-qr-preview { width: 140px; height: 140px; object-fit: contain; border-radius: 12px; background: #fff; }
.ssd-qr { margin-top: 18px; text-align: center; } .ssd-qr img { display: block; width: min(240px, 70vw); height: auto; margin: 6px auto 8px; border-radius: 12px; background: #fff; }
.ssa-season { margin: 0 0 10px; padding: 4px 18px; border-radius: 16px; background: #f5f4f1; }
.ssa-season > summary { padding: 12px 0; font-size: 20px; cursor: pointer; }
.ssa-season > summary small { margin-left: 6px; color: #86868b; font-size: 16px; }
.ssa-classes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.ssa-class { padding: 10px 14px; border-radius: 12px; background: #fff; }
.ssa-class > summary { display: flex; flex-wrap: wrap; gap: 2px 12px; cursor: pointer; font-size: 18px; }
.ssa-class > summary span { font-size: 15px; }
.ssa-brief p { margin: 8px 0 0; line-height: 1.7; }
.ssa-lessons { margin: 10px 0 0; padding-left: 1.4em; line-height: 1.8; }
.ssa-lessons span { display: inline-block; min-width: 3.4em; color: #6e6e73; }
.ssa-files { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; }

/* class page */
.ssd { max-width: 1080px; margin: 0 auto; padding: 22px 22px 56px; }
.ssd-crumbs { font-size: 18px; color: var(--text-2); margin-bottom: 14px; }
.ssd-banner { position: relative; display: flex; align-items: flex-end; min-height: 320px; border-radius: 26px; overflow: hidden; color: #fff; background-color: #231a10; }
.ssd-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%); }
.ssd-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ssd-banner-mark { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: clamp(160px, 26vw, 280px); font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.16); }
.ssd-banner-text { position: relative; z-index: 1; padding: 28px 32px; }
.ssd-banner h1 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 5.2vw, 58px); line-height: 1.25; letter-spacing: 0.03em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.ssd-en { margin: 8px 0 0; font-size: 23px; opacity: 0.85; }
.ssd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ssd-tags > span { padding: 4px 14px; border-radius: 980px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); font-size: 17px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ssd-tags .is-next { background: #fff; color: #231a10; }
.ssd-facts { display: grid; grid-template-columns: 1fr 1fr 1.35fr 1.35fr; gap: 0; margin: 18px 0 0; border: 1px solid #ece3d2; border-radius: 18px; background: #fff; overflow: hidden; }
.ssd-facts div { padding: 18px 22px; }
.ssd-facts div + div { border-left: 1px solid #ece3d2; }
.ssd-facts dt { display: flex; gap: 6px; align-items: center; font-size: 17px; letter-spacing: 0.08em; color: var(--text-2); }
.ssd-facts dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; color: #231a10; }
.ssd-next { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin-top: 20px; padding: 24px 28px; border-radius: 20px; background: var(--mc-soft); border: 1px solid color-mix(in srgb, var(--mc) 25%, white); }
.ssd-next-when { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; padding: 14px 18px; border-radius: 16px; background: var(--mc); color: #fff; }
.ssd-next-when span { font-size: 17px; letter-spacing: 0.1em; opacity: 0.85; }
.ssd-next-when strong { font-family: Georgia, var(--serif); font-size: 42px; line-height: 1.15; }
.ssd-next-what p { margin: 0; }
.ssd-next-n { font-size: 18px; color: var(--mc); font-weight: 600; }
.ssd-next-topic { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #231a10; line-height: 1.4; }
.ssd-next-by { font-size: 19px; color: var(--text-2); }
.ssd-next-by:empty { display: none; }
.ssd-next-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ssd-next-files:empty { display: none; }
.ssd-next .ssd-file { background: #fff; }
.ssd-cols { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.ssd-cols:has(> .ssd-plan[hidden]) { grid-template-columns: 1fr; }
.ssd-card { border: 1px solid #ece3d2; border-radius: 24px; padding: 28px 32px 30px; background: #fff; }
.ssd-card h2 { margin: 0 0 18px; font-family: var(--serif); font-size: 32px; color: #231a10; }
.ssd-about { }
.ssd-brief { font-size: 21px; line-height: 1.9; color: #3a3128; }
.ssd-brief p { margin: 0 0 10px; }
.ssd-brief ul { padding-left: 1.3em; margin: 0 0 10px; }
.ssd-cta { margin: 18px 0 0; }
.ssd-contact { margin: 16px 0 0; font-size: 19px; color: var(--text-2); }
.ssd-back { margin-top: 28px; text-align: center; }
/* lesson plan as a timeline */
.ssd-lessons { list-style: none; margin: 0; padding: 0; position: relative; }
.ssd-lessons::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 2px; background: #ece3d2; }
.ssd-lessons li { position: relative; display: grid; grid-template-columns: 44px 72px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 16px 16px 16px 12px; border-radius: 16px; }
.ssd-lessons li + li { margin-top: 2px; }
.ssd-ln { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid #e0d5bf; font-size: 19px; font-weight: 700; color: var(--text-2); }
.ssd-ld { font-family: Georgia, var(--serif); font-size: 22px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ssd-lt { font-family: var(--serif); font-size: 23px; color: #231a10; line-height: 1.45; }
.ssd-ls { font-size: 19px; color: var(--text-2); text-align: right; white-space: nowrap; }
.ssd-lessons .is-past .ssd-ln { background: var(--mc); border-color: var(--mc); color: transparent; }
.ssd-lessons .is-past .ssd-ln::after { content: "✓"; position: absolute; color: #fff; font-size: 21px; }
.ssd-lessons .is-past .ssd-lt { color: var(--text-2); }
.ssd-lessons .is-next { background: var(--mc-soft); border-radius: 14px; }
.ssd-lessons .is-next .ssd-ln { border-color: var(--mc); color: var(--mc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mc) 18%, transparent); }
.ssd-lessons .is-next .ssd-lt { font-weight: 700; }
.ssd-lt em { margin-left: 8px; padding: 2px 10px; border-radius: 980px; background: var(--mc); color: #fff; font-family: var(--font); font-size: 16px; vertical-align: middle; font-style: normal; font-weight: 600; }
.ssd-lessons .ssd-lfiles { grid-column: 3 / -1; }

@media (max-width: 1068px) {
  .ssc-grid { grid-template-columns: 1fr 1fr; }
  .ssc-intro { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
  .ssc-wrap, .ssd { padding-left: 16px; padding-right: 16px; }
  .ssc-intro { margin-top: -20px; }
  .ssc-ministries { grid-template-columns: 1fr; }
  .ssc-min { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; }
  .ssc-min-count { margin: 0 0 0 auto; }
  .ssc-head h2 { font-size: 30px; }
  .ssc-grid { grid-template-columns: 1fr; gap: 12px; }
  .ssc-card { flex-direction: row; }
  .ssc-cover { flex: none; width: 104px; aspect-ratio: auto; min-height: 104px; }
  .ssc-mark { font-size: 46px; }
  .ssc-body { padding: 12px 14px; }
  .ssc-name { font-size: 22px; }
  .ssc-list { grid-template-columns: 1fr; }
  .ssd-banner { min-height: 240px; border-radius: 20px; }
  .ssd-card { padding: 22px 18px 24px; }
  .ssd-card h2 { font-size: 28px; }
  .ssd-facts dd { font-size: 20px; }
  .ssd-banner-text { padding: 20px 20px; }
  .ssd-facts { grid-template-columns: 1fr 1fr; }
  .ssd-facts div:nth-child(3) { border-left: 0; }
  .ssd-facts div:nth-child(n + 3) { border-top: 1px solid #ece3d2; }
  .ssd-cols { grid-template-columns: 1fr; }
  .ssd-about { position: static; }
  .ssd-next { grid-template-columns: 1fr; gap: 12px; }
  .ssd-next-when { flex-direction: row; gap: 10px; justify-content: flex-start; min-width: 0; width: fit-content; }
  .ssd-lessons::before { left: 27px; }
  .ssd-lessons li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 14px 10px 14px 6px; }
  .ssd-ln { width: 40px; height: 40px; }
  .ssd-ld { font-size: 20px; }
  .ssd-lt { font-size: 22px; }
  .ssd-ld, .ssd-lt, .ssd-ls, .ssd-lessons .ssd-lfiles { grid-column: 2; text-align: left; }
  .ssd-ln { grid-row: span 3; align-self: start; }
}

/* ---------- 週報 from the template (assets/bulletin-render.js): website pages and the console preview ---------- */
.bl { margin-top: 28px; font-size: 20px; line-height: 1.85; color: #2b2118; }
.ble-paper .bl { margin-top: 0; }
.bl-block { margin: 0 0 30px; }
.bl-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--serif); font-size: 26px; font-weight: 700; color: #231a10; }
.bl-h::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: var(--gold); }
.bl-title { margin: 0 0 8px; font-family: var(--serif); font-size: 22px; color: #231a10; }
.bl p { margin: 0 0 10px; }
.bl a { overflow-wrap: anywhere; }
.bl-verse blockquote { margin: 0; padding: 22px 26px; border-radius: 18px; background: var(--ivory); border-left: 4px solid var(--gold); font-family: var(--serif); font-size: 23px; line-height: 1.8; }
.bl-verse blockquote p { margin: 0; }
.bl-verse cite { display: block; margin-top: 8px; font-family: var(--font); font-size: 17px; font-style: normal; color: var(--amber); text-align: right; }
.bl-list { margin: 0; padding-left: 1.6em; }
.bl-list li { margin: 0 0 12px; padding-left: 4px; }
.bl-list li::marker { font-weight: 700; color: var(--gold); }
.bl-list li p:last-child { margin-bottom: 0; }
.bl-table { width: 100%; border-collapse: collapse; font-size: 19px; }
.bl-table th, .bl-table td { padding: 10px 12px; border-bottom: 1px solid #ece3d2; text-align: left; vertical-align: top; }
.bl-table th { width: 42%; font-weight: 500; color: var(--text-2); }
.bl-table tr:last-child th, .bl-table tr:last-child td { border-bottom: 0; }
/* 主日服事: a list that stacks on phones (the printed 週報 keeps its table) */
.bl-serve-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #ece3d2; border-radius: 14px; overflow: hidden; }
.bl-serve-list li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 4px 16px; padding: 10px 14px; border-bottom: 1px solid #ece3d2; font-size: 19px; }
.bl-serve-list.has-next li { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); }
.bl-serve-list li:last-child { border-bottom: 0; }
.bl-serve-role { color: var(--text-2); font-weight: 500; }
.bl-serve-week small { display: block; font-size: 15px; letter-spacing: 0.06em; color: var(--text-2); }
@media (max-width: 734px) {
  .bl-serve-list li, .bl-serve-list.has-next li { grid-template-columns: 1fr 1fr; font-size: 17px; }
  .bl-serve-role { grid-column: 1 / -1; color: #7a4e14; font-weight: 600; }
}
.bl-order .bl-table, .bl-serve .bl-table { background: #fff; border: 1px solid #ece3d2; border-radius: 14px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.an-em-h { margin: 0 0 4px; font-family: var(--serif); font-size: 26px; } .an-em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 14px; }
.an-em-grid img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.bl-fold { margin-top: 14px; padding: 12px 16px; border: 1px solid #ece3d2; border-radius: 14px; background: #fff; } .bl-fold > summary { cursor: pointer; font-weight: 600; } .bl-fold[open] > summary { margin-bottom: 14px; } .bl-fold .bl-block:last-child { margin-bottom: 0; }
.bl-mission { padding: 20px 22px; border-radius: 18px; background: #f3f7f2; }
.bl-mission .bl-h::before { background: #4f7d52; }

/* ---------- 週報 console (/portal/bulletin/) ---------- */
.container.narrow:has(#bl-app) { max-width: 1240px; }
.ble-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 10px; }
.ble-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--gray); }
.ble-tabs button { border: 0; background: none; font: inherit; font-size: 17px; padding: 8px 16px; border-radius: 9px; color: var(--text-2); cursor: pointer; }
.ble-tabs button[aria-selected="true"] { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.ble-date { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ble-date input { font: inherit; font-size: 18px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ble-badge { padding: 4px 12px; border-radius: 980px; font-size: 15px; font-weight: 600; background: var(--gray); color: var(--text-2); }
.ble-badge.is-published { background: #e6f4ea; color: #2b8a3e; }
.ble-badge.is-draft { background: #fff4e5; color: #b35c00; }
.ble-badge.is-changed { background: #eef4ff; color: var(--blue); }
.ble-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ble-recent button { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 10px; border: 1px solid #e8e8ed; border-radius: 12px; background: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.ble-recent button small { font-size: 15px; font-weight: 400; color: var(--text-2); }
.ble-recent button.is-on { border-color: var(--blue); background: #f3f8ff; }
.ble-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ble-form { display: grid; gap: 14px; }
.ble-card { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; }
.ble-card h3 { margin: 0; font-size: 19px; }
.ble-card > .ss-btn { justify-self: start; }
.ble-form input, .ble-form textarea { font: inherit; font-size: 17px; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ble-form textarea { resize: vertical; line-height: 1.6; }
.ble-paused { display: flex; flex-wrap: wrap; gap: 6px 20px; } .ble-paused .la-check { flex-direction: row; justify-content: flex-start; font-size: 16px; white-space: nowrap; } .ble-paused input { width: auto; flex: none; margin: 0; padding: 0; }
.ble-form input:focus, .ble-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent); border-color: var(--blue); }
.ble-items, .ble-rows { display: grid; gap: 8px; }
.ble-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ble-num { width: 26px; height: 26px; margin-top: 6px; display: grid; place-items: center; border-radius: 50%; background: var(--gray); font-size: 15px; font-weight: 700; color: var(--text-2); }
.ble-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; }
.ble-tools { display: flex; gap: 2px; }
.ble-tools button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; font-size: 16px; }
.ble-tools button:hover { background: var(--gray); }
.ble-hint { margin: 0; font-size: 15px; color: var(--text-2); }
.ble-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ble-picker { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #f3f8ff; border: 1px solid #cfe0ff; }
.ble-picker-head { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-2); }
.ble-pick { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #fff; cursor: pointer; }
.ble-pick input { width: auto; margin-top: 4px; }
.ble-pick span { display: grid; gap: 2px; }
.ble-pick small { font-size: 15px; color: var(--text-2); }
.ble-pick.is-added { opacity: 0.6; cursor: default; }
.ble-picker .pill { padding: 6px 18px; font-size: 16px; cursor: pointer; }
.ble-preview { position: sticky; top: 76px; max-height: calc(100vh - 160px); overflow-y: auto; border-radius: 18px; background: var(--gray); padding: 12px; }
.ble-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 6px 10px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.ble-autonote { font-size: 15px; color: var(--text-2); }
.blp-banner { margin: 0; padding: 10px 16px; text-align: center; font-size: 16px; font-weight: 600; color: #5a3d00; background: #fff4d6; border-bottom: 1px solid #f0d58a; }
.ble-paper { padding: 26px 28px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.ble-paper-title { margin: 0 0 18px; font-family: var(--serif); font-size: 30px; }
.ble-paper .bl { font-size: 18px; }
.ble-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e8e8ed; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1); }
.ble-savebar .am-status { margin: 0 auto 0 4px; font-size: 16px; }
.ble-savebar .pill { cursor: pointer; }
.ble-danger { color: #c2255c; border-color: #f3c3d4; }
@media (max-width: 1000px) {
  .ble-layout { grid-template-columns: 1fr; }
  .ble-preview { position: static; max-height: none; }
}
@media (max-width: 734px) {
  .bl { font-size: 19px; }
  .bl-h { font-size: 24px; }
  .bl-verse blockquote { padding: 18px 18px; font-size: 21px; }
  .ble-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ble-row input:nth-child(2) { grid-column: 1; }
  .ble-row .ble-tools { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
  .ble-paper { padding: 18px 16px; }
}

/* =====================================================================================
   Theme: 莊重而有朝氣 — reverent but alive, easy to read, calm to look at.
   Navy for structure, warm gold for light and joy, ivory paper, serif titles, one link colour.
   Kept last so it sets the tone over the component rules above.
   ===================================================================================== */
:root {
  --text: #1f1a14;          /* warm near-black */
  --text-2: #5f574d;        /* secondary text, darker than before for contrast */
  --gray: #f6f2ea;          /* warm light surface (cards, panels) */
  --line: #e2d8c6;
  --navy: #14213d;
  --blue: #1f4e8c;          /* the one action colour (buttons) */
  --link: #1f4e8c;
  --link-dark: #9cc2ff;
  --gold: #b8914a;
  --ivory: #fbf8f2;
}
body { background: #fff; }

/* chrome: a navy bar with a thin gold line; a navy footer to frame every page */
.globalfooter { background: var(--navy); color: #c9cfdb; margin-top: 12px; }
.globalfooter a, .footer-cols a { color: #e8ecf4; }
.footer-cols h3 { color: var(--amber-soft); font-family: var(--serif); letter-spacing: 0.04em; }
.footer-mission { color: #e8ecf4; font-family: var(--serif); letter-spacing: 0.03em; border-bottom-color: rgba(255, 255, 255, 0.15); }
.footer-legal { border-top-color: rgba(255, 255, 255, 0.15); }

/* titles in serif — calm and dignified; body text stays sans for easy reading */
.headline, .headline-sm, .section h1, .mp-h2, .pair-head h2, .ssc-head h2, .mx-text h2, .an-detail-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.03em;
}
.headline { line-height: 1.2; }
.kicker { letter-spacing: 0.08em; }
.mp-h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* one calm action colour: navy-blue buttons, gold for the primary call on dark */
.pill { background: var(--blue); border-color: var(--blue); }
.pill:hover { background: #173d70; border-color: #173d70; }
.tile-dark { background: var(--night); }
.tile-dark .subhead, .tile-dark .subhead-sm, .tile-dark .kicker { color: #c9cfdb; }

/* readable paragraphs: a comfortable measure and rhythm */
.section p, .section li { line-height: 1.8; }
.muted { color: var(--text-2); }

/* ministry pages: deep colour hero with a soft light at the top — dignified, not flashy */
.mp-hero { background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, var(--m) 0%, color-mix(in srgb, var(--m) 55%, black) 100%); }
.mp-subnav { background: var(--ivory); border-bottom-color: var(--line); }
.mp-subnav a { font-size: 17px; }

/* 首頁聖經: the book rests in the sanctuary — the panorama, softly blurred under a warm vignette, fills the space around it */
.bible-wrap { position: relative; isolation: isolate; overflow: hidden; background: #2a1b10; }
.bible-wrap::before { content: ""; position: absolute; inset: -24px; z-index: -2; background: url("/assets/sanctuary-pano-blur.webp") center 40% / cover no-repeat; filter: blur(5px) saturate(1.05); }
.bible-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(42, 27, 16, 0.18) 0%, rgba(30, 18, 9, 0.62) 70%, rgba(22, 13, 6, 0.8) 100%); }
.bible-wrap .bible-pos { color: #f3e7cf; }
.bible-wrap .bible-btn { background: rgba(255, 250, 240, 0.92); }

/* 首頁聖經: a bigger book with less empty background around it, and fuller pages */
@media (min-width: 735px) {
  .bible-wrap { padding: 22px 12px 16px; }
  .bible { max-width: 1320px; }
  .bible-page { padding: 44px 58px 62px; }
  .bible-controls { margin-top: 12px; }
  .bp-head { font-size: 15px; margin-bottom: 22px; }
  .bp-title { font-size: 40px; margin-bottom: 18px; }
  .bp-list li { padding: 11px 0; }
  .bp-link, .bp-note { font-size: 21px; }
  .bp-sslist { font-size: 22px; }
  .bp-classes dt { font-size: 24px; }
  .bp-classes dd { font-size: 18px; }
  .bp-verse p { font-size: 32px; }
  .bp-links a { font-size: 21px; }
}

/* home page: the sections meet without white seams; a thin gold line only where two dark sections touch */
.tw, .tile-hero + .tw, .tw + .ministry-split, .ministry-split + .bible-wrap, .bible-wrap + .tile-pair { margin-top: 0; }
.tile-pair { margin-top: 0; padding: 0; gap: 0; border-top: 1px solid rgba(243, 199, 126, 0.35); }
.tile-pair .tile-live { border-right: 1px solid rgba(255, 255, 255, 0.12); }
.ministry-split + .bible-wrap { box-shadow: inset 0 1px 0 rgba(243, 199, 126, 0.35); }
.globalfooter { margin-top: 0; border-top: 1px solid rgba(243, 199, 126, 0.35); }
@media (max-width: 734px) {
  .tile-pair .tile-live { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}

/* the larger type needs a little more room in a few tight spots */
.bp-list li { grid-template-columns: 210px 1fr; }
.wk-item { grid-template-columns: 180px 1fr; }
.wk-time { white-space: nowrap; }
.tw .verse p { font-size: clamp(21px, 1.8vw, 30px); line-height: 1.55; }

@media (max-width: 734px) {
  body { font-size: 18px; }
  .bp-list li { grid-template-columns: 1fr; }
  .wk-item { grid-template-columns: 150px 1fr; }
  .bible-spread.is-single .bible-page { padding-right: 60px; } /* keep the text clear of the ribbon */
}

/* 首頁聖經: larger type on every page of the book, Chinese and English (easy to read for everyone) */
.bible .bp-head { font-size: 18px; letter-spacing: 0.22em; }
.bible .bp-title { font-size: 46px; }
.bible .bp-psalm p { font-size: 31px; line-height: 1.9; }
html[data-lang="en"] .bible .bp-psalm p { font-size: 25px; line-height: 1.7; }
.bible .bp-psalm cite, .bible .bp-verse cite { font-size: 19px; }
/* 每週聚會: a block per day. Wide pages: day | time | gathering on one line each; phones: the time above the gathering */
@media (min-width: 735px) {
  .bible-page { padding: 34px 46px 52px; } /* the larger type, in the same page height */
  .bible .bp-head { margin-bottom: 14px; }
  .bible .bp-title { margin-bottom: 12px; }
}
.bible .bp-link, .bible .bp-note { font-size: 23px; }
.bible .bp-title-2 small { font-size: 19px; }
.bible .bp-sign { font-size: 26px; }
.bible .bp-num { font-size: 17px; }
.bible .lu-book .lu-lede { font-size: 23px; }
.bible .lu-book .lu-meta span { font-size: 17px; }
.bible .lu-book .lu-dish-name { font-size: 23px; }
.bible .lu-book .lu-dish-name small { font-size: 18px; }
.bible .lu-book .lu-step button { width: 42px; height: 42px; font-size: 24px; }
.bible .lu-book .lu-step output { font-size: 23px; }
.bible .lu-book .lu-name, .bible .lu-book .lu-count, .bible .lu-book .lu-status, .bible .lu-book .lu-brief { font-size: 19px; }
.bible .lu-book .lu-name input { font-size: 21px; }
.bible .lu-book .pill { font-size: 20px; padding: 10px 22px; }
@media (max-width: 734px) {
  .bible .bp-title { font-size: 36px; }
  .bible .bp-psalm p { font-size: 27px; }
  html[data-lang="en"] .bible .bp-psalm p { font-size: 22px; }
}

/* 兒童事工同工資格 — /portal/kids/ › 同工資格 */
.cs-rule { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fff4e5; border: 1px solid #ffd8a8; color: #7a4300; font-size: 16px; }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 8px; }
.cs-stats div { padding: 12px 16px; border-radius: 14px; background: var(--gray); }
.cs-stats dt { font-size: 15px; color: var(--text-2); }
.cs-stats dd { margin: 2px 0 0; font-size: 28px; font-weight: 700; }
.cs-stats .is-soon dd { color: #b35c00; }
.cs-stats .is-bad dd { color: #c92a2a; }
.cs-stats .is-wait dd { color: var(--text-2); }
.cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs-search { width: 100%; margin: 10px 0; font: inherit; font-size: 16px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 980px; }
.cs-list { display: grid; gap: 8px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid #e8e8ed; border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.cs-row:hover { border-color: var(--blue); }
.cs-who { display: grid; min-width: 0; }
.cs-who small, .cs-dates small { color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.cs-dates { font-size: 15px; }
.cs-badge { display: inline-block; padding: 2px 10px; border-radius: 980px; font-size: 15px; font-weight: 600; white-space: nowrap; background: var(--gray); color: var(--text-2); }
.cs-badge.is-ok { background: #e6f4ea; color: #1e6b34; }
.cs-badge.is-soon { background: #fff4e5; color: #b35c00; }
.cs-badge.is-bad { background: #fdecec; color: #c92a2a; }
.cs-tlist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.cs-tlist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--gray); }
.cs-tlist li.is-alert { background: #fdf3f3; }
.cs-tlist small { color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.cs-tright { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cs-row { grid-template-columns: 1fr auto; }
  .cs-dates { grid-column: 1 / -1; grid-row: 2; }
}

/* 兒童主日學 點名 / 學生名單 (kids-roster.js) */
.kr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.kr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.kr-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin-bottom: 14px; }
.kr-kid { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 2px 10px; min-height: 56px; padding: 10px 12px; border: 2px solid #e2e2e8; border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.kr-kid.is-in { border-color: #2b8a3e; background: #ebfbee; }
.kr-check { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #c7c7cc; color: transparent; font-weight: 700; }
.kr-kid.is-in .kr-check { background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
.kr-name { min-width: 0; display: grid; font-size: 18px; font-weight: 600; }
.kr-kid .kr-alert, .kr-kid .kr-last { grid-column: 2; justify-self: start; }
.kr-name small { font-size: 15px; font-weight: 400; color: var(--text-2); }
.kr-alert { padding: 1px 8px; border-radius: 980px; background: #fdecec; color: #c92a2a; font-size: 15px; font-weight: 600; }
.kr-last { font-size: 15px; color: var(--text-2); }
.kr-guests { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; font-weight: 400; }
.kr-guests input { width: 52px; text-align: center; font: inherit; padding: 4px; border: 1px solid var(--line); border-radius: 8px; }
.kr-list { display: grid; gap: 8px; }
.kr-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #e8e8ed; border-radius: 14px; background: #fff; }
.kr-row.is-off { opacity: 0.6; }
.kr-row input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.kr-open { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.kr-open small, .kr-sub { color: var(--text-2); font-size: 15px; }
.kr-sub { flex-basis: 100%; }
.kr-grade { padding: 0 8px; border-radius: 980px; background: var(--gray); font-size: 15px; color: var(--text-2); }
.kr-open .kr-alert { flex-basis: auto; }
.kr-move { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--navy, #1d2b4f); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.kr-move select { font: inherit; padding: 6px 10px; border-radius: 10px; }
.kr-tag { padding: 0 8px; border-radius: 980px; background: #e7f0ff; color: #1c4f9c; font-size: 15px; font-weight: 600; }
.kr-tag.is-new { background: #fff4e5; color: #b35c00; }
.kr-kid .kr-tag { grid-column: 2; justify-self: start; }
.kr-plan { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; }
.kr-plan th, .kr-plan td { padding: 6px 8px; border-bottom: 1px solid #ececf0; text-align: left; }
.kr-plan tr.is-same td, .kr-plan tr.is-none td { color: var(--text-2); }
.kr-plan tr.is-none td:last-child { color: #c92a2a; }

/* choose a church account (account-picker.js) */
.ss-acct-field { display: grid; gap: 6px; font-size: 16px; font-weight: 600; }
.acct-pick { position: relative; font-weight: 400; }
.acct-pick input { width: 100%; font: inherit; font-size: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.acct-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 6px 6px 12px; border-radius: 12px; background: #eef4ff; }
.acct-chip > span { display: grid; min-width: 0; }
.acct-chip small { color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.acct-chip .link-btn { width: 28px; height: 28px; border-radius: 50%; }
.acct-list:empty { display: none; }
.acct-list ul { margin: 6px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); max-height: 260px; overflow-y: auto; }
.acct-list button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.acct-list button:hover, .acct-list button:focus-visible { background: var(--gray); }
.acct-list button span { font-size: 15px; color: var(--text-2); }
.acct-note { margin: 6px 0; font-size: 15px; color: var(--text-2); }
.ss-times input[type=number] { width: 72px; flex: none; text-align: center; }

/* 兒童主日學報名 /ministries/children/register/ */
.kreg-kids { display: grid; gap: 12px; }
.kreg-kid { margin: 0; padding: 14px 16px; border: 1px solid #e2e2e8; border-radius: 14px; background: #fff; display: grid; gap: 10px; }
.kreg-kid legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 700; }
.kreg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kreg .ss-btn { justify-self: start; }
.kreg-done { padding: 22px; border-radius: 18px; background: #ebfbee; }
.ss-tabs [data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; padding: 0 7px; border-radius: 980px; background: #b35c00; color: #fff; font-size: 15px; font-weight: 700; }

/* 家人申請 /join/ and /portal/applications/ */
.ma-list { display: grid; gap: 12px; margin-top: 12px; }
.ma-card { padding: 16px 18px; border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; display: grid; gap: 10px; }
.ma-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ma-card h3 { margin: 0; font-size: 19px; }
.ma-card h3 small { font-weight: 400; color: var(--text-2); font-size: 15px; }
.ma-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; }
.ma-dl dt { font-size: 15px; color: var(--text-2); }
.ma-dl dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.ma-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ma-actions:empty { display: none; }
.ma-actions [data-ma-note] { flex: 1; min-width: 180px; font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ma-upn { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.ma-upn input { width: 170px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.ma-result:empty { display: none; }
.ma-cred { padding: 12px 14px; border-radius: 12px; background: #fff4e5; border: 1px solid #ffd8a8; }
.ma-cred pre { white-space: pre-wrap; font-size: 15px; background: #fff; padding: 10px; border-radius: 8px; user-select: all; }
[data-ma-filter] [data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; padding: 0 7px; border-radius: 980px; background: var(--gray); font-size: 15px; font-weight: 700; }

/* 代禱事項 — Bible book pages and /prayer/ */
.bp-pr-ok { font-size: 15px; font-weight: 600; color: #2b8a3e; }
.pr-public { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pr-public li { padding: 16px 18px; border-radius: 16px; background: #fffaf0; border: 1px solid #efe3c8; }
.pr-public h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 21px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pr-public h2 small { margin-left: auto; font-family: inherit; font-weight: 400; font-size: 15px; color: var(--text-2); }
.pr-public p { margin: 0; white-space: pre-line; line-height: 1.7; }
.pr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.pr-name input { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.pr-list { display: grid; gap: 12px; margin-top: 10px; }
.pr-card { padding: 16px 18px; border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; display: grid; gap: 8px; }
.pr-card.is-off { opacity: 0.65; }
.pr-card h3 { margin: 0; font-family: var(--serif); font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pr-card h3 small { margin-left: auto; font-family: inherit; font-weight: 400; font-size: 15px; color: var(--text-2); }
.pr-meta { margin: 0; font-size: 15px; color: var(--text-2); }
.pr-text { margin: 0; white-space: pre-line; line-height: 1.7; }
.pr-praise { margin: 0; padding: 8px 12px; border-radius: 10px; background: #ebfbee; color: #1e6b34; white-space: pre-line; }
.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-replies { display: grid; gap: 6px; padding-left: 12px; border-left: 3px solid #efe3c8; }
.pr-replies:empty { display: none; }
.pr-reply { font-size: 15px; }
.pr-reply small { color: var(--text-2); }
.pr-reply p { margin: 2px 0 0; white-space: pre-line; }
.pr-reply .link-btn { margin-left: 4px; }
.pr-reply-form { display: flex; gap: 8px; align-items: flex-end; }
.pr-reply-form textarea { flex: 1; font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.pr-vis { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.pr-vis legend { font-weight: 600; margin-bottom: 4px; }
.pr-pub { display: grid; gap: 4px; font-size: 15px; color: var(--text-2); }
.pr-pub textarea { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
[data-pr-filter] [data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; padding: 0 7px; border-radius: 980px; background: #b35c00; color: #fff; font-size: 15px; font-weight: 700; }
/* 代禱 page of the Bible book: the title and buttons stand out; the verse is small and quiet */
/* 代禱 page of the Bible book, laid out as a chapter opening: content from the top, an ornament and title, a
   drop-capped first paragraph, two book-style buttons, and the verse as a small footnote at the foot of the page */
.bp-pr-page { height: calc(100% - 60px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(18px, 7%, 70px); } /* a chapter starts a little way down the page */
.bp-pr-orn { display: flex; align-items: center; gap: 16px; margin: 4px 0 10px; color: #a31d1d; font-size: 24px; line-height: 1; }
.bp-pr-orn::before, .bp-pr-orn::after { content: ""; flex: 1; max-width: 9em; height: 0; border-top: 1px solid #b8925a; }
.bp-pr-orn { justify-content: center; }
.bp-pr-title-big { margin: 0; font-family: var(--serif); font-size: 46px; font-weight: 700; text-align: center; color: #a31d1d; letter-spacing: 0.12em; line-height: 1.25; }
.bp-pr-sub { margin: 6px 0 26px; text-align: center; font-family: var(--serif); font-size: 15px; letter-spacing: 0.32em; color: #8a6a3a; }
html[data-lang="en"] .bp-pr-invite { text-align: left; } /* justified English leaves gaps on narrow pages */
.bp-pr-invite { margin: 0 0 6px; text-align: justify; font-family: var(--serif); font-size: 23px; line-height: 1.85; color: #2b2118; }
.bp-pr-invite::first-letter { float: left; margin: 4px 10px 0 0; font-size: 2.95em; line-height: 1.05; font-weight: 700; color: #a31d1d; } /* two lines tall */
.bp-pr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 30px 0 0; }
.bp-pr-btn { display: inline-block; min-width: 13em; box-sizing: border-box; text-align: center; padding: 13px 24px; border-radius: 3px; border: 1.5px solid #a31d1d; color: #a31d1d; background: #fffaf0; font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; line-height: 1.2; }
.bp-pr-btn.is-primary { background: #a31d1d; color: #fff8ec; box-shadow: inset 0 0 0 3px #a31d1d, inset 0 0 0 4px rgba(255, 248, 236, 0.55); }
.bp-pr-btn:hover { text-decoration: none; filter: brightness(1.08); }
@media (max-width: 734px) {
  .bp-pr-title-big { font-size: 36px; }
  .bp-pr-invite { font-size: 19px; }
  .bp-pr-actions { flex-direction: column; align-items: stretch; margin-top: 22px; gap: 12px; }
  .bp-pr-btn { min-width: 0; font-size: 19px; padding: 12px 16px; }
}
.bp-pr-btn:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }
.bp-pr-verse { margin: auto 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: #8a7560; text-align: left; }
.bp-pr-verse::before { content: ""; display: block; width: 5em; margin-bottom: 8px; border-top: 1px solid #c9a46a; }
.bible .bp-pr-verse p { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 400; letter-spacing: 0.02em; color: inherit; }
.bp-pr-verse cite { display: block; margin-top: 2px; font-style: normal; font-size: 15px; color: #8a6a3a; }

/* 統計報表 /portal/reports/ */
.rp-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.rp-card { padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #e8e8ed; display: grid; gap: 12px; align-content: start; }
.rp-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rp-card h2 { margin: 0; font-family: var(--serif); font-size: 21px; }
.rp-card header a { font-size: 15px; }
.rp-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.rp-stats div { padding: 10px 12px; border-radius: 12px; background: var(--gray); }
.rp-stats dt { font-size: 15px; color: var(--text-2); }
.rp-stats dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; }
.rp-stats .is-warn dd { color: #b35c00; }
.rp-stats .is-bad dd { color: #c92a2a; }
.rp-chart { margin: 0; }
.rp-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.rp-legend { display: flex; gap: 10px; }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.rp-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 18px; }
.rp-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.rp-stack { display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; min-height: 2px; }
.rp-stack i { display: block; min-height: 2px; }
.rp-val { font-size: 15px; text-align: center; color: var(--text-2); }
.rp-lab { font-size: 15px; text-align: center; color: var(--text-2); margin-top: 4px; white-space: nowrap; }
.rp-c0 { background: #1f3a68; } .rp-c1 { background: #b8914a; } .rp-c2 { background: #2b8a3e; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rp-table th, .rp-table td { padding: 6px 8px; border-bottom: 1px solid #ececf0; text-align: left; }
.rp-table td:last-child, .rp-table th:last-child { text-align: right; }

/* 迎新 /portal/newcomers/ */
.nc-list { display: grid; gap: 8px; }
.nc-row { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid #e8e8ed; border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.nc-row:hover { border-color: var(--blue); }
.nc-who { display: grid; gap: 3px; min-width: 0; }
.nc-who small { color: var(--text-2); font-size: 15px; }
.nc-meta { overflow-wrap: anywhere; }
.nc-wishes { display: flex; flex-wrap: wrap; gap: 4px; }
.nc-right { display: grid; justify-items: end; gap: 3px; flex: none; }
.nc-right small { color: var(--text-2); font-size: 15px; }
.cs-badge.is-new { background: #fff4e5; color: #b35c00; }
.cs-badge.is-off { background: var(--gray); color: var(--text-2); }
.nc-log ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 4px; font-size: 15px; }
.nc-log { max-height: 180px; overflow-y: auto; }
[data-nc-filter] [data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; padding: 0 7px; border-radius: 980px; background: #b35c00; color: #fff; font-size: 15px; font-weight: 700; }
/* kiosk pages (the newcomer card on a greeter's iPad): no menu or footer, just the card */
body.kiosk .globalnav, body.kiosk .globalfooter, body.kiosk .more-sheet { display: none !important; }
body.kiosk { padding-bottom: 0; }
body.kiosk .kiosk-lang { display: inline-flex; gap: 6px; margin-top: 14px; }
.kiosk-lang { display: none; }
.kiosk-lang button { font: inherit; padding: 6px 16px; border-radius: 980px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; cursor: pointer; }
.kiosk-lang button[aria-pressed="true"] { background: #fff; color: var(--navy, #1d2b4f); }
.kiosk-exit { text-align: center; margin: 0 0 40px; font-size: 15px; }
.kiosk-exit a { color: var(--text-2); }
.nc-kiosk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.nc-import { margin-top: 28px; border-top: 1px solid var(--line, #ddd); padding-top: 14px; }
.nc-import > summary { cursor: pointer; font-weight: 600; }
.nc-import [data-imp-preview] { overflow-x: auto; margin-top: 10px; }
.nc-imp-table { border-collapse: collapse; font-size: 15px; margin: 6px 0; }
.nc-imp-table th, .nc-imp-table td { text-align: left; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* 小組 /portal/smallgroups/ */
.sg-leaders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sf-helpers { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line, #e5e0d8); }
.is-sg-helper [data-sg-panel="fam"] > .la-check, .is-sg-helper [data-sg-loose-wrap] > p { display: none !important; }
.sg-info { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line, #e5e0d6); border-radius: 10px; }
.sg-info[hidden], .sg-info label[hidden] { display: none; }
.sg-info .sg-label { flex-basis: 100%; margin: 0; }
.sg-info label { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; flex: 1 1 160px; min-width: 0; }
.sg-info label[data-sg-order] { flex: 0 0 80px; }
.sg-info input { width: 100%; box-sizing: border-box; }
.sg-label { font-weight: 600; color: var(--text-2); }
.sg-addlead { flex: 1; min-width: 240px; }
.sg-row { align-items: center; cursor: default; }
.sg-row.is-off { opacity: 0.6; }
#sg-app [data-sg-group] { font: inherit; font-size: 17px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }

/* 事工 /ministries/: every ministry as a card in its own colour */
.mi-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mi-card { display: grid; gap: 6px; align-content: start; height: 100%; box-sizing: border-box; padding: 22px 22px 18px; border-radius: 18px; background: #fff; border: 1px solid #e8e8ed; border-top: 5px solid var(--mi, #b86a12); color: var(--text); }
.mi-card:hover { text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.mi-name { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--mi, #b86a12); }
.mi-sub { font-size: 15px; color: var(--text-2); }
.mi-text { font-size: 17px; line-height: 1.6; }
.mi-go { margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--mi, #b86a12); }

/* 場地預約 (總務與財務 › 場地預約): a day's timeline per room, the ECC plan coloured free / in use / pending */
.rm-app { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.rm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rm-head h2 { margin: 0; font-family: var(--serif); font-size: 28px; }
.rm-daybar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 14px; }
.rm-daybar input[type="date"] { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.rm-dayname { font-size: 18px; }
.rm-grid { display: grid; gap: 4px; }
.rm-building { margin: 10px 0 2px; font-weight: 700; color: var(--text-2); font-size: 15px; }
.rm-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.rm-label { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-label small { color: #b35c00; font-weight: 700; }
.rm-track { position: relative; height: 38px; border-radius: 8px; background: repeating-linear-gradient(90deg, #f5f5f7 0 calc(100% / 16 - 1px), #e6e6ea calc(100% / 16 - 1px) calc(100% / 16)); cursor: pointer; }
.rm-ruler .rm-track { height: 18px; background: none; cursor: default; }
.rm-ruler .rm-track span { position: absolute; top: 0; transform: translateX(-50%); font-size: 15px; color: var(--text-2); }
.rm-block { position: absolute; top: 3px; bottom: 3px; min-width: 6px; padding: 0 6px; border: 0; border-radius: 6px; background: #1f6f78; color: #fff; font: inherit; font-size: 15px; line-height: 32px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rm-block.is-pending { background: repeating-linear-gradient(135deg, #d98a1f 0 8px, #e9a443 8px 16px); }
.rm-block.is-mine { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #1f6f78; }
.rm-map { margin-top: 18px; }
.rm-map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rm-map select { font: inherit; font-size: 15px; padding: 2px 6px; }
.rm-key { display: inline-flex; align-items: center; gap: 4px 6px; font-size: 15px; }
.rm-key i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid #3a3a3f; }
.rm-key i.is-free, .rm-room.is-free polygon { fill: #dff3e4; background: #dff3e4; }
.rm-key i.is-busy, .rm-room.is-busy polygon { fill: #1f6f78; background: #1f6f78; }
.rm-key i.is-pending, .rm-room.is-pending polygon { fill: #e9a443; background: #e9a443; }
.rm-room.is-busy text { fill: #fff; }
.rm-off { cursor: default; }
.rm-off polygon { fill: #f0f0f2; stroke-width: 1.5; }
.rm-off text { fill: #8e8e93; font-size: 22px; }
.rm-off:hover polygon { fill: #f0f0f2; }
.rm-mine, .rm-pending { margin-top: 22px; }
.rm-mine h3, .rm-pending h3 { margin: 0 0 8px; font-size: 19px; }
.rm-pending { padding: 14px 16px; border-radius: 14px; background: #fff7ea; border: 1px solid #f0d9b0; }
.rm-list { list-style: none; margin: 0; padding: 0; }
.rm-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-taken { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff3f3; border: 1px solid #f0c4c4; }
@media (max-width: 734px) {
  .rm-row { grid-template-columns: 5.2em minmax(0, 1fr); gap: 6px; }
  .rm-label { font-size: 15px; }
  .rm-block { font-size: 15px; padding: 0 3px; }
  .rm-block b { display: none; }
}

/* 行事曆編輯 /portal/calendar/: the month as a list of days; tap an event to change it */
.ce-app { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.ce-list { display: grid; gap: 14px; }
.ce-day h3 { margin: 0 0 4px; font-size: 16px; color: var(--text-2); }
.ce-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ce-ev { width: 100%; display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.ce-ev:hover { border-color: #b9b9c0; }
.ce-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.ce-title { min-width: 0; overflow-wrap: anywhere; }
.ce-tags { display: flex; gap: 6px; align-items: center; font-size: 15px; white-space: nowrap; }
.ce-chip { padding: 2px 8px; border-radius: 980px; background: #eef3fb; color: #1f4e8c; }
.ce-off { padding: 2px 8px; border-radius: 980px; background: #f2f2f4; color: var(--text-2); }
.ce-check { align-self: end; padding-bottom: 10px; }
.ce-room { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0 0; display: grid; gap: 8px; }
@media (max-width: 734px) {
  .ce-ev { grid-template-columns: 1fr; gap: 4px; }
  .ce-tags { flex-wrap: wrap; }
}

/* an event's language on the calendar (events placed from 活動管理) */
.ag-lang { margin-left: 6px; padding: 1px 7px; border-radius: 980px; background: #f2efe7; color: #6b5a3e; font-size: 15px; font-weight: 600; vertical-align: 2px; }

/* 教會行事曆 (portal): the calendar, then 行事曆編輯 / 活動管理 for calendar editors */
.ce-cal { margin: 0 0 8px; }
.ce-cal .cal { margin: 0; }
.ce-tabs { margin: 0 0 12px; }
.ce-tabs [aria-selected="true"] { background: var(--text); color: #fff; }
.ce-warn { padding: 2px 8px; border-radius: 980px; background: #fff1de; color: #9a5300; }
.ct-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 6px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.ct-row small { grid-column: 1 / -1; }
.rm-list li.is-off { opacity: 0.6; }
.ce-repeat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 10px 0; display: grid; gap: 10px; }
.ce-repeat legend { padding: 0 6px; font-weight: 600; }
.ce-repeat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ce-repeat input[type="number"] { width: 4.5em; }
.ce-repeat select, .ce-repeat input { font: inherit; font-size: 15px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; }
.ce-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-days label { position: relative; }
.ce-days input { position: absolute; opacity: 0; }
.ce-days span { display: inline-grid; place-items: center; min-width: 2.4em; height: 2.4em; padding: 0 6px; border-radius: 980px; border: 1px solid var(--line); cursor: pointer; }
.ce-days input:checked + span { background: var(--blue, #0071e3); border-color: var(--blue, #0071e3); color: #fff; }
.ce-days input:focus-visible + span { outline: 2px solid var(--blue, #0071e3); outline-offset: 2px; }
.ce-month-rule, .ce-end { display: grid; gap: 8px; }
.ce-end > span { font-weight: 600; }
.ce-summary { margin: 0; color: #1f4e8c; font-weight: 600; }
/* the repeat box: Outlook-style rows ("Every [1] week(s)", "On the [first] [Sunday]", "Ends ○ Never ○ On … ○ After …") */
.ss-form .ce-repeat label, .ss-form .ce-check { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 500; color: var(--text); }
.ce-repeat input[type="radio"], .ce-repeat input[type="checkbox"], .ce-check input { width: auto !important; flex: none; margin: 0; }
.ce-repeat input[type="date"], .ce-repeat select { width: auto !important; }
.ce-end { grid-template-columns: auto; justify-items: start; }
.ce-month-rule { justify-items: start; }
.ss-form .ce-repeat [hidden], .ss-form .ce-repeat label[hidden] { display: none !important; }
.ce-locnote { margin: -4px 0 4px; padding: 8px 12px; border-radius: 10px; background: #fff6e5; border: 1px solid #f0d9a8; font-size: 15px; color: #6b4a12; }
.ce-locnote a { font-weight: 600; }
.ss-form .ce-room .la-check { display: flex !important; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.ce-room input[type="checkbox"] { width: auto !important; flex: none; margin: 0; }

/* 週報: the editor's new parts and the bulletin's sermon, serving (本週/下週) and members-only blocks */
.ble-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ble-row.ble-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.ble-row.ble-row-4 { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.ble-lock { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #fff6e5; border: 1px solid #f0d9a8; color: #6b4a12; font-size: 15px; }
.ble-app.is-locked .ble-form input, .ble-app.is-locked .ble-form textarea { background: #f7f5f1; color: #3a3128; }
.ble-app.is-locked .ble-form [data-add], .ble-app.is-locked .ble-form .ble-tools, .ble-app.is-locked .ble-form [data-song-add], .ble-app.is-locked .ble-form [data-song-del], .ble-app.is-locked .ble-form [data-bl-fill] { display: none; }
.ble-row.ble-row-songs { align-items: start; }
.ble-songs { display: grid; gap: 6px; }
.ble-song { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ble-song input { min-width: 0; }
.ble-song [data-song-link] { font-size: 15px; }
.ble-song [data-song-link].is-bad { border-color: #c0392b; background: #fff5f4; }
@media (max-width: 734px) { .ble-song { grid-template-columns: minmax(0, 1fr) auto; } .ble-song [data-song-link] { grid-column: 1; } .ble-song button { grid-row: 1; grid-column: 2; } }
.bl-songs { list-style: none; margin: 0; padding: 0; }
.bl-songs li + li { margin-top: 4px; }
.bl-songs a { color: inherit; text-decoration: none; border-bottom: 1px solid #e2c89a; }
.bl-songs a:hover { color: #a35d0f; }
.bl-play { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: #c4302b; color: #fff; font-size: 15px; vertical-align: 2px; }
.ble-song button { border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 4px 6px; }
.ble-songs [data-song-add] { justify-self: start; }
.ble-members { border-style: dashed; }
.ble-members h3 small, .bl-members .bl-h small { font-size: 15px; font-weight: 500; color: var(--text-2); }
.bl-vol { margin: 0 0 6px; font-size: 15px; color: var(--text-2); letter-spacing: 0.04em; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 8px; }
.bl-meta div { display: flex; gap: 8px; }
.bl-meta dt { color: var(--text-2); }
.bl-meta dd { margin: 0; font-weight: 600; }
.bl-sub { margin: 10px 0 4px; font-size: 15px; color: var(--text-2); }
.bl-table-3 thead th { font-size: 15px; color: var(--text-2); font-weight: 600; text-align: left; }
.bl-members { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fbfbfd; }
@media (max-width: 734px) { .ble-two { grid-template-columns: 1fr; } .ble-row.ble-row-3 { grid-template-columns: 1fr 1fr; } .ble-row.ble-row-3 input:first-child { grid-column: 1 / -1; } .ble-row.ble-row-4 { grid-template-columns: 1fr 1fr; } .ble-row.ble-row-songs .ble-songs { grid-column: 1; } }


/* 教會歷史 /history/ */
.hi-title { font-size: clamp(30px, 5vw, 52px); letter-spacing: 0.06em; }
.hi-timeline-wrap { padding-top: 40px; padding-bottom: 24px; }
.hi-timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.hi-timeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; border-top: 2px solid #e2d3b3; }
.hi-timeline li { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 10px; text-align: center; }
.hi-year { position: relative; z-index: 1; display: inline-grid; place-items: center; min-width: 76px; height: 62px; padding: 0 10px; border-radius: 980px; background: var(--ivory, #fbf8f2); border: 2px solid var(--gold, #b8925a); font-family: var(--serif); font-size: 24px; font-weight: 700; color: #7a4e14; }
.hi-timeline strong { font-family: var(--serif); font-size: 19px; color: #231a10; margin-top: 6px; }
.hi-timeline li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hi-story { padding-top: 40px; }
.hi-note { color: var(--text-2); font-style: italic; }
.hi-story p { font-size: 20px; line-height: 2; color: #3a3128; margin: 0 0 18px; text-align: justify; }
.hi-story p.hi-first { font-family: var(--serif); font-size: 23px; line-height: 1.95; color: #231a10; } /* the opening paragraph (it starts with a year, so no drop cap) */
.hi-story h2 { display: flex; align-items: baseline; gap: 14px; margin: 56px 0 18px; font-family: var(--serif); font-size: 28px; line-height: 1.4; color: #231a10; }
.hi-num { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #a35d0f; color: #fff; font-size: 22px; }
.hi-closing { margin: 56px 0 36px; padding: 34px 28px; border-top: 1px solid #e2d3b3; border-bottom: 1px solid #e2d3b3; text-align: center; }
.hi-closing p { text-align: center; font-family: var(--serif); font-size: 22px; line-height: 2; color: #231a10; }
.hi-closing p:first-child { font-size: 26px; font-weight: 700; color: #7a4e14; }
.hi-verse { margin: 0 0 40px; text-align: center; background: none; }
.hi-verse p { font-size: 24px !important; text-align: center !important; }
.hi-verse cite { display: block; color: var(--gold, #b8925a); font-style: normal; }
@media (max-width: 734px) {
  .hi-timeline { grid-template-columns: 1fr; gap: 18px; }
  .hi-timeline::before { left: 37px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 2px solid #e2d3b3; }
  .hi-timeline li { grid-template-columns: 76px 1fr; justify-items: start; align-items: center; text-align: left; column-gap: 14px; }
  .hi-timeline li .hi-year { grid-row: span 2; }
  .hi-timeline strong { margin: 0; }
  .hi-story p { font-size: 18px; text-align: left; } /* justified text leaves gaps around English words on phones */
  .hi-story p.hi-first { font-size: 20px; }
  .hi-story h2 { font-size: 23px; }
}
.hi-title, .hi-timeline strong, .hi-story h2, .hi-story p.hi-first, .hi-closing p, .hi-verse p { font-family: var(--serif); }
.ble-auto { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: #fff6e5; color: #6b4a12; font-size: 15px; line-height: 1.5; }
.ble-auto-top { font-size: 15px; padding: 10px 12px; }
.ma-hero { padding-bottom: 44px; }
.ma-hero .ab-eyebrow a { color: inherit; }
.ma-intro { margin: 26px auto 22px; max-width: 720px; font-size: 19px; line-height: 1.9; color: #3a3128; text-align: justify; }
.ma-section { padding-top: 48px; }
.ma-desc { margin-bottom: 40px; }
.ma-desc p { font-size: 20px; line-height: 2; color: #3a3128; margin: 0 0 16px; text-align: justify; }
.ma-desc .ma-terms dd { font-size: 19px; }
.ma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ma-card { padding: 28px 28px 22px; border-radius: 20px; background: #fff; border: 1px solid #ece3d2; box-shadow: 0 10px 30px rgba(35, 26, 16, 0.06); }
.ma-card-en { background: #f7f9fc; border-color: #dde5f0; }
.ma-label { margin: 0 0 16px; font-size: 15px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #a35d0f; }
.ma-card-en .ma-label { color: #1f4e8c; }
.ma-card p { font-size: 18px; line-height: 1.9; color: #3a3128; margin: 0 0 12px; }
.ma-times { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fbf6ec; }
.ma-card-en .ma-times { background: #edf2f9; }
.ma-times div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 5px 0; }
.ma-times div + div { border-top: 1px dashed rgba(0, 0, 0, 0.1); }
.ma-times dt { font-weight: 600; color: #231a10; }
.ma-times dd { margin: 0; color: var(--text-2); }
.ma-terms { margin: 0 0 12px; }
.ma-terms div { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #d9b77a; }
.ma-terms dt { font-family: var(--serif); font-weight: 700; font-size: 19px; color: #7a4e14; }
.ma-terms dd { margin: 4px 0 0; font-size: 18px; line-height: 1.9; color: #3a3128; }
.ma-contact { font-size: 16px !important; color: var(--text-2) !important; }
.ma-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px !important; }
.ma-more { margin-top: 64px; padding-top: 28px; border-top: 1px solid #e7dcc7; scroll-margin-top: 110px; }
.ma-more-h { margin: 0; font-family: var(--serif); font-size: 30px; color: #231a10; }
.ma-more-k { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; color: #a35d0f; }
.ma-more .mp-summary { margin: 12px 0 0; color: var(--text-2); }
.ma-ss { margin-top: 12px; }
.ma-section .section { padding-top: 24px; }
.ma-others { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.ma-others a { padding: 7px 16px; border-radius: 980px; border: 1px solid #e2d3b3; color: #4a3a26; font-size: 16px; }
.ma-others a:hover { background: #f6efe2; text-decoration: none; }
.ma-index { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ma-index a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #ece3d2; color: #231a10; }
.ma-index a:hover { text-decoration: none; border-color: #d9b77a; }
.ma-index strong { font-family: var(--serif); font-size: 21px; }
.ma-index small { margin-left: auto; color: var(--text-2); font-size: 15px; }
.ma-closing { max-width: 760px; margin: 48px auto 0; padding: 28px 24px; border-top: 1px solid #e2d3b3; border-bottom: 1px solid #e2d3b3; font-family: var(--serif); font-size: 21px; line-height: 2; color: #231a10; text-align: center; }
@media (max-width: 734px) { .ma-grid { grid-template-columns: 1fr; } .ma-card { padding: 22px 18px 16px; } .ma-card p, .ma-terms dd, .ma-desc p { font-size: 17px; } .ma-desc p { text-align: left; } .ma-intro { text-align: left; } }
/* 設施維護 (總務與財務) */
.fa-app { margin-top: 8px; }
.fa-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 0 0 18px; }
.fa-task { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #ece3d2; border-left: 5px solid #2f9e44; }
.fa-task.is-due { border-left-color: #e67700; background: #fffaf0; }
.fa-task.is-overdue { border-left-color: #c92a2a; background: #fff5f5; }
.fa-task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fa-task h3 { margin: 0; font-size: 20px; }
.fa-due { margin: 10px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fa-due span { color: var(--text-2); font-size: 15px; }
.fa-due strong { font-size: 22px; }
.fa-detail { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #ece3d2; }
.fa-detail summary { cursor: pointer; font-weight: 600; }
.fa-buy-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fa-buy-list li { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.fa-buy-total { padding-left: 14px; border-left: 1px solid #e2d3b3; }
.fa-size { display: inline-block; padding: 1px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; font-weight: 600; background: #f1f3f5; }
.fa-size-20-24-2 { background: #fff0e0; color: #c25b00; }
.fa-size-20-20-2 { background: #e7f0fd; color: #1c5fb8; }
.fa-size-16-25-2 { background: #e6f6ea; color: #2b8a3e; }
.fa-size-16-24-2 { background: #f3e8fd; color: #7b2cbf; }
.fa-notes { margin: 8px 0 4px; padding-left: 20px; color: #6b4a12; font-size: 15px; }
.fa-map { margin: 12px 0; }
.fa-map img { display: block; width: 100%; height: auto; border-radius: 12px; }
.fa-table-wrap { overflow-x: auto; margin-top: 10px; }
.fa-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.fa-table th, .fa-table td { padding: 8px 10px; border-bottom: 1px solid #ece3d2; text-align: left; vertical-align: top; }
.fa-table th { font-size: 15px; color: var(--text-2); font-weight: 600; }
.fa-unit-note { display: block; color: var(--text-2); font-size: 15px; margin-top: 2px; }
.ma-verify { flex-basis: 100%; margin: 0 0 8px; padding: 10px 12px; border: 1px solid #e2d3b3; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ma-verify legend { padding: 0 4px; font-size: 15px; font-weight: 600; color: #7a4e14; }
.ma-verify.is-missing { border-color: #c92a2a; background: #fff5f5; }
/* 服事排班 */
/* 輪值排班's tabs (roster-tabs.js): one roster each */
.rz-tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid #e2d3b3; overflow-x: auto; scrollbar-width: none; }
.rz-tabs a { flex: none; padding: 10px 14px; border-bottom: 3px solid transparent; color: #5b4630; font-size: 16px; text-decoration: none; white-space: nowrap; }
.rz-tabs a:hover { color: #a35d0f; }
.rz-tabs a[aria-current="page"] { border-bottom-color: #a35d0f; color: #a35d0f; font-weight: 600; }
.ro-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ro-tabs button { padding: 6px 14px; border-radius: 980px; border: 1px solid #e2d3b3; background: #fff; font-size: 16px; cursor: pointer; }
.ro-tabs button[aria-selected="true"] { background: #a35d0f; border-color: #a35d0f; color: #fff; }
.ro-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.ro-tools [data-ro-fill] { margin-left: auto; }
.ro-list { list-style: none; margin: 0; padding: 0; border: 1px solid #ece3d2; border-radius: 14px; background: #fff; overflow: hidden; }
.ro-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 10px 14px; border-top: 1px solid #f1ead9; }
.ro-row:first-child { border-top: 0; }
.ro-row.is-next { background: #fff8ea; }
.ro-row.is-past { opacity: 0.6; }
.ro-date { font-weight: 600; }
.ro-who strong { font-size: 18px; }
.ro-who small { display: block; color: var(--text-2); font-size: 15px; }
.ro-who .ro-note { color: #7a4e14; }
.ro-edit { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-edit select { min-width: 160px; }
.ro-edit input { flex: 1; min-width: 140px; }
.ro-edit .ro-names { flex: 2; min-width: 220px; }
.ro-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.ro-chip { padding: 5px 12px; border-radius: 980px; border: 1px solid #e2d3b3; background: #fff; font-size: 15px; cursor: pointer; }
.ro-chip[aria-pressed="true"] { background: #a35d0f; border-color: #a35d0f; color: #fff; }
.ro-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ro-count b { color: #a35d0f; }
.ro-count.is-zero b { color: #b02a2a; }
.ro-pool-edit input { flex: 1; }
#ro-form .la-check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
#ro-form .la-check input { width: auto; flex: none; margin: 0; }
#ro-form .la-check small { margin-left: 4px; }
.ro-link { margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e8e8ed; }
.ro-link p { margin: 0 0 8px; }
.rs-weeks { display: grid; gap: 14px; }
.rs-week { padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; box-shadow: 0 10px 30px rgba(35, 26, 16, 0.06); }
.rs-week:first-child { border-color: #d9b77a; background: #fffaf0; }
.rs-label { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: #a35d0f; }
.rs-group { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 700; color: #231a10; }
.rs-leaders { margin: 4px 0 0; font-size: 18px; color: #3a3128; }
.rs-none { margin: 0; color: var(--text-2); font-size: 20px; }
.rs-note { margin: 8px 0 0; color: #7a4e14; }
.rs-foot { margin-top: 18px; text-align: center; }
.ro-check { display: grid; gap: 8px; margin: 6px 0 4px; }
.ro-round { padding: 10px 14px; border-radius: 12px; background: #fbf6ec; border: 1px solid #ecdcb9; }
.ro-round.is-ok { background: #effaf2; border-color: #c3e6cd; }
.ro-round.is-bad { background: #fff5f5; border-color: #f1c0c0; }
.ro-round p { margin: 4px 0 0; }
.ro-round-count { float: right; font-weight: 600; }
.ro-warn { color: #b02a2a; }
.ro-edit [data-ro-act] { min-width: 0; }
.ro-swap { display: inline-flex; gap: 6px; align-items: center; }
.ro-insert { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-groups { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; margin: 6px 0 10px; padding: 8px 12px; border: 1px solid #e8e8ed; border-radius: 10px; }
@media (max-width: 734px) { .ro-row { grid-template-columns: 1fr; } .ro-tools [data-ro-fill] { margin-left: 0; } }

/* 首頁聖經 on phones: compact enough that the book is about one screen tall; it is as tall as its tallest page
   (bible.js) and nothing scrolls inside it */
@media (max-width: 734px) {
  .bible-wrap { padding: 12px 8px 12px; }
  .bible { padding: 8px 8px 10px; }
  .bible-page { padding: 16px 18px 38px; }
  .bp-head { margin-bottom: 10px; padding-bottom: 6px; font-size: 15px; }
  .bible .bp-title { font-size: 27px; margin-bottom: 8px; }
  .bp-num { bottom: 10px; font-size: 15px; }
  .bible-controls { margin-top: 8px; }
  .bible .bp-psalm { margin-top: 18px; }
  .bible .bp-psalm p { font-size: 22px; line-height: 1.85; }
  html[data-lang="en"] .bible .bp-psalm p { font-size: 18px; }
  .bp-verse { margin: 18px 0 14px; }
  .bp-link { margin-top: 12px; }
  /* the longest pages, a little shorter: the ministries' lists without the one-line descriptions, a smaller verse */
  .bp-pr-page { padding-top: 4px; }
  .bp-pr-sub { display: none; }
  .bp-pr-invite { font-size: 18px; line-height: 1.7; }
  .bp-pr-actions { margin-top: 16px; }
  .bible .bp-pr-verse p, .bp-pr-verse cite { font-size: 14px; line-height: 1.5; }
}

/* 報銷申請 (operations › #reimburse) */
.rb-app { margin-top: 40px; }
.rb-form { margin: 12px 0 20px; padding: 16px; border: 1px solid #e8e8ed; border-radius: 14px; background: #fff; }
.rb-form h3 { margin: 0 0 8px; }
.rb-list { display: grid; gap: 10px; margin: 10px 0; }
.rb-card { padding: 12px 14px; border: 1px solid #e8e8ed; border-left: 4px solid #a35d0f; border-radius: 12px; background: #fff; }
.rb-card header { display: flex; justify-content: space-between; gap: 10px; }
.rb-card p { margin: 6px 0 0; }
.rb-card.is-paid { border-left-color: #2e8b57; }
.rb-card.is-declined, .rb-card.is-withdrawn { border-left-color: #aaa; opacity: 0.8; }
.rb-amount { font-weight: 700; white-space: nowrap; }
.rb-status { font-weight: 600; }
.rb-hint { color: #0b5cad; }
.rb-history summary { cursor: pointer; font-size: 15px; color: var(--text-2); }
.rb-history pre { white-space: pre-wrap; font-size: 15px; margin: 6px 0 0; }
.rb-pay { margin-top: 8px; align-items: center; flex-wrap: wrap; }
.rb-pay input { max-width: 220px; }
.rb-receipts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rb-receipts img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #e8e8ed; }
.rb-pdf { display: inline-block; padding: 8px 10px; border: 1px solid #e8e8ed; border-radius: 8px; font-size: 15px; }
.rb-finance { margin-top: 24px; padding-top: 12px; border-top: 1px solid #ece3d2; }
.rb-appr { align-items: flex-end; }
.rb-appr label { flex: 1; display: grid; gap: 2px; }

/* ECC 水電與房租 (operations › #ecc-billing) */
.eb-totals { margin: 6px 0; }
.eb-card.is-due { border-left-color: #c77d12; }
.eb-card.is-late { border-left-color: #b02a2a; }
.eb-settings { margin-top: 20px; }
.eb-settings summary { cursor: pointer; font-weight: 600; }
.eb-settings .am-form { margin-top: 10px; }
ul.rb-list { list-style: none; padding: 0; }
.es-instructions { white-space: pre-wrap; padding: 14px 16px; border-radius: 12px; background: #fbf6ec; border: 1px solid #ecdcb9; }
.es-total { font-size: 20px; font-weight: 700; }

/* English Ministry bulletin on the website */
.bl-en .bl-theme { font-size: 1.15em; font-style: italic; color: var(--text-2); }
.bl-schedule { list-style: none; margin: 0; padding: 0; }
.bl-schedule li { display: grid; grid-template-columns: 1fr auto; gap: 0 1em; padding: 0.3em 0; border-bottom: 1px solid var(--line, #e8e8ed); }
.bl-sch-item { font-weight: 600; }
.bl-sch-who { text-align: right; color: var(--text-2); }
.bl-sch-line { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1em; padding-left: 1.5em; }
.bl-passage { font-style: italic; }
.bl-bullets { list-style: "♦  "; padding-left: 1.4em; }
.bl-song { break-inside: avoid; margin-bottom: 1em; }
.bl-lyrics p { margin: 0 0 0.8em; font-style: italic; }
.bl-lyrics .bl-part { color: var(--text-2); }
.bl-closing { text-align: center; font-size: 1.15em; margin-top: 1.5em; }

/* 首頁 on phones (redesign): shorter sections, larger type in the book.
   The live/welcome strips drop the rows the first screen and the footer already show (service times, contacts). */
@media (max-width: 734px) {
  .ministry-split { min-height: 0; }
  .ms-panel { min-height: 210px; padding: 24px 22px 22px; }
  .ms-name { font-size: 38px; }
  .ms-go { margin-top: 10px; }
  .pair-strip .pair-dup { display: none; }
  .tile-live, .tile-welcome { padding-bottom: 14px; }
  .bible .bp-list li { padding: 7px 0; }
  .bp-pr-sub { font-size: 16px; letter-spacing: 0.24em; }
  .bp-pr-invite { font-size: 21px; line-height: 1.75; }
  .bp-pr-verse { font-size: 18px; line-height: 1.65; }
  .bp-pr-verse cite { font-size: 17px; }
}

/* ---------- The redesign's visual system, on every page (10/2026) ----------
   Headings in the serif (宋體), on three fixed sizes; text in the sans. Navy for the main buttons, gold for thin
   rules and labels. Page headers stay short on phones so the content starts on the first screen. */
:root { --primary: #1d3461; --primary-hover: #2b4a80; --link: #1a5a96; }
h1, h2, h3, .headline, .headline-sm { font-family: var(--serif); }
.headline { font-size: 40px; line-height: 1.25; font-weight: 700; letter-spacing: 0.04em; }
.headline-sm { font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: 0.02em; }
.subhead { font-size: 21px; line-height: 1.6; }
.pill { min-height: 44px; background: var(--primary); border-color: var(--primary); }
.pill:hover { background: var(--primary-hover); }
.pill-white { background: #fff; border-color: #fff; color: var(--text); }
.pill-white:hover { background: #f0f0f2; }
.ab-hero { padding: 64px 22px 44px; }
.pt-hero { padding: 44px 22px 36px; }
.pt-hero-sm { padding: 36px 22px 30px; }
.pt-hero .headline { font-size: 36px; }
.mp-hero { padding: 56px 22px 48px; }
.mp-hero-sm { padding: 40px 22px 34px; }
.mp-h2 { font-size: 30px; }
@media (max-width: 734px) {
  .headline { font-size: 32px; }
  .headline-sm { font-size: 26px; }
  .subhead { font-size: 19px; }
  .ab-hero { padding: 30px 18px 22px; }
  .ab-eyebrow { margin-bottom: 6px; }
  .ab-title { font-size: 34px; }
  .ab-sub { margin-top: 8px; font-size: 17px; line-height: 1.6; }
  .ab-rule { margin-top: 16px; }
  .pt-hero, .pt-hero-sm { padding: 26px 18px 22px; }
  .pt-hero .headline { font-size: 30px; }
  .mp-hero { padding: 30px 18px 26px; }
  .mp-hero-sm { padding: 26px 18px 22px; }
  .mp-summary { margin-top: 10px; font-size: 18px; }
  .mp-h2 { font-size: 26px; margin-top: 30px; }
  .section { padding: 28px 16px 44px; }
  .ab-section, .ab-mission { padding: 40px 16px; }
}
.pt-gate:has([data-gate-out]:not([hidden])) { background: var(--cream); color: var(--text); }
.pt-about { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); }
.pt-about > summary { cursor: pointer; color: var(--text-2); font-size: 16px; }
.pt-about .mp-h2 { font-size: 22px; margin-top: 22px; }

/* ---------- 第一次來？ /visit/ ---------- */
.vs-jump { position: sticky; top: 64px; z-index: 40; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 8px 12px; background: rgba(251, 248, 242, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #ece3d2; }
.vs-jump a { padding: 6px 14px; border-radius: 980px; color: var(--text); font-size: 16px; }
.vs-jump a:hover { background: #f1e7d4; text-decoration: none; }
.vs-sec { padding: 56px 22px; scroll-margin-top: 110px; }
.vs-cream { background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); }
.vs-dark { background: var(--night); color: #e8e8ed; }
.vs-dark .vs-h { color: #fff; }
.vs-dark .vs-more { color: var(--amber-soft); }
.vs-wrap { max-width: 980px; margin: 0 auto; }
.vs-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.vs-h { margin: 0 0 12px; font-size: 30px; letter-spacing: 0.06em; color: #231a10; }
.vs-h3 { margin: 36px 0 10px; font-size: 24px; color: #231a10; }
.vs-lede { margin: 0 0 22px; font-size: 21px; line-height: 1.6; color: #3a3128; }
.vs-sec p { line-height: 1.75; }
.vs-services { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-service { padding: 24px 24px 20px; border-top: 3px solid var(--gold); background: var(--ivory); }
.vs-service-lang { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.vs-service h3 { margin: 4px 0 2px; font-size: 26px; color: #231a10; }
.vs-service-time { margin: 0; font-family: var(--serif); font-size: 24px; color: #8e1a18; }
.vs-service-who { margin: 8px 0 0; color: var(--text-2); }
.vs-service-flow { margin: 10px 0 12px; font-size: 17px; color: #3a3128; }
.vs-more { font-weight: 600; }
.vs-all { margin-top: 22px; }
.vs-all summary { cursor: pointer; color: var(--link); }
.vs-all ul, .vs-list { list-style: none; margin: 10px 0 0; padding: 0; }
.vs-all li, .vs-list li { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vs-list-time, .vs-all li span:first-child { color: #8e1a18; white-space: nowrap; }
.vs-addr { margin: 0 0 14px; font-family: var(--serif); font-size: 24px; line-height: 1.5; color: #231a10; }
.vs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vs-photo img { display: block; width: 100%; border-radius: 6px; }
.vs-video { margin: 0; }
.vs-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vs-next a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.vs-next a:hover { border-color: var(--gold); text-decoration: none; }
.vs-next strong { font-family: var(--serif); font-size: 21px; color: #231a10; }
.vs-next span { font-size: 16px; color: var(--text-2); }
.vs-contacts { list-style: none; margin: 0; padding: 0; }
.vs-contacts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.vs-contacts strong { display: inline-block; min-width: 8em; margin-right: 10px; font-family: var(--serif); }
@media (max-width: 734px) {
  .vs-jump { top: 60px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .vs-jump a { white-space: nowrap; }
  .vs-sec { padding: 34px 16px; }
  .vs-two, .vs-services { grid-template-columns: 1fr; gap: 20px; }
  .vs-next { grid-template-columns: 1fr 1fr; }
  .vs-h { font-size: 26px; }
  .vs-lede { font-size: 19px; }
  .vs-all li, .vs-list li { grid-template-columns: 1fr; gap: 0; }
  .vs-contacts strong { display: block; }
}

/* 認識我們 = 關於我們 + 教會成長: the shared sub-nav, 我們的故事 on /about/, chapters and the family tree on /history/ */
.ab-subnav a[aria-current="page"] { background: #f1e7d4; font-weight: 600; }
@media (min-width: 735px) {
  .hi-timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hi-timeline::before { left: 8%; right: 8%; }
  .hi-timeline-sm::before { top: 26px; }
}
.ab-story { background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); text-align: center; }
.ab-story .ab-lead { margin-bottom: 34px; }
.hi-timeline-sm .hi-year { min-width: 66px; height: 52px; font-size: 21px; }
.ab-story-more { margin: 34px 0 0; }
.hi-toc { display: grid; gap: 2px; margin: 0 0 36px; padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--ivory); }
.hi-toc a { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: #231a10; font-family: var(--serif); font-size: 19px; line-height: 1.4; }
.hi-toc a:hover { color: #7a4e14; text-decoration: none; }
.hi-toc .hi-num { width: 30px; height: 30px; font-size: 16px; }
.hi-story h2 { scroll-margin-top: 130px; }
.hi-tree { padding: 30px 0 0; background: var(--ivory); border-top: 1px solid #e7dcc7; border-bottom: 1px solid #e7dcc7; }
.hi-tree-h { margin: 0 0 8px; font-family: var(--serif); font-size: 28px; color: #231a10; }
.hi-tree .sg-section { padding-top: 10px; background: transparent; }
.hi-story-2 { padding-top: 10px; }
@media (max-width: 734px) {
  .ab-story { text-align: left; }
  .hi-timeline-sm { max-width: 420px; }
  .hi-tree-h { font-size: 24px; }
  .hi-toc a { font-size: 18px; }
}
@media (max-width: 734px) {
  .ab-subnav { top: 60px; justify-content: flex-start; gap: 2px; padding: 8px 10px; overflow-x: auto; }
  .ab-subnav a { flex: none; padding: 6px 12px; font-size: 16px; white-space: nowrap; }
}
.hi-tree > .ab-wrap { padding: 0 22px; }

/* ---------- 網站搜尋 /search/ ---------- */
.nav-search { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.9); }
.nav-search:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.more-search { display: flex; gap: 8px; margin: 0 0 16px; }
.more-search input, .sr-form input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.more-search .pill, .sr-form .pill { cursor: pointer; }
.sr-hero { padding-bottom: 32px; }
.sr-form { display: flex; gap: 10px; max-width: 620px; margin: 18px auto 0; }
.sr-sec { padding-top: 24px; min-height: 50vh; }
.sr-wrap { max-width: 760px; }
.sr-status { margin: 0 0 8px; color: var(--text-2); }
.sr-results { list-style: none; margin: 0; padding: 0; }
.sr-results li { border-bottom: 1px solid var(--line); }
.sr-results a { display: flex; flex-direction: column; gap: 4px; padding: 16px 4px; color: var(--text); }
.sr-results a:hover { text-decoration: none; background: var(--ivory); }
.sr-title { font-family: var(--serif); font-size: 21px; font-weight: 700; color: #231a10; }
.sr-where { font-weight: 400; color: var(--amber); }
.sr-snip { font-size: 17px; line-height: 1.65; color: #3a3128; }
.sr-snip mark { background: #f7e3b5; color: inherit; padding: 0 1px; border-radius: 2px; }
.sr-url { font-size: 15px; color: var(--text-2); }
.sr-start-h { margin: 18px 0 10px; font-weight: 600; color: var(--text-2); }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chips a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 980px; color: var(--text); }
.sr-chips a:hover { border-color: var(--gold); text-decoration: none; }
@media (max-width: 734px) {
  .nav-search { width: 36px; height: 36px; }
  .sr-form { margin-top: 12px; }
}
.sr-tip a { padding: 12px 14px; margin: 6px 0; border-radius: 12px; background: var(--ivory); border: 1px solid #ecdfc6; }
.sr-kind { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 980px; background: var(--navy); color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; vertical-align: 3px; }
/* ECC › 匯出 PDF */
.ecc-export { margin: 6px 0 14px; }
.ecc-export > summary { display: inline-block; cursor: pointer; padding: 6px 16px; border: 1px solid var(--line); border-radius: 980px; font-size: 16px; }
.ecc-export[open] > summary { background: var(--ivory); }
.ecc-export-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--ivory); }
.ecc-export-body select { font: inherit; font-size: 16px; margin-left: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ecc-export-body .pill { cursor: pointer; }
.ecc-export-body p { flex-basis: 100%; margin: 0; }

/* 財務 /portal/finance/: the three numbers at the top */
.fn-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.fn-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 12px; background: var(--ivory); color: var(--text); }
.fn-card:hover { text-decoration: none; border-color: var(--gold); }
.fn-k { font-size: 16px; color: var(--text-2); }
.fn-card b { font-family: var(--serif); font-size: 30px; color: #231a10; font-variant-numeric: tabular-nums; }
.fn-card small { font-size: 15px; color: var(--text-2); }
.fn-card small.is-late { color: #a61e4d; font-weight: 600; }
@media (max-width: 734px) {
  .fn-sum { grid-template-columns: 1fr; gap: 8px; }
  .fn-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; }
  .fn-k { flex-basis: 100%; }
  .fn-card b { font-size: 24px; }
}
.rm-head:has(> h2.sr-only) { justify-content: flex-end; }

/* 報修 /portal/repairs/: the building question; long location names never push the form past a phone's width */
.ecc-form { grid-template-columns: minmax(0, 1fr); }
.ecc-form select, .ecc-form input, .ecc-form textarea { min-width: 0; max-width: 100%; }
.ecc-form .am-row > label { min-width: 0; }
.ecc-bld { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.ecc-bld legend { margin-bottom: 8px; font-weight: 600; }
.ecc-bld label { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; }
.ecc-bld label:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ecc-bldtag { padding: 0 8px; border-radius: 980px; font-size: 15px; background: #eef1f6; color: var(--primary); }
.ecc-bldtag.is-ecc { background: #f4ecdc; color: #7a4e14; }

/* 主日聚會 /this-week/: the "under development" notice and the two services */
.sw-sec { padding: 32px 22px 8px; }
.sw-wrap { max-width: 980px; margin: 0 auto; }
.sw-dev { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid var(--gold); border-radius: 8px; background: var(--ivory); color: #3a3128; }
.sw-dev b { margin-right: 6px; color: #7a4e14; }
.sw-services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sw-service { padding: 20px 22px; border-top: 3px solid var(--gold); background: var(--ivory); }
.sw-lang { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; color: var(--gold); }
.sw-service h2 { margin: 4px 0 2px; font-size: 26px; color: #231a10; }
.sw-time { margin: 0 0 10px; font-family: var(--serif); font-size: 22px; color: #8e1a18; }
.sw-more { margin: 16px 0 0; }
@media (max-width: 734px) {
  .sw-sec { padding: 22px 16px 4px; }
  .sw-services { grid-template-columns: 1fr; gap: 12px; }
}
/* 午餐管理 › 代訂 */
.la-phone { margin: 10px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--ivory); }
.la-phone h3 { margin: 0; }
.la-phone-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.la-phone-dishes input { width: 100%; }
.ce-newtype { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; padding: 12px; border-radius: 12px; background: var(--ivory); }

/* 直播: a play button in place of the YouTube player until someone presses it */
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit;
  background: radial-gradient(120% 90% at 50% 40%, #4a3524 0%, #2f2116 70%, #24190f 100%); }
.yt-play { width: 76px; height: 54px; border-radius: 14px; background: #e62117; position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { background: #ff0000; }
.yt-label { font-size: 18px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
/* 報銷與請購: which kind */
.rb-kind { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.rb-kind legend { margin-bottom: 6px; font-weight: 600; }
.rb-kind label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; }
.rb-kind label:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.rb-kind input { margin-top: 5px; }
.rb-kind small { display: block; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.rb-kind label:last-child { opacity: 0.85; }
.rb-kindtag { display: inline-block; padding: 0 8px; border-radius: 980px; font-size: 15px; font-weight: 600; background: #eef1f6; color: var(--primary); }
.rb-kindtag.is-card { background: #fdf0e3; color: #8a4b0f; }
.rb-transfer { margin-top: 6px; }
.rb-transfer summary { cursor: pointer; color: var(--link); font-size: 16px; }
.rb-form { grid-template-columns: minmax(0, 1fr); }
.rb-form select, .rb-form input, .rb-form textarea { min-width: 0; max-width: 100%; }
.rb-form .am-row > label, .rb-kind label > span { min-width: 0; }

/* 服事表 /portal/serving/ */
.sv-bar { display: grid; gap: 10px; margin-bottom: 14px; }
.sv-bar input { font: inherit; font-size: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sv-person { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--ivory); border-left: 4px solid var(--gold); }
.sv-person p { margin: 0 0 6px; }
.sv-person ul { margin: 0; padding-left: 1.2em; }
.sv-days { list-style: none; margin: 0; padding: 0; }
.sv-day { padding: 12px 0; border-top: 1px solid var(--line); }
.sv-day.is-today h3 { color: #8e1a18; }
.sv-day h3 { margin: 0 0 6px; font-size: 20px; }
.sv-day dl { margin: 0; display: grid; gap: 4px; }
.sv-row { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.sv-row dt { color: var(--text-2); font-size: 16px; }
.sv-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.sv-name { font: inherit; padding: 2px 10px; border: 1px solid var(--line); border-radius: 980px; background: #fff; cursor: pointer; }
.sv-name.is-on { background: #f7e3b5; border-color: var(--gold); font-weight: 600; }
.ro-music { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--ivory); }
@media (max-width: 734px) { .sv-row { grid-template-columns: 1fr; gap: 2px; } }
.fn-sum-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fn-sum-1 { grid-template-columns: minmax(0, 420px); }
@media (max-width: 734px) { .fn-sum-2, .fn-sum-1 { grid-template-columns: 1fr; } }
/* 家人審核 › 事工權限 */
/* 家人申請 › 職分 (member-apps.js): one panel, by area, and what they add up to */
.ma-sendpw { flex-basis: 100%; margin: 6px 0; }
.ma-sendpw summary { cursor: pointer; font-weight: 600; }
.ma-sendpw input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; min-width: 0; }
.ma-dup-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.ma-positions { flex-basis: 100%; margin: 6px 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; gap: 10px; }
.ma-positions legend { padding: 0 6px; font-weight: 700; }
.ma-picked { font-weight: 400; font-size: 15px; color: #8a5a0b; margin-left: 6px; }
.ma-area h4 { margin: 0 0 4px; font-size: 14px; letter-spacing: 0.06em; color: #8a6430; }
.ma-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0; }
.ma-row > span, .ma-row > label { min-width: 6em; }
.ma-row select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.ma-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.ma-pos { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; cursor: pointer; padding: 4px 0; }
.ma-pos input { margin-top: 5px; }
.ma-pos small { display: block; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.ma-sens { padding: 0 6px; border-radius: 999px; background: #fbe9e7; color: #8a2a1d; font-size: 12px; font-weight: 400; }
.ma-sum { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
.ma-sum:empty { display: none; }
.ma-feat { padding: 2px 8px; border-radius: 999px; background: #f4eee3; color: #5b4630; font-size: 13px; }
.ma-feat.is-sens { background: #fbe9e7; color: #8a2a1d; }

/* 第一次來 — parking and lunch */
.vs-facts { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.vs-facts li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .7rem .9rem; background: var(--bg); border-radius: 10px; }
.vs-facts strong { color: var(--amber); }

/* 首頁教會公告: the band under the top image is all announcements — cards in two columns, 週報 one link in the header */
.tw.tw-ann-only { display: block; padding: 34px max(22px, calc((100% - 1180px) / 2)) 30px; }
.tw-ann-only .an-board { padding: 0; border: 0; }
.tw-ann-only .an-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 12px; }
.tw-ann-only .anc { padding: 14px 16px; border: 1px solid rgba(184, 106, 18, 0.22); border-radius: 16px; background: rgba(255, 255, 255, 0.65); }
.tw-ann-only .anc:last-child { border-bottom: 1px solid rgba(184, 106, 18, 0.22); }
.tw-ann-only .anc:hover { background: #fff; box-shadow: 0 4px 14px rgba(35, 26, 16, 0.08); }
.tw-ann-only .anc-title a::after { border-radius: 16px; }
.tw-ann-only .anc-sum { -webkit-line-clamp: 2; }
.an-board-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
@media (max-width: 734px) {
  .tw.tw-ann-only { padding: 26px 14px 22px; }
  .tw-ann-only .an-board-head { flex-wrap: wrap; gap: 6px; }
}


/* 本週經文 on the home page's photo: Chinese at the top of the left half, English at the top of the right — straight
   on the picture, no box or glow behind the words */
.ms-verse { display: flex; flex-direction: column; gap: 6px; margin-bottom: auto; padding-bottom: 24px; max-width: 520px; color: #fff; }
.ms-verse[hidden] { display: none; }
.ms-verse-text { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.55; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.ms-verse-ref { font-size: 17px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
@media (max-width: 734px) { .ms-verse-text { font-size: 19px; } }
/* 本週經文 on the 中文事工 / 英文事工 pages */
.mp-verse { margin: 0 0 36px; padding: 28px 24px 24px; text-align: center; border-radius: 18px; background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); }
.mp-verse .tag { display: inline-block; margin-bottom: 14px; }
.mp-verse .verse { margin: 0 auto; max-width: 560px; }
.mp-verse .verse p { font-size: clamp(21px, 2vw, 27px); line-height: 1.6; }

/* 家人專區 › 我負責: small category headings, for administrators (they see everything) */
.ph-cat { grid-column: 1 / -1; margin: 14px 0 -2px; font-size: 15px; font-weight: 600; letter-spacing: 0.12em; color: #8a6430; }
.ph-cat:first-child { margin-top: 0; }
.ph-cat[hidden] { display: none; }

/* ---------- 受洗管理 (on /baptism/) ---------- */
.bp-card-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.bp-stage { margin-left: auto; padding: 2px 10px; border-radius: 980px; font-size: 14px; font-weight: 600; background: var(--gray); color: var(--text-2); }
.bp-stage.bp-applied { background: #fdf0dc; color: #8a5a12; }
.bp-stage.bp-scheduled { background: #e3efff; color: #0b4a9c; }
.bp-stage.bp-baptized { background: #e2f4e6; color: #1d6b34; }
.bp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--gray); font-size: 16px; }
.bp-dl dt { color: var(--text-2); }
.bp-dl dd { margin: 0; }
.bp-testimony { white-space: pre-wrap; }
.bp-log { white-space: pre-wrap; font: inherit; font-size: 15px; color: var(--text-2); margin: 4px 0 0; }

/* 受洗證書: only the text, printed onto the church's pre-bordered certificate paper (Letter landscape; the margins
   of the old Word certificate). On screen it is never shown. */
.bc-sheet { display: none; }
@media print {
  @page { size: letter landscape; margin: 0; }
  body.bc-printing > :not(.bc-sheet) { display: none !important; }
  body.bc-printing { padding: 0 !important; background: #fff !important; zoom: 1 !important; }
  body.bc-printing .bc-sheet { display: block; }
}
/* the Word certificate's page: Letter landscape, 1in at the sides; lines from the top, spaced as Word spaces them.
   The web look-alikes come first (most computers have neither Old English Text MT nor French Script MT), sized to the
   width the Word fonts take, so every computer prints the same; measured line by line against a 2026 Word certificate. */
.bc-page { box-sizing: border-box; width: 11in; height: 8.5in; padding: 1.38in 1in 1in; overflow: hidden; text-align: center; color: #000; font-family: "Times New Roman", Times, serif; line-height: 1.15; }
.bc-page p { margin: 0; }
.bc-sheet .bc-page { break-after: page; }
.bc-sheet .bc-page:last-child { break-after: auto; }
.bc-church, .bc-title, .bc-on { font-family: "UnifrakturMaguntia", "Old English Text MT", serif; }
.bc-script { font-family: "Pinyon Script", "French Script MT", cursive; font-size: 16.5pt; line-height: 1.4; }
.bc-church { font-size: 28pt; font-weight: 700; letter-spacing: -1pt; margin-bottom: 4pt !important; }
.bc-place { font-size: 20pt; }
.bc-certifies { font-size: 18pt; margin: 3pt 0 !important; }
.bc-name { font-family: Tahoma, "Microsoft YaHei", "PingFang SC", "Heiti SC", sans-serif; font-size: 24pt; margin: 3pt 0 5pt !important; }
.bc-fact { font-family: Tahoma, "Microsoft YaHei", "PingFang SC", "Heiti SC", sans-serif; font-size: 14pt; line-height: 1.3; margin-bottom: 6pt !important; }
.bc-fact span { font-size: 16pt; }
.bc-fact sup { font-size: 0.65em; line-height: 0; }
.bc-fact-last { margin-bottom: 5pt !important; }
.bc-triune { font-size: 12pt; font-weight: 700; margin: 0 0 3pt !important; }
.bc-title { font-size: 28pt; line-height: 1.22; }
.bc-on { font-size: 16pt; margin-top: 6pt !important; }
.bc-sign { margin-top: 18pt !important; }
.bc-sign span { display: inline-block; width: 4.5in; border-bottom: 2px solid #000; }
/* the 樣本 an applicant checks: the same sheet, small, on screen */
.bc-sample { position: relative; width: 100%; max-width: 660px; aspect-ratio: 11 / 8.5; margin: 16px auto; overflow: hidden; border: 1px solid var(--line); background: #fff; color: #000; text-align: center; }
.bc-sample .bc-page { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.bc-sample::after { content: "樣本 SAMPLE"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-22deg); font-size: clamp(32px, 9vw, 64px); font-weight: 700; color: rgba(150, 40, 40, .16); white-space: nowrap; pointer-events: none; }
/* 受洗連結 (受洗管理) */
.bp-links-box { margin: 0 0 20px; }
.bp-link-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; margin: 10px 0 14px; }
.bp-link-form label { display: grid; gap: 4px; }
.bp-link-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 0; }
.bp-batch { border-top: 1px solid var(--line); padding: 10px 0; }
.bp-batch p { margin: 0 0 6px; }
.bp-batch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-old p { margin: 0 0 6px; }

/* 報名受洗 (/baptism/) */
.bp-steps { list-style: none; counter-reset: bp; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 28px; padding: 0; }
.bp-steps li { counter-increment: bp; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); }
.bp-steps li::before { content: counter(bp); font-family: var(--serif); font-size: 22px; color: var(--amber); }
.bp-steps span { font-size: 16px; color: var(--text-2); }
.bp-mine { margin-bottom: 24px; }
.bp-mine-list { margin: 0; padding-left: 20px; }
.bp-qs { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 14px; }
.bp-qs label > span { display: block; font-weight: 600; }
.bp-q-other { display: block; font-weight: 400; font-size: 15px; color: var(--text-2); }
.bp-qa { margin: 0 0 14px; padding: 0 0 0 20px; }
.bp-qa li { margin-bottom: 10px; }
.bp-qa p { margin: 2px 0 0; white-space: pre-wrap; }
.bp-card { display: flex; align-items: center; gap: 10px; }
.bp-card-main { flex: 1; min-width: 0; display: grid; gap: 4px; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bp-card-print { flex: none; }
.bp-mine-list > li { margin-bottom: 10px; }
.bp-mine-detail { margin-top: 6px; }

/* 家人專區 › 我負責: items your account can't open — greyed out, not clickable */
.ph-tile.is-locked { opacity: 0.45; filter: grayscale(1); cursor: not-allowed; pointer-events: none; box-shadow: none; }
.ph-tile.is-locked .ph-tile-name::after { content: " 🔒"; font-size: 0.8em; }

/* 💬 意見 — the feedback button on every page (signed-in members) and its box */
.fb-btn { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 999px; background: #14213d; color: #fff; font: inherit; font-size: 16px; box-shadow: 0 6px 18px rgba(20, 33, 61, 0.3); cursor: pointer; }
.fb-btn[hidden] { display: none; }
.fb-btn:hover { background: #1f3260; }
@media (max-width: 734px) { .fb-btn { padding: 10px 13px; } .fb-btn span { display: none; } }
@media print { .fb-btn { display: none !important; } }
.fb-dlg { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 20px 20px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.fb-dlg::backdrop { background: rgba(10, 16, 32, 0.45); }
.fb-dlg h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; }
.fb-page { margin: 0 0 12px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 16px; }
.fb-dlg textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
/* 意見匯總 */
.fb-exports { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-card { display: grid; gap: 6px; }
.fb-card.fb-done { opacity: 0.7; }
.fb-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fb-kind { padding: 1px 9px; border-radius: 980px; font-size: 14px; font-weight: 600; background: var(--gray); }
.fb-kind-problem { background: #fde7e4; color: #9c2b1e; }
.fb-kind-idea { background: #e3efff; color: #0b4a9c; }
.fb-text { margin: 0; white-space: pre-wrap; font-size: 17px; }
.fb-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-tools input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.fb-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 36px 0 8px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 100%); }
.fb-ask[hidden] { display: none; }
.fb-ask p { margin: 0; flex: 1 1 260px; }
.fb-pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.fb-page-chip { font: inherit; font-size: 14px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 980px; background: #fff; cursor: pointer; }
.fb-page-chip b { margin-left: 4px; color: #8a5a12; }
.fb-quote { margin: 0 0 10px; padding: 6px 12px; border-left: 3px solid #b8914a; background: #fbf6ea; font-size: 15px; color: #5a3520; }
.fb-quote[hidden] { display: none; }
.fb-kind-content { background: #fff1d6; color: #8a5a12; }
.fb-kind-design { background: #efe7fb; color: #5b3a9c; }

/* 行事曆編輯: the 活動表 — four tables, one per ministry (its colour), edited in place; fits without sideways scrolling */
.ct-groups { display: grid; gap: 16px; margin-bottom: 26px; }
.ct-group { border-left: 4px solid var(--m); padding-left: 10px; }
.ct-group header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ct-group h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; }
.ct-group h3 .sw { width: 12px; height: 12px; border-radius: 3px; background: var(--m); }
.ct-table { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; }
.ct-table th:nth-child(1) { width: 34%; } .ct-table th:nth-child(2) { width: 20%; } .ct-table th:nth-child(4) { width: 40px; }
.ct-table th { text-align: left; font-weight: 600; font-size: 13px; color: var(--text-2); padding: 2px 4px; border-bottom: 1px solid var(--line); }
.ct-table td { padding: 3px 4px; border-bottom: 1px solid #eee7da; vertical-align: top; }
.ct-table input, .ct-table select { font: inherit; font-size: 15px; padding: 3px 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; min-width: 0; max-width: 100%; }
.ct-table input:hover, .ct-table select:hover { border-color: var(--line); }
.ct-table input:focus, .ct-table select:focus { border-color: var(--m); background: #fff; outline: none; }
.ct-table td:first-child input, .ct-table td:nth-child(2) input { width: 100%; box-sizing: border-box; }
.ct-table td:first-child .ct-en { font-size: 13px; color: var(--text-2); }
.ct-freq { white-space: normal; }
.ct-freq select { padding-right: 2px; }
.ct-freq [hidden] { display: none !important; }
.ct-time { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ct-time input { width: 8.2em; font-size: 14px; }
.ct-act { text-align: right; }
.ct-saved { display: block; font-size: 12px; line-height: 1.2; color: #1d6b34; }
.ct-del { width: 30px; height: 30px; font-size: 14px; }
.ct-empty { margin: 4px 0 0; }
.ce-month .cal-cell { cursor: pointer; }
.ce-daylist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ce-daylist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: var(--gray); border-left: 4px solid var(--m, #999); }
.ce-dtime { display: inline-flex; align-items: center; gap: 4px; }
.ce-dtime input { font: inherit; font-size: 15px; width: 8.6em; }
.ce-add-h { margin: 8px 0 6px; font-size: 17px; }
.ce-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ce-add select { flex: 1 1 220px; font: inherit; font-size: 16px; padding: 6px 8px; }
.ce-add input { font: inherit; font-size: 16px; width: 8.6em; }
@media (max-width: 734px) {
  .ct-table thead { display: none; }
  .ct-table th, .ct-table td { width: auto; }
  .ct-table, .ct-table tbody, .ct-table tr, .ct-table td { display: block; width: 100%; box-sizing: border-box; }
  .ct-table { table-layout: auto; }
  .ct-table tr { padding: 6px 0; border-bottom: 1px solid #eee7da; position: relative; }
  .ct-table td { border: 0; padding: 2px 0; }
  .ct-freq { white-space: normal; }
  .ct-act { position: absolute; top: 6px; right: 0; width: auto !important; }
  .ct-table td:first-child { padding-right: 44px; }
}
.fb-ask.fb-ask-top { margin: 0 0 20px; padding: 10px 14px; border-radius: 12px; font-size: 16px; }
/* "connect your Microsoft account first" — the account approvals and the calendar editor, before anything is pressed */
.ms-connect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: #fff4e0; border: 1px solid #f0d29a; }
.ms-connect[hidden] { display: none; }
.ms-connect p { margin: 0; flex: 1 1 280px; }
.needs-ms [data-ma-approve], .needs-ms .ct-groups, .needs-ms .ce-month { opacity: 0.45; pointer-events: none; }
.ct-freq input[type="date"] { font-size: 14px; width: 10.5em; }
.ms-ok { margin: 0 0 10px; font-size: 14px; color: #1d6b34; }
.ms-ok[hidden] { display: none; }
.ct-saved.is-bad { color: #b3261e; font-weight: 600; }
.ct-sync-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.ct-sync-row .ct-saved { display: inline; }
.ct-sync[hidden] { display: none; }
.ct-sync:not(.is-done) { background: var(--m); border-color: var(--m); color: #fff; }
.ct-sync.is-done { opacity: 1; color: #1d6b34; border-color: #b8dcc2; background: #eef8f0; cursor: default; }
.ce-views { margin: 4px 0 8px; }
.ce-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; font-size: 14px; }
.ce-leg { display: inline-flex; align-items: center; gap: 6px; }
.ce-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- 禱告牆 (/prayer/): a quiet place at night — deep sky, faint stars and light, candle cards ---------- */
.pw { position: relative; isolation: isolate; overflow: hidden; color: #f5ecd8; padding: 0 0 56px;
  background: radial-gradient(120% 60% at 50% 105%, rgba(243, 179, 92, 0.38) 0%, rgba(243, 179, 92, 0.08) 45%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #070c1d 0%, #0d1631 38%, #1a2140 70%, #2a2238 100%); }
.pw-head { max-width: 760px; margin: 0 auto; padding: 72px 22px 28px; text-align: center; }
.pw-h1 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 5vw, 50px); font-weight: 700; letter-spacing: 0.08em; color: #fff7e6; text-shadow: 0 0 24px rgba(243, 199, 126, 0.25); }
.pw-verse { margin: 18px auto 26px; max-width: 560px; font-family: var(--serif); font-size: clamp(18px, 2vw, 21px); line-height: 1.8; color: #e8dcc2; }
.pw-verse p { margin: 0; }
.pw-verse cite { display: block; margin-top: 4px; font-style: normal; font-size: 15px; color: #c9b48d; }
.pw-pour { font: inherit; font-size: 19px; font-weight: 600; padding: 12px 30px; border: 0; border-radius: 999px; cursor: pointer; color: #2a1a06;
  background: linear-gradient(180deg, #ffe2a8, #f3b75c); box-shadow: 0 0 0 1px rgba(255, 226, 168, 0.4), 0 8px 30px rgba(243, 183, 92, 0.35); }
.pw-pour:hover { filter: brightness(1.05); }
.pw-body { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.pw-tabs { display: flex; justify-content: center; gap: 8px; margin: 6px 0 18px; }
.pw-tabs button { font: inherit; font-size: 16px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(243, 199, 126, 0.35); background: rgba(255, 255, 255, 0.04); color: #e8dcc2; cursor: pointer; }
.pw-tabs button[aria-pressed="true"] { background: rgba(243, 199, 126, 0.18); border-color: #f3c77e; color: #fff7e6; }
.pw-status { text-align: center; color: #c9b48d; min-height: 1em; }
.pw-wall { column-count: 3; column-gap: 16px; }
@media (max-width: 1000px) { .pw-wall { column-count: 2; } }
@media (max-width: 640px) { .pw-wall { column-count: 1; } .pw-head { padding-top: 48px; } }
.pw-foot { text-align: center; margin-top: 18px; }
.pw-foot a { color: #f3c77e; }

/* a candle card: warm paper in the dark; praise is green, an answered prayer gold */
.pw-card { break-inside: avoid; margin: 0 0 16px; padding: 16px 18px 12px; border-radius: 14px; color: #2b2118;
  background: linear-gradient(180deg, #fffaf0, #f8eedb); box-shadow: 0 0 0 1px rgba(255, 236, 200, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(243, 183, 92, 0.08); }
.pw-card.pw-k-praise { background: linear-gradient(180deg, #f7fbf2, #e6f1db); box-shadow: 0 0 0 1px #c9dfb8, 0 10px 30px rgba(0, 0, 0, 0.35); }
.pw-card.is-answered, .pw-card.pw-k-answered { background: linear-gradient(180deg, #fff8e1, #f6e2ae); box-shadow: 0 0 0 1px #e8c56a, 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 46px rgba(243, 199, 126, 0.3); }
.pw-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 6px; }
.pw-meta { font-size: 13px; color: #8a7560; margin-left: auto; }
.pw-kind { font-size: 14px; font-weight: 600; color: #6b5a2e; }
.pw-title { margin: 0 0 4px; font-family: var(--serif); font-size: 19px; }
.pw-text { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.75; white-space: pre-wrap; }
.pw-who { margin: 8px 0 0; font-size: 14px; color: #8a7560; text-align: right; }
.pw-praise { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(232, 197, 106, 0.25); font-size: 16px; }
/* the candles: one small flame for each person praying (up to 12) */
.pw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e3d3b2; }
.pw-pray, .pw-open { font: inherit; font-size: 15px; padding: 5px 12px; border-radius: 999px; border: 1px solid #e3cfa5; background: #fff; color: #5a4220; cursor: pointer; }
.pw-pray[aria-pressed="true"] { background: #f3b75c; border-color: #f3b75c; color: #2a1a06; font-weight: 600; }
.pw-count { font-size: 13px; color: #8a7560; }
/* the thread: words of encouragement, verse cards, the asker's 近況 */
.pw-thread { margin-top: 10px; }
.pw-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pw-r { position: relative; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 0 #ecdcbc; font-size: 15px; }
.pw-r p { margin: 0; white-space: pre-wrap; }
.pw-r-update { background: #fff4d6; border-radius: 14px 14px 4px 14px; box-shadow: 0 0 0 1px #ecc76c; }
.pw-r-tag { display: inline-block; margin-bottom: 2px; padding: 0 8px; border-radius: 999px; background: #f3b75c; color: #2a1a06; font-size: 12px; font-weight: 700; }
.pw-r-verse blockquote { margin: 0; padding: 6px 10px; border-left: 3px solid #c9a46a; font-family: var(--serif); background: #fdf6e7; }
.pw-r-verse cite { display: block; font-style: normal; font-size: 13px; color: #8a6a3a; }
.pw-r-by { display: block; margin-top: 3px; font-size: 12px; color: #9a8466; text-align: right; }
.pw-r-empty { color: #9a8466; font-size: 14px; }
.pw-del { border: 0; background: none; color: #b3261e; cursor: pointer; font-size: 14px; }
.pw-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.pw-quick button, .pw-verses button { font: inherit; font-size: 14px; padding: 4px 10px; border-radius: 999px; border: 1px solid #e3cfa5; background: #fffdf8; color: #5a4220; cursor: pointer; }
.pw-verses { display: grid; gap: 6px; margin: 4px 0 8px; }
.pw-verses button { border-radius: 10px; text-align: left; }
.pw-write { display: flex; gap: 6px; }
.pw-write input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid #e3cfa5; border-radius: 999px; }
.pw-signin-note { font-size: 14px; color: #6b5a3a; }

/* 向主傾訴 */
.pw-dlg { width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 0; border-radius: 18px; padding: 0; color: #2b2118; background: linear-gradient(180deg, #fffaf0, #f6ead2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.pw-dlg::backdrop { background: rgba(5, 9, 22, 0.72); }
.pw-form { padding: 18px 20px 20px; display: grid; gap: 12px; }
.pw-dlg-head { display: flex; align-items: center; justify-content: space-between; }
.pw-dlg-head h2 { margin: 0; font-family: var(--serif); font-size: 24px; }
.pw-kinds, .pw-for { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pw-kinds label, .pw-for label { position: relative; }
.pw-kinds input, .pw-for input, .pw-vis input { position: absolute; opacity: 0; pointer-events: none; }
.pw-kinds label > span, .pw-for label > span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid #e3cfa5; background: #fff; cursor: pointer; font-size: 15px; }
.pw-kinds input:checked + span, .pw-for input:checked + span { background: #f3b75c; border-color: #f3b75c; color: #2a1a06; font-weight: 600; }
.pw-kinds input:focus-visible + span, .pw-for input:focus-visible + span, .pw-vis input:focus-visible + span { outline: 2px solid #b8914a; outline-offset: 2px; }
.pw-label { font-size: 14px; color: #8a7560; margin-right: 4px; }
.pw-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--serif); font-size: 18px; line-height: 1.7; padding: 12px 14px; border: 1px solid #e3cfa5; border-radius: 12px; background: #fffdf8; resize: vertical; }
.pw-hint { margin: -6px 0 0; font-size: 13px; color: #8a7560; }
.pw-vis { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-vis legend { font-size: 14px; color: #8a7560; margin-bottom: 4px; }
.pw-vis label { position: relative; }
.pw-vis label > span { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; border: 1px solid #e3cfa5; background: #fff; cursor: pointer; }
.pw-vis small { color: #8a7560; font-size: 13px; }
.pw-vis input:checked + span { border-color: #f3b75c; box-shadow: 0 0 0 2px rgba(243, 183, 92, 0.45); background: #fff8e8; }
.pw-pastors { display: grid; gap: 4px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px dashed #e3cfa5; }
.pw-pastors[hidden], .pw-dlg [hidden] { display: none !important; }
.pw-name { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 14px; }
.pw-name label:first-child { display: grid; gap: 2px; font-size: 14px; color: #8a7560; }
.pw-name input[name="name"] { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid #e3cfa5; border-radius: 8px; }
.pw-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pw-signin { text-align: center; display: grid; gap: 10px; justify-items: center; }
.pw-done { text-align: center; font-family: var(--serif); }
.pw-done-flame { font-size: 40px; margin: 0; }
/* the wall's quotes are its own (the site's quote style doesn't apply here) */
.pw .pw-verse { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; color: #e8dcc2; }
.pw .pw-verse::before, .pw-replies .pw-r-verse blockquote::before { display: none; content: none; }
.pw .pw-verse p { font-size: inherit; color: inherit; line-height: 1.8; }
.pw-replies .pw-r-verse blockquote { max-width: none; margin: 0; box-shadow: none; border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.6; }
.pw-replies .pw-r-verse blockquote p { font-size: 15px; line-height: 1.6; margin: 0; color: #3a2a18; }
.pw .pw-verse cite, .pw-replies .pw-r-verse cite { font-family: inherit; letter-spacing: 0; }
.pw .pw-verse cite { color: #c9b48d; font-size: 15px; }
.pw .pw-verse p { font-weight: 400; letter-spacing: 0.04em; margin: 0; }
/* 家人專區 › 代禱 */
.pr-wall-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.pr-cards { column-count: 2; column-gap: 16px; margin-top: 12px; }
@media (max-width: 760px) { .pr-cards { column-count: 1; } }
.pr-state { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip { padding: 2px 10px; border-radius: 999px; background: #efe6d2; color: #5a4220; font-size: 13px; }
.pr-chip.is-warn { background: #fde3c2; color: #8a4a0c; font-weight: 600; }
.pr-own { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pr-wording { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; color: #8a7560; }
.pr-wording textarea { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #e3cfa5; border-radius: 10px; }
.pw-vis legend, .pw-label { padding: 0; border: 0; background: none; }
.pw-vis label > span b, .pw-vis label > span small { display: block; }

/* ---------- 主日午餐 (/lunch/): warm and appetising — a lunch table after the service ---------- */
.lu-hero { position: relative; overflow: hidden; text-align: center; color: #fff8ec; padding: 56px 20px 46px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 214, 150, 0.35) 0%, rgba(255, 214, 150, 0) 60%),
    linear-gradient(160deg, #b5542a 0%, #c8702f 45%, #d99a3e 100%); }
.lu-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
  background-image: radial-gradient(circle at 10px 10px, #fff 2px, transparent 2.5px); background-size: 28px 28px; }
.lu-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.lu-hero-eyebrow { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.24em; color: #ffe4b8; }
.lu-hero-title { margin: 0; font-family: var(--serif); font-size: clamp(36px, 6vw, 58px); font-weight: 700; letter-spacing: 0.06em; text-shadow: 0 2px 18px rgba(90, 30, 0, 0.35); }
.lu-hero-sub { margin: 10px 0 0; font-size: 18px; color: #fff1dc; }
.lu-hero-dishes { margin: 14px 0 0; font-size: 30px; letter-spacing: 0.3em; filter: drop-shadow(0 3px 6px rgba(80, 30, 0, 0.3)); }
.tile-lunch-page { background: linear-gradient(180deg, #fff7ec 0%, #fffaf3 40%, #fff 100%); }
.tile-lunch-page .lu-meta span { background: #fff; border-color: #f0d9b8; color: #7a3d14; font-weight: 600; }
.tile-lunch-page .lu-note { background: #fff3e2; border: 1px solid #f3dcbc; border-radius: 14px; padding: 12px 16px; color: #6b4a2a; }

/* the dishes: big cards */
.lu-menu.lu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; background: none; border: 0; border-radius: 0; }
.lu-cards .lu-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 #f0dcc0, 0 10px 26px rgba(150, 80, 20, 0.12); transition: transform 0.2s, box-shadow 0.2s; }
.lu-cards .lu-card + .lu-card { border-top: 0; }
.lu-cards .lu-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #f0dcc0, 0 16px 32px rgba(150, 80, 20, 0.18); }
.lu-cards .lu-card.is-picked { box-shadow: 0 0 0 3px #e8902f, 0 16px 32px rgba(232, 144, 47, 0.3); }
.lu-photo { position: relative; aspect-ratio: 4 / 3; background: #f6e7d2; overflow: hidden; }
.lu-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.lu-card:hover .lu-photo img { transform: scale(1.04); }
/* no photo: a warm plate with the dish's icon, and steam */
.lu-photo-ph { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, hsl(var(--h) 90% 88%) 0%, hsl(var(--h) 75% 72%) 70%, hsl(var(--h) 60% 60%) 100%); }
.lu-plate { display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 56%, #f3ece2 57% 64%, #fff 65%);
  box-shadow: 0 10px 24px rgba(90, 40, 0, 0.25), inset 0 -4px 10px rgba(0, 0, 0, 0.05); }
.lu-plate span { font-size: clamp(48px, 7vw, 64px); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)); }
.lu-steam { position: absolute; top: 12%; width: 8px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  filter: blur(2px); opacity: 0; animation: lu-steam 3.2s ease-in-out infinite; }
.lu-steam:nth-of-type(1) { left: 42%; } .lu-steam:nth-of-type(2) { left: 50%; animation-delay: 1.1s; } .lu-steam:nth-of-type(3) { left: 58%; animation-delay: 2.1s; }
@keyframes lu-steam { 0% { transform: translateY(14px) scaleX(1); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-18px) scaleX(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lu-steam { display: none; } .lu-cards .lu-card, .lu-photo img { transition: none; } }
.lu-card-body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.lu-cards .lu-dish-name { font-family: var(--serif); font-size: 21px; font-weight: 700; color: #3a1f0b; }
.lu-cards .lu-dish-name small { font-family: var(--font); font-weight: 400; font-size: 14px; color: #8a6a4a; }
.lu-pop { justify-self: start; padding: 2px 10px; border-radius: 999px; background: #fff1de; color: #9a4c12; font-size: 13px; font-weight: 600; }
.lu-pop.is-fav { background: #ffe0c2; color: #b5421a; }
.lu-cards .lu-step { justify-self: end; margin-top: 2px; }
.lu-cards .lu-step button { width: 44px; height: 44px; border-color: #f0c99a; color: #c4561a; font-size: 26px; background: #fff; }
.lu-cards .lu-step button[data-inc]:not(:disabled) { background: #e8902f; border-color: #e8902f; color: #fff; }
.lu-cards .lu-step output { font-size: 22px; color: #3a1f0b; }
.lu-menu-view.lu-cards .lu-card { cursor: default; }
/* the order button: big, warm; on phones it stays at the bottom while choosing */
.tile-lunch-page .lu-actions .pill { background: linear-gradient(180deg, #ef9a3c, #d9702a); border: 0; color: #fff; font-size: 18px; padding: 12px 28px; box-shadow: 0 8px 20px rgba(217, 112, 42, 0.35); }
.tile-lunch-page .lu-count { font-weight: 700; color: #b5421a; font-size: 18px; }
@media (max-width: 734px) {
  .lu-menu.lu-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lu-cards .lu-dish-name { font-size: 18px; }
  .lu-card-body { padding: 10px 10px 12px; }
  .lu-cards .lu-step button { width: 40px; height: 40px; }
  .tile-lunch-page .lu-actions { position: sticky; bottom: 0; z-index: 5; margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 250, 243, 0.96); backdrop-filter: blur(8px); box-shadow: 0 -6px 18px rgba(150, 80, 20, 0.12); }
}
.tile-lunch-page .lu-meta > span { background: #fff; }
.tile-lunch-page .lu-meta span span { padding: 0; border: 0; background: none; border-radius: 0; font-size: inherit; }
.lu-cards .lu-card.is-picked { outline: 3px solid #e8902f; outline-offset: -3px; }
.lu-cards .lu-card.is-picked .lu-photo::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #e8902f; color: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 4px 10px rgba(150, 70, 10, 0.35); }
.lu-no { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #e8902f; color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.lu-ownlink { font-size: 14px; color: #6b4a2a; }
.lu-ownlink-row { display: flex; gap: 6px; margin-top: 4px; }
.lu-ownlink-row input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #f0d9b8; border-radius: 8px; background: #fffaf3; }
/* 管理 › 使用統計 */
.us-sec { margin-bottom: 28px; }
.us-big { display: inline-block; margin-left: 6px; padding: 0 12px; border-radius: 999px; background: #e2f4e6; color: #1d6b34; font-size: 0.8em; }
.us-online { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.us-online li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #f4faf5; border: 1px solid #cfe8d5; }
.us-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e4f; box-shadow: 0 0 0 3px rgba(46, 158, 79, 0.2); }
.us-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--text-2); }
.us-k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.us-k-m, .us-bar-m { background: #2f6fb5; } .us-k-v, .us-bar-v { background: #f0c27b; }
.us-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.us-day { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.us-bar { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.us-table-wrap { overflow-x: auto; }
.us-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.us-table th { text-align: left; font-size: 13px; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.us-table td { padding: 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.ph-privacy { font-size: 13px; }
/* ---------- 受洗 (/baptism/): plain and warm, like the rest of the site ---------- */
.bx-tabs { display: flex; justify-content: center; gap: 6px; margin: 22px auto 0; }
.bx-tabs button { padding: 8px 18px; font: inherit; color: #5a4630; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.bx-tabs button[aria-pressed="true"] { color: #2b2118; font-weight: 600; border-bottom-color: #a8742a; }
.bx-manage { padding: 22px 16px 56px; } .bx-manage .container { max-width: 980px; margin: 0 auto; padding: 0; }
.kreg.bj-form { background: none; border: 0; box-shadow: none; }
.bj-body { padding: 34px 0 60px; }
/* the way there: four steps on a line; signed in, they show where it stands */
.bj-path { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.bj-path::before { content: ""; position: absolute; left: 12%; right: 12%; top: 7px; border-top: 1px solid #d9c9ad; }
.bj-path li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; padding-top: 24px; }
.bj-path li::before { content: ""; position: absolute; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1px solid #b89a6a; }
.bj-path li.is-done::before { background: #a8742a; border-color: #a8742a; }
.bj-path li.is-now::before { background: #7a2a1e; border-color: #7a2a1e; box-shadow: 0 0 0 4px #f1e4d2; }
.bj-path strong { font-family: var(--serif); font-size: 18px; color: #2b2118; }
.bj-path span { font-size: 15px; line-height: 1.5; color: #6b5a48; }
@media (max-width: 640px) { .bj-path { grid-template-columns: minmax(0, 1fr); gap: 12px; } .bj-path::before { left: 7px; right: auto; top: 8px; bottom: 8px; border-top: 0; border-left: 1px solid #d9c9ad; } .bj-path li { justify-items: start; text-align: left; padding: 0 0 0 28px; } .bj-path li::before { left: 0; top: 4px; } }
.bj-joy { margin: 0 0 34px; text-align: center; }
.bj-joy blockquote { margin: 0; padding: 0; background: none; border: 0; }
.bj-joy blockquote p { margin: 0; font-family: var(--serif); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.8; color: #4a3a28; }
.bj-joy cite { display: block; margin-top: 4px; font-style: normal; font-size: 14px; color: #8a6420; }
.bp-mine { margin-bottom: 30px; padding: 20px 22px; background: #fbf7ef; border-top: 1px solid #e4d7bf; border-bottom: 1px solid #e4d7bf; }
.bj-form { padding: 0; background: none; }
.bj-form-title { margin: 0; font-family: var(--serif); font-size: 26px; color: #2b2118; }
.bj-form-lede { margin: 6px 0 8px; color: #6b5a48; line-height: 1.8; }
.bj-sec { margin: 26px 0 4px; padding-bottom: 6px; border-bottom: 1px solid #e4d7bf; font-size: 16px; font-weight: 600; letter-spacing: .12em; color: #8a6420; }
.bj-form .bp-qs li::marker { color: #8a6420; font-weight: 600; }
.bj-done { text-align: center; padding: 30px 22px; background: #fbf7ef; border-top: 1px solid #e4d7bf; border-bottom: 1px solid #e4d7bf; }
.bj-done h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 28px; }
.bj-done blockquote { margin: 16px auto 8px; max-width: 520px; padding: 0; background: none; border: 0; }
.bj-done blockquote p { font-family: var(--serif); font-size: 18px; color: #4a3a28; margin: 0; }
.bj-done blockquote cite { font-size: 14px; color: #8a6420; }
.bj-form select { font: inherit; font-size: 17px; height: 50px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; width: 100%; box-sizing: border-box; }

/* ---------- 我要 pages: big choices, how it goes, where it stands (報銷, 報修, 預約場地…) ---------- */
.wt-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 4px 0 14px; }
.wt-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(60, 40, 10, 0.05); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.wt-choice:hover, .wt-choice:focus-visible { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 12px 28px rgba(60, 40, 10, 0.1); }
.wt-choice > b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.wt-choice > small { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.wt-choice-quiet { background: #faf8f4; box-shadow: none; }
.wt-ico { font-size: 34px; line-height: 1; margin-bottom: 6px; }
.wt-flow { list-style: none; counter-reset: wt; display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 0 0 22px; padding: 0; color: var(--text-2); font-size: 14px; }
.wt-flow > li { counter-increment: wt; display: inline-flex; align-items: center; gap: 6px; }
.wt-flow > li::before { content: counter(wt); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f1ebe0; color: #8a6a3a; font-size: 12px; font-weight: 600; }
.wt-flow > li + li::before { margin-left: 0; }
.wt-flow > li:not(:last-child)::after { content: "›"; margin: 0 4px; color: #c9b896; }
.wt-track { list-style: none; display: flex; margin: 10px 0 8px; padding: 0; font-size: 13px; color: var(--text-2); }
.wt-track > li { flex: 1; position: relative; padding-top: 22px; text-align: center; min-width: 0; }
.wt-track > li::before { content: ""; position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid #d9d2c3; box-sizing: border-box; z-index: 1; }
.wt-track > li + li::after { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: #e6dfd0; }
.wt-track > li.is-done { color: #2f7a4b; }
.wt-track > li.is-done::before { background: #2f9e5b; border-color: #2f9e5b; }
.wt-track > li.is-done::after, .wt-track > li.is-now::after { background: #2f9e5b; }
.wt-track > li.is-now { color: #b26a00; font-weight: 600; }
.wt-track > li.is-now::before { border-color: #f0a020; background: #ffe3a8; box-shadow: 0 0 0 4px rgba(240, 160, 32, 0.18); }
#reimburse[data-mode="member"] .rb-form h3 { font-family: var(--serif); font-size: 22px; }
.wt-h { margin: 6px 0 10px; font-family: var(--serif); font-size: 22px; }
/* 報修 (我要): the two buildings as big cards, chips to tap, a big photo button */
#ecc-app[data-mode="mine"] .ecc-bld { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0 0 6px; }
#ecc-app[data-mode="mine"] .ecc-bld > legend { font-weight: 600; margin-bottom: 8px; }
#ecc-app[data-mode="mine"] .ecc-bld > label { position: relative; display: block; margin: 0; padding: 0; border: 0; background: none; }
#ecc-app[data-mode="mine"] .ecc-bld > label > input { position: absolute; opacity: 0; pointer-events: none; }
#ecc-app[data-mode="mine"] .ecc-bld > label > span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; }
#ecc-app[data-mode="mine"] .ecc-bld > label > span > b { font-family: var(--serif); font-size: 19px; }
#ecc-app[data-mode="mine"] .ecc-bld > label > span > small { color: var(--text-2); font-size: 14px; }
#ecc-app[data-mode="mine"] .ecc-bld .wt-ico { font-style: normal; font-size: 28px; margin-bottom: 2px; }
#ecc-app[data-mode="mine"] .ecc-bld > label > input:checked + span { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); background: #fff8ec; }
#ecc-app[data-mode="mine"] .ecc-bld > label > input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.wt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wt-chips > button { border: 1px solid var(--line); background: #fff; border-radius: 980px; padding: 7px 13px; font: inherit; font-size: 16px; cursor: pointer; color: var(--text); }
.wt-chips > button[aria-checked="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.wt-photo { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px !important; border: 2px dashed #d8cbb2 !important; border-radius: 18px; background: #fffaf2 !important; text-align: center; cursor: pointer; }
.wt-photo > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wt-photo-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 980px; background: var(--text); color: #fff; font-size: 18px; font-weight: 600; }
.wt-photo-btn > i { font-style: normal; }
.wt-photo > small { color: var(--text-2); font-size: 14px; }
.wt-photo:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
#ecc-app[data-mode="mine"] [data-ecc-request] > h2 { display: none; }
#ecc-app[data-mode="mine"] .ecc-form .am-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
#ecc-app[data-mode="mine"] .ecc-form .am-row > label { display: block; }
#ecc-app[data-mode="mine"] .ecc-form .am-row > label > select { display: block; width: 100%; margin-top: 6px; }
/* 預約場地 (我要): my bookings first, the week as day chips, the floor plan folded away */
.wt-mine { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: #f3f8f2; border: 1px solid #dcebd8; }
.wt-mine > h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; }
.wt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.wt-days > button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; cursor: pointer; color: var(--text); }
.wt-days > button > b { font-size: 15px; }
.wt-days > button > small { font-size: 13px; color: var(--text-2); }
.wt-days > button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.wt-days > button[aria-pressed="true"] > small { color: rgba(255, 255, 255, 0.75); }
.wt-more { margin: 18px 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.wt-more > summary { padding: 12px 16px; cursor: pointer; font-size: 17px; }
.wt-more[open] > summary { border-bottom: 1px solid var(--line); }
.wt-more > figure { margin: 12px; }
#rooms .rm-daybar { font-size: 15px; }
/* 服事表 (我要): my turns first; each day a card with a calendar tile */
.sv-me { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: #fff7e6; border: 1px solid #f3d9a4; }
.sv-me > h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; }
.sv-me > ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 17px; }
.sv-me b { display: inline-block; min-width: 8.5em; }
.sv-days { display: grid; gap: 10px; }
.sv-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.sv-day h3.sv-date { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px 0; border-radius: 12px; background: #f6f1e7; line-height: 1.1; font-size: 13px; color: var(--text-2); }
.sv-day h3.sv-date > b { font-family: var(--serif); font-size: 28px; color: var(--text); }
.sv-day.is-today h3.sv-date { background: #8e1a18; color: #ffe; }
.sv-day.is-today h3.sv-date > b { color: #fff; }
.sv-day dl { align-content: center; }
@media (max-width: 560px) { .sv-row { grid-template-columns: 6.5em minmax(0, 1fr); } }
/* 資料庫: tabs as chips, files on coloured tiles, find a file */
.res-tabs { border-bottom: 0; gap: 8px; margin-bottom: 14px; }
.res-tabs button { border: 1px solid var(--line); border-radius: 980px; padding: 7px 16px; margin: 0; background: #fff; color: var(--text); font-size: 16px; }
.res-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }
.res-q { flex: 1 1 200px; max-width: 320px; font: inherit; font-size: 16px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 980px; background: #fff; }
.res-list { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.res-list:empty { display: none; }
.res-list > li:first-child .res-item { border-top: 0; }
.res-item { grid-template-columns: 40px 1fr auto; padding: 12px 14px; }
.res-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #eef1f6; color: #4a5568; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.res-ico-folder { background: #fff3d6; font-size: 20px; }
.res-ico-pdf { background: #fde3e1; color: #c0392b; }
.res-ico-doc { background: #e1ecfd; color: #2b5fc0; font-size: 17px; }
.res-ico-sheet { background: #dff3e6; color: #1e7e45; font-size: 17px; }
.res-ico-slide { background: #fdebdc; color: #c25a14; font-size: 17px; }
.res-ico-image, .res-ico-audio, .res-ico-video { background: #efe6fb; color: #6b3fb0; font-size: 18px; }
.res-go { color: var(--text-2); font-size: 22px; }
.sv-name.is-me { background: #fff1d6; border-color: #e7b65c; font-weight: 600; }
.sv-day h3.sv-date { align-self: start; }
@media (max-width: 760px) { .res-item { grid-template-columns: 40px minmax(0, 1fr); } .res-go { display: none; } .res-q { max-width: none; } }
/* 兒童主日學報名: three friendly steps, a cheerful form, a happy ending */
.kreg-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 22px; padding: 0; }
.kreg-steps > li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #eef8f0; border: 1px solid #d3ead9; }
.kreg-steps > li > span { font-size: 28px; line-height: 1.1; }
.kreg-steps > li > b { font-family: var(--serif); font-size: 19px; color: #1f5f36; }
.kreg-steps > li > small { color: #4a6b55; font-size: 14px; }
.kreg { background: #fff; border: 1px solid #e3ece5; box-shadow: 0 8px 24px rgba(30, 80, 50, 0.06); }
.kreg .mp-h2 { font-size: 24px; }
.kreg-kid { background: #fbfdfb; border-color: #d9e9de; }
.kreg-kid legend { font-family: var(--serif); font-size: 18px; color: #1f5f36; }
.kreg-kid legend::before { content: "🌱"; }
.kreg .pill[type="submit"] { font-size: 19px; padding: 12px 34px; background: #2f7a4b; }
.kreg-done { text-align: center; padding: 30px 22px; }
.kreg-done-ico { font-size: 48px; margin: 0; }
.kreg-verse { font-family: var(--serif); font-size: 19px; color: #1f5f36; }
.kreg-verse > small { display: block; margin-top: 4px; font-family: inherit; font-size: 14px; color: #4a6b55; }
@media (max-width: 560px) {
  .wt-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px 16px; }
  .wt-choice > .wt-ico { grid-row: span 2; align-self: center; margin: 0; font-size: 30px; }
  .wt-choice > b { font-size: 19px; }
  #ecc-app[data-mode="mine"] .ecc-bld { grid-template-columns: 1fr 1fr; }
  #ecc-app[data-mode="mine"] .ecc-bld > label > span > small { display: none; }
  #ecc-app[data-mode="mine"] .ecc-bld > label > span { align-items: center; text-align: center; padding: 12px 8px; }
}

/* ---------- 我負責 pages: what needs attention, as count cards on top (tap = show those) ---------- */
.wt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 18px; }
.wt-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(60, 40, 10, 0.04); transition: border-color 0.15s, transform 0.15s; }
.wt-stat:hover { border-color: var(--amber); transform: translateY(-1px); }
.wt-stat > b { font-family: var(--serif); font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wt-stat > span { font-size: 15px; color: var(--text-2); }
.wt-stat.is-alert > b { color: #c2410c; }
.wt-stat.is-zero > b { color: #b9b3a8; }
.wt-stat[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
@media (max-width: 560px) { .wt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .wt-stat { padding: 10px 10px; } .wt-stat > b { font-size: 26px; } .wt-stat > span { font-size: 13px; } }
.nc-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.bp-card .wt-track { margin: 6px 0 4px; max-width: 520px; }
.am-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* the same chips everywhere on the staff pages */
.ro-tabs button { border-color: var(--line); color: var(--text); padding: 7px 15px; }
.ro-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- 音響 (/portal/sound/): a step-by-step manual with ticks ---------- */
.sd-app { counter-reset: sd; }
.sd-top { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; background: var(--bg, #fff); }
.sd-top .wt-h { margin: 0; }
.sd-progress { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.sd-bar { width: 140px; height: 10px; border-radius: 980px; background: #eee7da; overflow: hidden; }
.sd-bar > i { display: block; height: 100%; width: 0; background: #2f9e5b; transition: width 0.3s; }
.sd-phase { margin: 18px 0 8px; }
.sd-phase-h { margin: 0 0 10px; padding: 6px 14px; display: inline-block; border-radius: 980px; font-size: 16px; font-weight: 600; background: #fff3d6; color: #8a5a00; }
.sd-during .sd-phase-h { background: #e1ecfd; color: #1f4e8c; }
.sd-after .sd-phase-h { background: #e6f4ea; color: #1f6b3d; }
.sd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sd-step { counter-increment: sd; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: background 0.2s, border-color 0.2s; }
.sd-check { position: relative; display: block; cursor: pointer; }
.sd-check > input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.sd-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #d9cfbd; background: #fff; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text); }
.sd-num::before { content: counter(sd); }
.sd-check > input:focus-visible + .sd-num { outline: 2px solid var(--amber); outline-offset: 2px; }
.sd-step.is-done { background: #f3faf5; border-color: #cfe8d7; }
.sd-step.is-done .sd-num { background: #2f9e5b; border-color: #2f9e5b; color: #fff; }
.sd-step.is-done .sd-num::before { content: "✓"; }
.sd-step.is-done h4 { color: #2f7a4b; }
.sd-body h4 { margin: 8px 0 4px; font-family: var(--serif); font-size: 20px; }
.sd-do { margin: 0; padding-left: 1.2em; font-size: 17px; line-height: 1.6; }
.sd-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff1e6; color: #9a3412; font-size: 16px; }
.sd-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.sd-photos > a { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 13px; text-decoration: none; }
.sd-photos img { width: 100%; height: 190px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #f6f3ee; }
@media (max-width: 560px) { .sd-step { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; } .sd-num { width: 38px; height: 38px; font-size: 17px; } .sd-check > input { width: 38px; height: 38px; } .sd-bar { width: 90px; } .sd-photos { grid-template-columns: 1fr 1fr; } .sd-photos img { height: 120px; } }

/* ---------- 家人專區 home: tiles with an icon; 我負責 tiles say who looks after them ---------- */
.ph-tile { display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(60, 40, 10, 0.04); }
.ph-tile:hover { box-shadow: 0 10px 26px rgba(60, 40, 10, 0.08); }
.ph-tile-head { display: flex; align-items: center; gap: 10px; }
.ph-tile-ico { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fbf3e4; font-size: 21px; line-height: 1; }
.ph-tile-desc { margin-top: 2px; }
.ph-owner { margin-top: auto; padding-top: 10px; font-size: 14px; color: #6b5a3a; }
.ph-owner::before { content: "👤 "; }
.ph-owner.is-none { color: #b45309; }
.ph-owner.is-none::before { content: "⚠ "; }
.ph-tile-own .ph-tile-desc { margin-bottom: 4px; }
.ph-tile-own .ph-owner:not([hidden]) { border-top: 1px dashed #eadfcb; }
/* what this account can't open: quiet and not clickable, but still readable — so people know whom to ask */
.ph-tile.is-locked { opacity: 1; filter: none; background: #f7f5f0; box-shadow: none; }
.ph-tile.is-locked .ph-tile-name, .ph-tile.is-locked .ph-tile-desc { color: #9a9286; }
.ph-tile.is-locked .ph-tile-ico { filter: grayscale(1); opacity: 0.55; background: #eeebe4; }
.ph-tile.is-locked .ph-owner { color: #8a8174; }
.ph-tile.is-locked .ph-owner.is-none { color: #b98a4e; }
.ph-cat { display: flex; align-items: center; gap: 10px; }
.ph-cat::after { content: ""; flex: 1; height: 1px; background: #eadfcb; }
.ph-lock-note { margin: -6px 0 12px; color: var(--text-2); font-size: 15px; }
@media (max-width: 560px) { .ph-tile-ico { width: 32px; height: 32px; font-size: 18px; border-radius: 9px; } .ph-owner { font-size: 13px; } }
/* filter buttons that carry a count, shown as count cards (家人申請, 意見匯總, 迎新) */
.ss-chipbar.wt-statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 14px; }
.ss-chipbar.wt-statbar > button { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--text-2); font-size: 15px; font-weight: 400; text-align: left; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(60, 40, 10, 0.04); }
.ss-chipbar.wt-statbar > button::before { content: attr(data-count); font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.ss-chipbar.wt-statbar > button[data-count=""]::before, .ss-chipbar.wt-statbar > button:not([data-count])::before { content: "0"; color: #b9b3a8; }
.ss-chipbar.wt-statbar > button::after { display: none !important; }
.ss-chipbar.wt-statbar > button[aria-pressed="true"] { background: #fff; color: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); font-weight: 600; }
@media (max-width: 560px) { .ss-chipbar.wt-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ss-chipbar.wt-statbar > button::before { font-size: 24px; } }
.ma-how { margin: 0 0 14px; } .ma-how-text { padding: 0 16px 12px; margin: 10px 0 0; } div.wt-stat { cursor: default; } div.wt-stat:hover { transform: none; border-color: var(--line); }
/* 管理控制台: the same chips and notes as the portal pages */
.ac-tabs { border-bottom: 0; gap: 8px; }
.ac-tabs button { margin: 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); font-size: 16px; }
.ac-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.ac-note { padding: 12px 16px; border-radius: 14px; background: #f6f1e7; color: #5c4f3a; font-size: 15px; line-height: 1.6; }
.ss-toolbar:has(> .wt-statbar) { flex-wrap: wrap; } .ss-toolbar > .wt-statbar { flex: 1 1 100%; }

/* ---------- 排班 (/portal/roster/): this week and next first; each week a line; its editor opens under it ---------- */
.ro-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.ro-hero-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(60, 40, 10, 0.05); }
.ro-hero-card:first-child { background: #fff8ec; border-color: #f0d9a8; }
.ro-hero-k { font-size: 14px; color: var(--text-2); }
.ro-hero-card > b { font-family: var(--serif); font-size: 26px; line-height: 1.25; }
.ro-hero-card > small { color: var(--text-2); font-size: 14px; }
.ro-hero-card.is-unset > b { color: #b45309; }
.ro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; border: 0; background: none; }
.ro-list > .ro-row { display: block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ro-list > .ro-row.is-next { border-color: #f0c674; background: #fffaf0; }
.ro-list > .ro-row.is-past { opacity: 0.6; }
.ro-list > .ro-row.is-open { border-color: var(--text); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07); }
.ro-line { display: flex; align-items: center; gap: 12px; }
.ro-tile { flex: none; display: flex; flex-direction: column; align-items: center; width: 48px; padding: 4px 0; border-radius: 10px; background: #f6f1e7; line-height: 1.1; color: var(--text-2); font-size: 12px; }
.ro-tile > b { font-family: var(--serif); font-size: 22px; color: var(--text); }
.ro-row.is-next .ro-tile { background: #8e1a18; color: #ffe; }
.ro-row.is-next .ro-tile > b { color: #fff; }
.ro-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ro-datetext { font-size: 13px; color: var(--text-2); }
.ro-who { font-size: 18px; }
.ro-who > small { color: var(--text-2); font-size: 14px; }
.ro-unset { color: #b45309; }
.ro-open { flex: none; }
.ro-editor { margin: 12px 0 2px 60px; padding-top: 12px; border-top: 1px dashed #e6dccb; display: grid; gap: 8px; }
.ro-editor input[data-ro-note], .ro-editor .ro-names { font: inherit; font-size: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ro-ed-label { margin: 2px 0 -2px; font-size: 14px; color: var(--text-2); }
.ro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-chip { font: inherit; font-size: 16px; padding: 7px 14px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.ro-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.ro-chip-clear { color: #9a3412; border-style: dashed; }
.ro-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-swap:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ro-swap select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 560px) { .ro-hero { grid-template-columns: 1fr; } .ro-hero-card > b { font-size: 22px; } .ro-editor { margin-left: 0; } .ro-line { gap: 10px; } }
/* 午餐管理: this Sunday at a glance */
.la-hero { margin: 4px 0 14px; }
.la-hero-card { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: #faf8f4; }
.la-hero-card.is-open { background: #fbf6ec; border-color: #e3cfa5; }
.la-hero-card.is-new { background: #fff8ec; border-color: #f0d9a8; }
.la-hero-card.is-new > b { font-family: var(--serif); font-size: 22px; }
.la-hero-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.la-hero-status { font-weight: 700; font-size: 17px; }
.la-hero-nums { display: flex; gap: 22px; }
.la-hero-nums > div { display: flex; align-items: baseline; gap: 6px; }
.la-hero-nums b { font-family: var(--serif); font-size: 34px; line-height: 1; }
.la-hero-nums span { color: var(--text-2); }
.la-hero-dishes { display: flex; flex-wrap: wrap; gap: 6px; }
.la-dish-n { padding: 5px 12px; border-radius: 980px; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.la-dish-n > b { margin-left: 4px; color: #b45309; }
.la-dish-n.is-zero > b { color: #b9b3a8; }
.la-tabs { margin: 0 0 14px; }
/* 迎新: who each newcomer is with, and how far the follow-up has come */
.nc-row { align-items: flex-start; }
.nc-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fbe9d0; color: #8a5a00; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.nc-who { flex: 1; }
.nc-track { margin: 4px 0 2px; max-width: 420px; }
.nc-late { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 980px; background: #fff1e6; color: #9a3412; font-size: 13px; }
.nc-unassigned { color: #b45309 !important; font-weight: 600; }
.nc-choices { margin-bottom: 18px; }
a.wt-choice { text-decoration: none; }
.nc-late { justify-self: start; width: fit-content; margin-left: 0; }
/* 場地審批: each waiting booking a card */
.rm-pending { padding: 16px; border-radius: 18px; }
.rm-pend-h { margin: 0 0 10px; font-family: var(--serif); font-size: 20px; }
.rm-pend-list { display: grid; gap: 8px; }
.rm-list li.rm-pend { padding: 12px 14px; border: 1px solid #f0d9b0; border-radius: 14px; background: #fff; align-items: flex-start; }
.rm-pend-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.rm-pend-when { font-size: 15px; color: #8a5a00; }
.rm-pend-title { font-size: 19px; }
.rm-pend-room { font-size: 15px; }
.rm-pend .rm-actions { align-self: center; }
.rm-pend .rm-actions .pill { padding: 8px 20px; }
.rm-pending { margin-bottom: 14px; }
/* 小組: the group at a glance, newcomers to add first, members as cards with a face */
.sg-row .kr-open { flex: 1; min-width: 0; }
.sg-row { align-items: center; }
.sg-newrow { border-color: #cfe8d7; background: #f5fbf6; }
.nc-avatar.is-new { background: #e1f3e6; font-size: 18px; }
.sg-infobox .sg-info { padding: 12px 16px 16px; margin: 0; }
.sg-infobox { margin-top: 18px; }
/* 教會財務: pay by Zelle — the amount and the recipient big, each a tap to copy */
.rb-payto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; background: #f1faf3; border: 1px solid #cfe8d7; }
.rb-payto-k { padding: 2px 10px; border-radius: 980px; background: #6d1ed4; color: #fff; font-size: 13px; font-weight: 700; }
.rb-payto-amt { font-family: var(--serif); font-size: 26px; }
.rb-payto-to { font-size: 19px; word-break: break-all; }
.rb-pay input { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.eb-act-late { border-color: #f5c39a; background: #fff6ee; } .eb-acts { margin: 6px 0 14px; } .eb-card.is-late { border-left-color: #c2410c; }
/* 維護: how far through its cycle each task is */
.fa-cycle { height: 10px; border-radius: 980px; background: #eee7da; overflow: hidden; margin: 4px 0 8px; }
.fa-cycle > i { display: block; height: 100%; background: #2f9e5b; border-radius: 980px; }
.fa-task.is-due .fa-cycle > i { background: #f0a020; }
.fa-task.is-overdue .fa-cycle > i { background: #c2410c; }
/* 週報: what is filled in, block by block */
.ble-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 12px; }
.ble-progress:empty { display: none; }
.na-print { margin-left: 8px; font-size: .88em; }
.ble-synced-sum { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: #eef4ea; border: 1px solid #cfe0c3; color: #2f5a1f; font-size: 15px; }
.ble-synced-sum p { margin: 0; }
.ble-synced-sum ul { margin: 4px 0 4px 1.2em; padding: 0; }
.ble-prog-chip.is-auto { border-style: solid; border-color: #cfe0c3; background: #eef4ea; color: #2f5a1f; }
.ble-prog-chip.is-auto small { font-size: 12px; opacity: 0.8; }
.ble-prog-n { margin-right: 6px; font-size: 15px; color: var(--text-2); }
.ble-prog-n > b { font-family: var(--serif); font-size: 22px; color: var(--text); }
.ble-prog-chip { font: inherit; font-size: 14px; padding: 4px 10px; border-radius: 980px; border: 1px dashed #d8cbb2; background: #fff; color: #9a6b1f; cursor: pointer; }
.ble-prog-chip.is-done { border: 1px solid #cfe8d7; background: #f1faf3; color: #2f7a4b; }
/* 統計報表: what needs attention first, then a chip per section */
.rp-attn { margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; background: #fff7e6; border: 1px solid #f3d9a4; }
.rp-attn > h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; }
.rp-attn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 16px; }
.rp-attn li > b { display: inline-block; min-width: 2em; font-family: var(--serif); font-size: 20px; color: #b45309; }
.rp-attn li.is-bad > b { color: #b91c1c; }
.rp-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.rp-nav:empty { display: none; }
.rp-nav > a { padding: 5px 13px; border-radius: 980px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 15px; text-decoration: none; }
.rp-nav > a:hover { border-color: var(--text); }
.rp-card { scroll-margin-top: 80px; }

/* ---------- 認識我們 (/about/): for someone new ---------- */
.au-hero { position: relative; overflow: hidden; min-height: 520px; display: grid; place-items: end center; color: #fff; text-align: center; }
.au-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 44, 0.15) 0%, rgba(14, 22, 44, 0.45) 45%, rgba(14, 22, 44, 0.88) 100%); }
.au-hero-inner { position: relative; z-index: 1; max-width: 820px; padding: 120px 22px 54px; }
.au-eyebrow { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.24em; color: #f3c77e; }
.au-title { margin: 0; font-family: var(--serif); font-size: 52px; line-height: 1.2; font-weight: 700; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.au-sub { margin: 14px auto 0; max-width: 640px; font-size: 19px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); }
.au-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; }
.au-ghost { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 980px; border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; text-decoration: none; }
.au-ghost:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.au-ghost-dark { color: var(--text); border-color: var(--line); background: #fff; }
.au-ghost-dark:hover { background: #f6f1e7; }
.au-sec { padding: 64px 22px; }
.au-h { margin: 0 0 16px; font-family: var(--serif); font-size: 32px; line-height: 1.35; color: #231a10; }
.au-center { text-align: center; margin-bottom: 26px; }
.au-intro { background: var(--ivory); padding-top: 40px; }
.au-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 36px; }
.au-quick > div { padding: 16px 12px; border-radius: 16px; background: #fff; border: 1px solid #ece3d2; text-align: center; }
.au-quick dt { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #8a5a00; line-height: 1.2; }
.au-quick dd { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.au-welcome { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.8; }
.au-care-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.au-care { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1px solid #ece3d2; box-shadow: 0 8px 24px rgba(60, 40, 10, 0.05); }
.au-care-ico { font-size: 34px; line-height: 1; }
.au-care h3 { margin: 6px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.4; color: #231a10; }
.au-care p { margin: 0; font-size: 16px; line-height: 1.7; color: #4a4036; flex: 1; }
.au-care a { margin-top: 6px; font-weight: 600; }
.au-strives-h { margin-top: 46px; }
.au-strives { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.au-strives li { padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(243, 199, 126, 0.25); text-align: center; font-size: 18px; color: #f5f5f7; }
.au-note { text-align: center; color: var(--text-2); margin: 14px 0 0; }
.au-story { background: var(--ivory); }
.au-timeline { list-style: none; margin: 0 0 8px; padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.au-timeline > li { position: relative; padding: 30px 10px 0; text-align: center; }
.au-timeline > li::before { content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #f4ecdc; z-index: 1; }
.au-timeline > li::after { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: #e2d3b3; }
.au-timeline > li:first-child::after { left: 50%; }
.au-year { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; color: #8a5a00; }
.au-timeline strong { display: block; font-size: 16px; margin-top: 2px; }
.au-timeline small { display: block; color: var(--text-2); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.au-timeline > li.au-now::before { background: #2f9e5b; box-shadow: 0 0 0 4px #dff3e6; }
.au-timeline > li.au-now::after { right: 0; background: linear-gradient(90deg, #e2d3b3, #9fd3b2); }
.au-timeline > li.au-now .au-year { color: #2f7a4b; }
.au-ahead-h { margin: 34px 0 12px; text-align: center; font-family: var(--serif); font-size: 24px; color: #1f5f36; }
.au-ahead { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.au-ahead li { padding: 18px 18px 16px; border-radius: 18px; border: 1.5px dashed #9fd3b2; background: #f5fbf6; }
.au-ahead strong { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: #1f5f36; }
.au-ahead small { display: block; margin-top: 6px; color: #4a6b55; font-size: 14px; line-height: 1.6; }
.au-verse { margin: 26px auto 0; max-width: 640px; text-align: center; font-family: var(--serif); font-size: 20px; color: #3a3128; }
.au-verse > small { display: block; margin-top: 4px; font-family: inherit; font-size: 14px; color: var(--text-2); }
.au-believe { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.au-believe li { position: relative; padding: 14px 18px 14px 46px; border-radius: 14px; background: #fff; border: 1px solid #ece3d2; font-size: 18px; line-height: 1.6; }
.au-believe li::before { content: "✝"; position: absolute; left: 18px; top: 13px; color: var(--gold); }
.au-faith-full { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.au-faith-full > summary { padding: 14px 18px; cursor: pointer; font-weight: 600; }
.au-faith-full[open] > summary { border-bottom: 1px solid var(--line); }
.au-faith-full > :not(summary) { padding: 0 18px; }
.au-faith-title { margin: 18px 0 6px; font-family: var(--serif); font-size: 22px; }
.au-come { padding: 72px 22px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #fbf3e4 70%); }
.au-come-h { margin: 0; font-family: var(--serif); font-size: 36px; color: #231a10; }
.au-come-sub { max-width: 680px; margin: 12px auto 26px; font-size: 17px; line-height: 1.7; color: #4a4036; }
.au-come-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
.au-come-card { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; }
.au-come-card > span { font-size: 14px; color: #8a5a00; letter-spacing: 0.1em; }
.au-come-card > b { font-family: var(--serif); font-size: 20px; }
.au-come-card > small { color: var(--text-2); font-size: 15px; }
.au-ctas-center { margin-top: 26px; }
@media (max-width: 900px) {
  .au-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-strives, .au-ahead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 8px; }
  .au-timeline > li { padding: 0 0 18px 34px; text-align: left; }
  .au-timeline > li::before { top: 6px; left: 0; margin-left: 0; }
  .au-timeline > li::after { top: 14px; bottom: -6px; left: 6px; right: auto; width: 2px; height: auto; }
  .au-timeline > li:first-child::after { left: 6px; }
  .au-timeline > li.au-now::after { display: none; }
  .au-come-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .au-hero { min-height: 480px; }
  .au-title { font-size: 38px; }
  .au-sub { font-size: 17px; }
  .au-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-quick > div:last-child { grid-column: 1 / -1; }
  .au-care-grid, .au-strives, .au-ahead { grid-template-columns: 1fr; }
  .au-h { font-size: 26px; }
  .au-sec { padding: 46px 18px; }
}

/* ---------- 教會行事曆 (/calendar/): this week, the month, each ministry's regular gatherings ---------- */
.cl-hero { padding: 64px 22px 34px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, #fff 0%, var(--ivory) 60%, #f4ecdc 100%); }
.cl-hero-inner { max-width: 760px; margin: 0 auto; }
.cl-title { margin: 0; font-family: var(--serif); font-size: 46px; line-height: 1.2; color: #231a10; }
.cl-sub { margin: 12px auto 0; font-size: 18px; color: #5c4f3a; }
.cl-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cl-jump a { padding: 8px 18px; border-radius: 980px; border: 1px solid #e2d3b3; background: #fff; color: var(--text); text-decoration: none; font-size: 16px; }
.cl-jump a:hover { border-color: var(--text); }
.cl-sec { padding: 40px 22px; scroll-margin-top: 70px; }
.cl-h { margin: 0 0 14px; font-family: var(--serif); font-size: 28px; color: #231a10; }
.cl-lede { margin: -6px 0 16px; color: var(--text-2); }
.cl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cl-day { min-width: 0; padding: 10px 10px 12px; border-radius: 16px; background: #fff; border: 1px solid #ece3d2; }
.cl-day.is-today { border-color: #8e1a18; box-shadow: 0 8px 22px rgba(142, 26, 24, 0.1); }
.cl-day.is-empty { background: #faf8f4; }
.cl-day-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.cl-day-head > b { font-family: var(--serif); font-size: 24px; }
.cl-day-head > span { font-size: 14px; color: var(--text-2); }
.cl-day.is-today .cl-day-head > b, .cl-day.is-today .cl-day-head > span { color: #8e1a18; font-weight: 700; }
.cl-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cl-day li a { display: flex; flex-direction: column; padding: 5px 7px; border-radius: 8px; border-left: 3px solid var(--m); background: color-mix(in srgb, var(--m) 8%, #fff); color: var(--text); text-decoration: none; }
.cl-day li a:hover { background: color-mix(in srgb, var(--m) 16%, #fff); }
.cl-t { font-size: 12px; color: var(--text-2); }
.cl-n { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.cl-none { color: #c4bcae; font-size: 14px; }
.cl-month { scroll-margin-top: 70px; }
.cl-regular { background: var(--ivory); }
.cl-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cl-table { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; border-top: 4px solid var(--m); }
.cl-table h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--serif); font-size: 21px; }
.cl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--m); }
.cl-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cl-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.cl-table td { padding: 8px 6px; border-bottom: 1px solid #f1ead9; vertical-align: top; }
.cl-table tr:last-child td { border-bottom: 0; }
.cl-table td a { font-weight: 600; }
.cl-table td:nth-child(2) { white-space: nowrap; color: #3a3128; }
.cl-table td:nth-child(3) { color: var(--text-2); }
@media (max-width: 900px) { .cl-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cl-tables { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cl-title { font-size: 34px; }
  .cl-week { grid-template-columns: 1fr; }
  .cl-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; }
  .cl-day.is-empty { display: none; }
  .cl-day.is-empty.is-today { display: grid; }
  .cl-day-head { flex-direction: column; gap: 0; margin: 0; }
  .cl-table td:nth-child(2) { white-space: normal; }
}

/* ---------- 主日午餐 (/lunch/): steaming dumplings, the dishes, a shared table ---------- */
.lx-hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; color: #fff8ec; background: #1b120b; }
.lx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
/* steam rising from the box (still for people who prefer less motion) */
.lx-steam { position: absolute; z-index: 1; left: 62%; top: 22%; width: 260px; height: 260px; pointer-events: none; }
.lx-steam > i { position: absolute; bottom: 0; width: 70px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); filter: blur(14px); opacity: 0; animation: lx-steam 4.5s ease-in-out infinite; }
.lx-steam > i:nth-child(1) { left: 30px; }
.lx-steam > i:nth-child(2) { left: 100px; animation-delay: 1.5s; }
.lx-steam > i:nth-child(3) { left: 170px; animation-delay: 3s; }
@keyframes lx-steam { 0% { transform: translateY(40px) scaleX(0.7); opacity: 0; } 30% { opacity: 0.85; } 100% { transform: translateY(-120px) scaleX(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lx-steam > i { animation: none; opacity: 0.5; } }
.lx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 6, 0.88) 0%, rgba(20, 12, 6, 0.6) 42%, rgba(20, 12, 6, 0.05) 75%); }
.lx-hero-inner { position: relative; z-index: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 80px 28px; }
.lx-eyebrow { margin: 0 0 10px; font-size: 15px; letter-spacing: 0.22em; color: #f3c77e; }
.lx-title { margin: 0; font-family: var(--serif); font-size: 64px; line-height: 1.1; font-weight: 700; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); }
.lx-sub { margin: 16px 0 0; max-width: 440px; font-size: 19px; line-height: 1.65; color: rgba(255, 248, 236, 0.9); }
.lx-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 12px 26px; border-radius: 980px; background: linear-gradient(180deg, #ef9a3c, #d9702a); color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 26px rgba(217, 112, 42, 0.45); }
.lx-go:hover { text-decoration: none; filter: brightness(1.05); }
.lx-steps { list-style: none; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: -46px auto 0; padding: 0 22px; }
.lx-steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px; border-radius: 18px; background: #fffaf3; border: 1px solid #f0d9b8; box-shadow: 0 12px 30px rgba(80, 40, 10, 0.12); text-align: center; }
.lx-steps li > span { font-size: 30px; }
.lx-steps li > b { font-family: var(--serif); font-size: 19px; color: #7a3d14; }
.lx-steps li > small { font-size: 14px; color: #8a6a4a; }
.lx-menu { position: relative; padding: 48px 22px 56px; scroll-margin-top: 60px; }
.lx-menu::before { content: ""; position: absolute; right: -120px; top: 40px; width: 380px; height: 380px; border-radius: 50%; background: url("/assets/lunch-photos/box2.jpg") center / cover; opacity: 0.1; pointer-events: none; }
.lx-wrap { position: relative; max-width: 980px; margin: 0 auto; }
.lx-band { position: relative; overflow: hidden; min-height: 380px; display: grid; place-items: center; text-align: center; color: #fff8ec; }
.lx-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 50%, rgba(20, 12, 6, 0.72) 0%, rgba(20, 12, 6, 0.45) 100%); }
.lx-band-inner { position: relative; z-index: 1; padding: 60px 22px; }
.lx-band-big { margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 700; text-shadow: 0 3px 20px rgba(0, 0, 0, 0.4); }
.lx-band-verse { margin: 14px 0 0; font-family: var(--serif); font-size: 20px; }
.lx-band-verse > small { display: block; margin-top: 4px; font-family: inherit; font-size: 14px; opacity: 0.85; }
@media (max-width: 700px) {
  .lx-hero { min-height: 520px; align-items: flex-end; }
  .lx-hero::after { background: linear-gradient(180deg, rgba(20, 12, 6, 0.1) 0%, rgba(20, 12, 6, 0.55) 45%, rgba(20, 12, 6, 0.92) 100%); }
  .lx-hero-inner { padding: 120px 20px 70px; }
  .lx-title { font-size: 46px; }
  .lx-sub { font-size: 17px; }
  .lx-steps { gap: 6px; padding: 0 12px; margin-top: -36px; }
  .lx-steps li { padding: 10px 6px; }
  .lx-steps li > span { font-size: 24px; }
  .lx-steps li > b { font-size: 16px; }
  .lx-steps li > small { font-size: 12px; }
  .lx-band-big { font-size: 30px; }
  .lx-menu::before { display: none; }
}
/* 認識我們, warmer: a note, a Sunday told in photos, a gentle list */
.au-hero::after { background: linear-gradient(180deg, rgba(40, 24, 10, 0.05) 0%, rgba(40, 24, 10, 0.35) 45%, rgba(30, 18, 8, 0.82) 100%); }
.au-note-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; align-items: center; }
.au-note-photo { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(60, 40, 10, 0.14); transform: rotate(-1.2deg); }
.au-note-photo img { display: block; width: 100%; height: auto; }
.au-note-text { font-size: 19px; line-height: 1.9; color: #3a3128; }
.au-note-text p { margin: 0 0 10px; }
.au-sign { font-family: var(--serif); color: #8a5a00; text-align: right; }
.au-sunday { background: #fff; }
.au-day { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; display: grid; gap: 26px; }
.au-day-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.au-day-step:nth-child(even) > figure { order: 2; }
.au-day-step > figure { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.12); }
.au-day-step > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-day-step.is-text { grid-template-columns: 1fr; text-align: center; padding: 26px 30px; border-radius: 22px; background: #fbf3e4; }
.au-day-step h3 { margin: 6px 0 6px; font-family: var(--serif); font-size: 26px; color: #231a10; }
.au-day-step p { margin: 0; font-size: 18px; line-height: 1.8; color: #4a4036; }
.au-day-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f3e3c4; color: #8a5a00; font-family: var(--serif); font-weight: 700; }
.au-cares { background: var(--ivory); }
.au-care-list { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; }
.au-care-list li { padding: 18px 0; border-bottom: 1px solid #e9dcc3; }
.au-care-list h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 20px; color: #231a10; }
.au-care-list p { margin: 0; font-size: 16px; line-height: 1.75; color: #4a4036; }
.au-care-list a { white-space: nowrap; font-weight: 600; }
.au-ahead li { border: 0; background: #fff; box-shadow: 0 8px 22px rgba(60, 40, 10, 0.06); border-top: 3px solid #9fd3b2; }
.au-believe li { padding-left: 18px; }
.au-believe li::before { content: none; }
@media (max-width: 760px) {
  .au-note-wrap, .au-day-step { grid-template-columns: 1fr; gap: 16px; }
  .au-day-step:nth-child(even) > figure { order: 0; }
  .au-note-photo { transform: none; }
  .au-care-list { grid-template-columns: 1fr; }
  .au-note-text { font-size: 17px; }
}

/* ---------- 主日午餐, take two: a menu card for Sunday's table, and grace before the meal ---------- */
.lx-hero-verse { margin: 18px 0 0; max-width: 460px; font-family: var(--serif); font-size: 17px; line-height: 1.7; color: #ffe9c7; }
.lx-hero-verse > small { display: block; margin-top: 2px; font-family: var(--font); font-size: 13px; letter-spacing: 0.08em; color: rgba(255, 233, 199, 0.8); }
.lx-menu { background: #f7efe2; padding-top: 56px; }
.lx-menu::before { content: none; }
.lx-menu-head { text-align: center; margin: 0 0 18px; }
.lx-menu-k { margin: 0; font-size: 14px; letter-spacing: 0.3em; color: #a0703a; }
.lx-menu-h { margin: 4px 0 6px; font-family: var(--serif); font-size: 40px; color: #3a1f0b; }
.lx-menu-h::after { content: ""; display: block; width: 64px; height: 2px; margin: 10px auto 0; background: #c99a5b; }
.lx-menu-how { margin: 0; color: #8a6a4a; font-size: 15px; letter-spacing: 0.05em; }
/* the dishes as a printed menu: one row each */
.lx-menu .lu-menu.lu-cards { display: block; max-width: 760px; margin: 0 auto; padding: 10px 28px; border-radius: 22px; background: #fffdf8; border: 1px solid #ead9bb; box-shadow: 0 18px 44px rgba(90, 50, 15, 0.1); }
.lx-menu .lu-cards .lu-card { flex-direction: row; align-items: center; gap: 18px; padding: 16px 4px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px dashed #e3cfa8; overflow: visible; outline: 0; }
.lx-menu .lu-cards .lu-card:last-child { border-bottom: 0; }
.lx-menu .lu-cards .lu-card:hover { transform: none; box-shadow: none; }
.lx-menu .lu-cards .lu-card.is-picked { background: linear-gradient(90deg, rgba(232, 144, 47, 0.08), rgba(232, 144, 47, 0)); outline: 0; }
.lx-menu .lu-photo { flex: none; width: 76px; height: 76px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #ead9bb; }
.lx-menu .lu-cards .lu-card.is-picked .lu-photo::after { top: -4px; right: -4px; width: 26px; height: 26px; font-size: 14px; }
.lx-menu .lu-card-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 0; }
.lx-menu .lu-card-body .lu-dish-name { grid-column: 1; }
.lx-menu .lu-card-body .lu-pop { grid-column: 1; justify-self: start; }
.lx-menu .lu-card-body .lu-step { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.lx-menu .lu-cards .lu-dish-name { font-size: 22px; }
/* no photo: the dish's character, hand-written style */
.lu-photo-ph { background: radial-gradient(circle at 35% 30%, hsl(var(--h) 85% 92%) 0%, hsl(var(--h) 70% 80%) 100%); }
.lu-mono { font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 6vw, 64px); color: hsl(var(--h) 55% 32%); line-height: 1; }
.lx-menu .lu-mono { font-size: 34px; }
.lx-menu .lu-meta { margin-bottom: 14px; }
.lx-menu .lu-note { max-width: 760px; margin: 0 auto 16px; }
.lx-menu .lu-form, .lx-menu .lu-mine, .lx-menu .lu-summary, .lx-menu .lu-score { max-width: 760px; margin-left: auto; margin-right: auto; }
.lx-menu .lu-summary { margin-top: 26px; padding: 16px 20px; border-radius: 18px; background: #fffdf8; border: 1px solid #ead9bb; }
.lx-menu .lu-summary h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; color: #3a1f0b; }
/* grace before the meal */
.lx-grace { padding: 64px 22px 72px; background: linear-gradient(180deg, #f7efe2 0%, #efe0c6 100%); }
.lx-grace-card { position: relative; max-width: 640px; margin: 0 auto; padding: 40px 36px 34px; border-radius: 26px; background: #fffdf8; text-align: center; box-shadow: 0 24px 60px rgba(90, 50, 15, 0.14); }
.lx-grace-card::before { content: "🙏"; position: absolute; top: -24px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff4e3; box-shadow: 0 6px 16px rgba(90, 50, 15, 0.15); font-size: 24px; }
.lx-grace-k { margin: 0 0 12px; font-size: 14px; letter-spacing: 0.3em; color: #a0703a; }
.lx-grace-text { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 2; color: #3a1f0b; }
.lx-grace-verse { margin: 22px 0 0; padding-top: 18px; border-top: 1px dashed #e3cfa8; font-size: 15px; line-height: 1.8; color: #8a6a4a; }
.lx-grace-verse > small { display: block; font-size: 13px; }
@media (max-width: 700px) {
  .lx-menu-h { font-size: 32px; }
  .lx-menu .lu-menu.lu-cards { padding: 4px 14px; }
  .lx-menu .lu-cards .lu-card { gap: 12px; padding: 12px 0; }
  .lx-menu .lu-photo { width: 58px; height: 58px; }
  .lx-menu .lu-mono { font-size: 26px; }
  .lx-menu .lu-cards .lu-dish-name { font-size: 19px; }
  .lx-grace-card { padding: 34px 20px 26px; }
  .lx-grace-text { font-size: 18px; }
}
.lx-menu .lu-form { display: grid; gap: 14px; }
.lx-menu .lu-form > .lu-menu.lu-cards { width: 100%; max-width: none; box-sizing: border-box; }
.lx-menu .lu-total-all { white-space: nowrap; }
.lx-menu .lu-totals { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* 教會行事曆: morning light over the hills — every season is in God's hands */
.cl-hero.cl-hero-photo { position: relative; overflow: hidden; min-height: 460px; display: grid; place-items: center; padding: 90px 22px 110px; background: #2a1d2e; color: #fff; }
.cl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.cl-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 20, 40, 0.25) 0%, rgba(30, 20, 40, 0.35) 55%, rgba(30, 20, 40, 0.7) 100%); }
.cl-hero-photo .cl-hero-inner { position: relative; z-index: 1; }
.cl-eyebrow { margin: 0 0 14px; font-size: 15px; letter-spacing: 0.28em; color: #ffe2a8; }
.cl-verse { margin: 0; font-family: var(--serif); font-size: 44px; line-height: 1.45; font-weight: 700; text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45); }
.cl-ref { margin: 12px 0 0; font-size: 16px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }
.cl-hero-photo .cl-jump a { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); color: #fff; backdrop-filter: blur(6px); }
.cl-hero-photo .cl-jump a:hover { background: rgba(255, 255, 255, 0.24); }
/* the month as a card lifted over the photo's edge */
.cl-month { position: relative; z-index: 2; max-width: 1080px; margin: -70px auto 0; border-radius: 26px; box-shadow: 0 24px 60px rgba(40, 24, 50, 0.16); padding-top: 34px; }
.cl-band { position: relative; overflow: hidden; margin-top: 56px; min-height: 240px; display: grid; place-items: center; text-align: center; color: #fff; }
.cl-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.cl-band::after { content: ""; position: absolute; inset: 0; background: rgba(40, 24, 10, 0.35); }
.cl-band-verse { position: relative; z-index: 1; margin: 0; padding: 40px 22px; font-family: var(--serif); font-size: 30px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.cl-band-verse > small { display: block; margin-top: 8px; font-family: inherit; font-size: 15px; letter-spacing: 0.1em; opacity: 0.9; }
.cl-regular { padding-top: 48px; }
@media (max-width: 700px) {
  .cl-hero.cl-hero-photo { min-height: 380px; padding: 70px 18px 90px; }
  .cl-verse { font-size: 30px; }
  .cl-month { margin: -50px 10px 0; border-radius: 20px; }
  .cl-band-verse { font-size: 22px; }
}
/* the menu sheet: 家人專區 / 登入 at the top */
.more-account { display: flex; gap: 8px; margin: 0 0 14px; }
.more-account a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px; font-size: 18px; font-weight: 600; text-decoration: none; }
.more-account a[hidden] { display: none; }
.more-portal { flex: 2; background: var(--text); color: #fff; }
.more-portal:hover { text-decoration: none; opacity: 0.92; }
.more-join { flex: 1; border: 1px solid var(--line); color: var(--text); background: #fff; }
/* home hero: the other Sunday gatherings folded under the two services */
.hero2-more { margin: -8px 0 14px; color: rgba(255, 255, 255, 0.85); }
.hero2-more > summary { cursor: pointer; font-size: 16px; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 980px; border: 1px solid rgba(255, 255, 255, 0.35); }
.hero2-more > summary::-webkit-details-marker { display: none; }
.hero2-more > summary::after { content: "▾"; transition: transform 0.2s; }
.hero2-more[open] > summary::after { transform: rotate(180deg); }
.hero2-more .hero2-times { margin: 10px 0 0; }
/* home 教會公告, when empty: the next special events */
.an-upcoming { width: 100%; max-width: 640px; }
.an-up-h { margin: 0 0 10px; font-family: var(--serif); font-size: 22px; color: #231a10; }
.an-upcoming ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; text-align: left; }
.an-upcoming li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #ece3d2; }
.an-up-date { flex: none; display: flex; flex-direction: column; align-items: center; width: 52px; padding: 4px 0; border-radius: 10px; background: #fbeee0; color: #b5542a; font-size: 12px; line-height: 1.1; }
.an-up-date > b { font-family: var(--serif); font-size: 22px; }
.an-up-main { display: flex; flex-direction: column; min-width: 0; }
.an-up-main strong { font-size: 17px; }
.an-up-main small { color: var(--text-2); font-size: 14px; }
/* home: the welcome tile as an invitation */
.tile-welcome .hw-photo { margin: 0; border-radius: 18px; overflow: hidden; }
.tile-welcome .hw-photo img { display: block; width: 100%; height: auto; }
.hw-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.hw-links a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(243, 199, 126, 0.35); color: #fff; text-decoration: none; }
.hw-links a:hover { background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.hw-links b { font-family: var(--serif); font-size: 20px; color: #f3c77e; }
.hw-links span { font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.hw-addr { margin: 12px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.hw-addr a { color: #f3c77e; }

/* ---------- 第一次來 (/visit/): same warmth as 認識我們 ---------- */
.vt-hero .cl-jump { margin-top: 20px; }
.vt-hero .cl-jump a { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.vt-times { background: var(--ivory); scroll-margin-top: 70px; }
.vt-services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; }
.vt-service { display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 22px; border-radius: 22px; background: #fff; border: 1px solid #ece3d2; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.07); }
.vt-lang { margin: 0; font-size: 14px; letter-spacing: 0.2em; color: #8a5a00; }
.vt-service h3 { margin: 0; font-family: var(--serif); font-size: 26px; color: #231a10; }
.vt-time { margin: 0; font-family: var(--serif); font-size: 22px; color: #8e1a18; }
.vt-who, .vt-flow { margin: 0; color: #4a4036; line-height: 1.7; }
.vt-flow { font-size: 15px; color: var(--text-2); }
.vt-service > a { margin-top: auto; padding-top: 6px; font-weight: 600; }
.vt-all { max-width: 900px; margin: 16px auto 0; }
.vt-all ul { list-style: none; margin: 0; padding: 6px 18px 14px; }
.vt-all li { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #eadfcb; }
#where, #kids, #online { scroll-margin-top: 70px; }
.vt-addr { font-family: var(--serif); font-size: 20px !important; color: #231a10 !important; }
.vt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 !important; }
.vt-kids-fig { display: grid; place-items: center; background: linear-gradient(135deg, #e6f4ea, #fdf0d5); }
.vt-kids-fig > span { font-size: 96px; }
.vt-kids { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; }
.vt-kids b { display: inline-block; min-width: 150px; color: #2f7a4b; }
.vt-links a { margin-right: 14px; font-weight: 600; }
.vt-online { background: var(--ivory); }
.vt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.vt-two p { font-size: 18px; line-height: 1.8; color: #4a4036; }
.vt-video { border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.14); }
.vt-contacts { list-style: none; margin: 18px auto 0; padding: 0; max-width: 760px; display: grid; gap: 8px; text-align: left; }
.vt-contacts li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #ece3d2; }
.vt-contacts b { min-width: 120px; font-family: var(--serif); }
.vt-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.vt-teaser figure { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.12); }
.vt-teaser img { display: block; width: 100%; height: auto; }
.vt-teaser p { font-size: 18px; line-height: 1.8; color: #4a4036; }
@media (max-width: 760px) {
  .vt-services, .vt-two, .vt-teaser { grid-template-columns: 1fr; }
  .vt-all li { grid-template-columns: 1fr; gap: 0; }
  .vt-kids-fig > span { font-size: 64px; }
}

/* ---------- 中文事工 (/ministries/zh/): warm, a family across generations ---------- */
.mz-hero { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; color: #fff8ec; background: #3a2414; }
.mz-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mz-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60, 30, 8, 0.25) 0%, rgba(60, 30, 8, 0.55) 50%, rgba(45, 22, 6, 0.92) 100%); }
.mz-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 120px 24px 50px; }
.mz-eyebrow { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.2em; color: #f3c77e; }
.mz-eyebrow a { color: inherit; }
.mz-title { margin: 0; font-family: var(--serif); font-size: 58px; line-height: 1.15; letter-spacing: 0.08em; }
.mz-verse { margin: 14px 0 0; max-width: 640px; font-family: var(--serif); font-size: 18px; line-height: 1.8; color: #ffe9c7; }
.mz-verse > small { display: block; font-family: var(--font); font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; }
.mz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.mz-chips span { padding: 6px 14px; border-radius: 980px; background: rgba(255, 248, 236, 0.14); border: 1px solid rgba(243, 199, 126, 0.5); font-size: 15px; }
.mz-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.mz-ghost { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 980px; border: 1px solid rgba(255, 248, 236, 0.6); color: #fff8ec; text-decoration: none; }
.mz-ghost:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.mz-ghost-dark { color: var(--text); border-color: var(--line); background: #fff; }
.mz-sec { padding: 56px 22px; }
.mz-intro { background: var(--ivory); }
.mz-lede { max-width: 760px; margin: 0 auto 34px; font-size: 19px; line-height: 1.9; text-align: center; color: #3a3128; }
.mz-h { margin: 0 0 18px; font-family: var(--serif); font-size: 28px; color: #231a10; }
.mz-intro .mz-h { text-align: center; }
.mz-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mz-areas a { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 18px 40px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; color: var(--text); text-decoration: none; height: 100%; box-sizing: border-box; }
.mz-areas a:hover { border-color: #c99a5b; box-shadow: 0 10px 26px rgba(90, 50, 15, 0.08); text-decoration: none; }
.mz-num { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fbeedd; color: #a36312; font-family: var(--serif); font-size: 20px; font-weight: 700; }
.mz-areas strong { font-family: var(--serif); font-size: 20px; color: #231a10; }
.mz-areas small { font-size: 14px; line-height: 1.65; color: #6b5a44; }
.mz-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #c99a5b; font-size: 22px; }
.mz-closing { padding: 56px 22px; text-align: center; background: linear-gradient(160deg, #6b3a12 0%, #3a2414 100%); color: #ffe9c7; }
.mz-closing p { max-width: 760px; margin: 0 auto; font-family: var(--serif); font-size: 21px; line-height: 2; }
.mz-vine { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: center; padding: 18px; border-radius: 22px; background: #fffaf1; border: 1px solid #ece3d2; color: var(--text); text-decoration: none; }
.mz-vine:hover { text-decoration: none; border-color: #c99a5b; }
.mz-vine img { width: 100%; height: auto; border-radius: 14px; }
.mz-vine span { display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.8; color: #4a4036; }
.mz-vine b { font-family: var(--serif); font-size: 26px; color: #231a10; }
.mz-vine em { font-style: normal; font-weight: 600; color: #a36312; }
.mz-week { background: var(--ivory); }
.mz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.mz-times { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mz-times li { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 14px; background: #fff; border-left: 4px solid #b86a12; }
.mz-times span { font-size: 14px; color: var(--text-2); }
.mz-times b { font-size: 17px; }
.mz-contact { padding: 60px 22px 70px; background: linear-gradient(180deg, var(--ivory), #efe0c6); }
.mz-card { max-width: 620px; margin: 0 auto; padding: 32px; border-radius: 24px; background: #fffdf8; text-align: center; box-shadow: 0 20px 50px rgba(90, 50, 15, 0.12); }
.mz-k { margin: 0; letter-spacing: 0.25em; font-size: 14px; color: #a0703a; }
.mz-who { margin: 8px 0 0; font-family: var(--serif); font-size: 22px; }
.mz-card .mz-ctas { justify-content: center; }

/* ---------- English Ministry (/ministries/en/): fresh, English first ---------- */
@media (max-width: 760px) {
  .mz-title { font-size: 42px; }
  .mz-two, .mz-vine { grid-template-columns: 1fr; }
  .mz-closing p { font-size: 18px; }
}
/* 家人專區 tiles: thin line icons in the church's amber (grey when locked) */
.ph-tile-ico { background: #fbf1df; color: #a36312; font-size: 0; }
.ph-tile-ico svg { display: block; }
.ph-tile.is-locked .ph-tile-ico { color: #a8a196; background: #eeebe4; filter: none; opacity: 1; }
/* no emoji on the tiles: a small line lock, and plain 負責 lines */
.ph-tile.is-locked .ph-tile-name::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: 1px; background: #a8a196;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ph-owner::before, .ph-owner.is-none::before { content: none; }

/* ---------- 青少年事工 (/ministries/youth/): bold and bright, for teens ---------- */
.yt-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #2b1f5c 0%, #5b4b8a 45%, #c2537a 100%); }
.yt-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.55; }
.yt-blob-1 { width: 420px; height: 420px; right: -120px; top: -140px; background: #f0a04b; }
.yt-blob-2 { width: 260px; height: 260px; right: 18%; bottom: -120px; background: #4fd1c5; opacity: 0.45; }
.yt-blob-3 { width: 160px; height: 160px; left: 52%; top: 18%; background: #ffd166; opacity: 0.35; }
.yt-hero-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 80px 24px 70px; }
.yt-eyebrow { margin: 0 0 10px; font-size: 14px; letter-spacing: 0.18em; color: #ffd9e6; }
.yt-eyebrow a { color: inherit; }
.yt-title { margin: 0; font-family: var(--font); font-size: 76px; line-height: 0.98; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; }
.yt-sub { margin: 18px 0 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.yt-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.yt-facts > span { padding: 7px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); font-weight: 700; font-size: 15px; transform: rotate(-1.5deg); }
.yt-facts > span:nth-child(2) { transform: rotate(1.2deg); background: rgba(255, 209, 102, 0.3); }
.yt-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.yt-btn { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 14px; background: #ffd166; color: #2b1f5c; font-weight: 800; text-decoration: none; box-shadow: 0 6px 0 #c99a2e; }
.yt-btn:hover { text-decoration: none; transform: translateY(1px); box-shadow: 0 5px 0 #c99a2e; }
.yt-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: none; }
.yt-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.yt-verse { padding: 40px 22px; text-align: center; background: #2b1f5c; color: #fff; }
.yt-verse p { max-width: 760px; margin: 0 auto; font-family: var(--serif); font-size: 21px; line-height: 1.8; }
.yt-verse small { display: block; margin-top: 4px; font-family: var(--font); font-size: 14px; color: #ffd9e6; }
.yt-sec { padding: 56px 22px; background: #f8f5fd; }
.yt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.yt-card { padding: 28px; border-radius: 22px; background: #fff; scroll-margin-top: 80px; }
.yt-card-teen { border: 3px solid #5b4b8a; box-shadow: 8px 8px 0 #5b4b8a; }
.yt-card-parent { border: 1px solid #e3dcf0; }
.yt-k { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.15em; color: #c2537a; }
.yt-card h2 { margin: 6px 0 10px; font-family: var(--font); font-size: 26px; font-weight: 800; color: #2b1f5c; }
.yt-card p { font-size: 17px; line-height: 1.75; color: #4a4060; }
.yt-note { margin-bottom: 0; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #6b4e00 !important; font-weight: 600; }
.yt-links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 0; }
.yt-links a { font-weight: 700; }
.yt-more { background: #fff; padding-top: 40px; }
.yt-h { margin: 0 0 12px; font-family: var(--font); font-size: 26px; font-weight: 800; color: #2b1f5c; }
.yt-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.yt-list li { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 12px; border-left: 4px solid #c2537a; background: #fbf5f8; }
.yt-list > li > span { font-size: 14px; color: #6b5f80; }
.yt-soon { padding: 14px 18px; border-radius: 14px; background: #f8f5fd; color: #4a4060; }
.yt-related { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 700; }
@media (max-width: 760px) { .yt-title { font-size: 52px; } .yt-two { grid-template-columns: 1fr; } .yt-card-teen { box-shadow: 5px 5px 0 #5b4b8a; } .yt-blob-1 { width: 260px; height: 260px; } }

/* ---------- 中文事工 › 敬拜 (/ministries/zh/worship/): Sunday worship, the whole family ---------- */
.wp-center { text-align: center; }
.wp-small { font-size: 15px; color: var(--text-2); }
.wp-service { background: var(--ivory); }
.wp-time { display: flex; justify-content: center; margin: 0 0 40px; }
.wp-time p { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 18px 40px; border-radius: 20px; background: #fff; border: 1px solid #ece3d2; box-shadow: 0 12px 30px rgba(90, 50, 15, 0.08); }
.wp-time b { font-family: var(--serif); font-size: 34px; color: #8e1a18; }
.wp-time span { color: var(--text-2); }
.wp-flow { list-style: none; counter-reset: wp; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; }
.wp-flow li { counter-increment: wp; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 44px 14px 18px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; text-align: center; }
.wp-flow li::before { content: counter(wp); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: #fbeedd; color: #a36312; font-family: var(--serif); font-weight: 700; line-height: 26px; }
.wp-flow b { font-family: var(--serif); font-size: 19px; color: #231a10; }
.wp-flow span { font-size: 14px; line-height: 1.6; color: #6b5a44; }
.wp-family { background: #fff; }
.wp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.wp-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #fffaf1; border: 1px solid #ece3d2; border-top: 4px solid #b86a12; scroll-margin-top: 80px; }
.wp-card:nth-child(2) { border-top-color: #2f7d4f; background: #f5fbf6; }
.wp-card:nth-child(3) { border-top-color: #c2537a; background: #fdf6f9; }
.wp-when { margin: 0; font-size: 14px; font-weight: 600; color: #8a6a4a; }
.wp-card h3 { margin: 0; font-family: var(--serif); font-size: 23px; color: #231a10; }
.wp-card p { margin: 0; line-height: 1.7; color: #4a4036; }
.wp-card a { margin-top: auto; padding-top: 6px; font-weight: 600; }
.wp-details { background: var(--ivory); padding-top: 40px; }
.wp-narrow { max-width: 760px; }
.wp-details .wt-more { scroll-margin-top: 80px; }
.wp-detail { padding: 4px 18px 16px; line-height: 1.8; color: #4a4036; }
@media (max-width: 860px) { .wp-flow { grid-template-columns: 1fr 1fr; } .wp-cards { grid-template-columns: 1fr; } }
/* ---------- 中文事工 › each ministry (主日學, 關懷, 宣教, 禱告, 小組, 查經) ---------- */
.za-hero { min-height: 440px; }
.za-tag { margin: 8px 0 0; font-family: var(--serif); font-size: 22px; color: #ffe9c7; }
.za-about { background: var(--ivory); }
.za-paras { max-width: 760px; margin: 0 auto; }
.za-paras p { margin: 0 0 14px; font-size: 19px; line-height: 1.9; color: #3a3128; text-align: center; }
.za-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.za-terms article { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #ece3d2; border-top: 4px solid #b86a12; }
.za-terms h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; color: #231a10; }
.za-terms p { margin: 0; line-height: 1.8; color: #4a4036; }
.za-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; }
.za-times > div { display: flex; flex-direction: column; align-items: center; padding: 16px 30px; border-radius: 18px; background: #fff; border: 1px solid #ece3d2; box-shadow: 0 10px 26px rgba(90, 50, 15, 0.07); }
.za-times b { font-family: var(--serif); font-size: 24px; color: #8e1a18; }
.za-times span { color: var(--text-2); }
.za-contact { margin: 26px auto 0; max-width: 620px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid #ece3d2; text-align: center; }
.za-own { background: #fff; }
.za-next { background: var(--ivory); padding-top: 30px; padding-bottom: 40px; }
.za-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.za-links a { padding: 9px 18px; border-radius: 980px; background: #fff; border: 1px solid #e2d3b3; color: #6b3a12; font-weight: 600; text-decoration: none; }
.za-links a:hover { border-color: #a36312; }

/* 小組 card: the leaders' photo and 「想加入這個小組」 (src/assets/smallgroups.js) */
.sg-card-img { display: block; width: calc(100% + 52px); max-width: none; margin: -22px -26px 16px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 13px 13px 0 0; }
.sg-join { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line, #e5e0d6); }
.sg-join-form { display: grid; gap: 10px; }
.sg-join-form[hidden], .sg-join .pill[hidden] { display: none; }
.sg-join-lede { margin: 0; color: var(--text-2); font-size: 16px; }
.sg-join-form label { display: grid; gap: 3px; font-size: 15px; }
.sg-join-form input:not([type=checkbox]), .sg-join-form textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line, #d9d4ca); border-radius: 10px; font: inherit; }
.sg-join-form .sg-consent { display: flex; align-items: flex-start; gap: 8px; }
.sg-join-form .sg-consent input { margin-top: 4px; }
.sg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sg-join-acts { display: flex; align-items: center; gap: 12px; margin: 0; }
.sg-join-status { color: var(--text-2); font-size: 15px; }
.sg-join-done { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--cream); font-size: 16px; }
.sg-cardform { display: grid; gap: 10px; padding: 12px 16px 16px; }
.sg-cardform label:not(.ss-btn) { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.sg-cardform textarea, .sg-cardform input:not([type=file]) { font: inherit; font-size: 17px; font-weight: 400; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .sg-cardform .ss-grid2 { grid-template-columns: 1fr; } }
.sg-cardphoto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-cardphoto .sg-label { flex-basis: 100%; margin: 0; }
.sg-cardthumb { display: block; width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.sg-cardacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.sg-cardacts .am-status { margin: 0; }

/* ---------- English Ministry (/ministries/en/ and its six pages): bright and fresh, English first ----------
   Daylight colours: a sky wash, white cards, a clear blue and a warm sun accent — photos in full colour. */
.en-hero, .en-sec, .en-hero-home { --en-ink: #17324d; --en-text: #3d5166; --en-blue: #1f74c9; --en-sky: #eef6ff; --en-sun: #f4a62a; --en-line: #dbe8f5; }
.en-hero { background: linear-gradient(160deg, #e6f2ff 0%, #f6fbff 55%, #fff8ec 100%); color: var(--en-ink); }
.en-hero-inner { max-width: 1120px; margin: 0 auto; padding: 56px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
.en-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; box-shadow: 0 24px 50px rgba(31, 116, 201, 0.18); }
.en-eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--en-blue); }
.en-eyebrow a { color: inherit; }
.en-title { margin: 0; font-family: var(--font); font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: var(--en-ink); }
.en-tag { margin: 12px 0 0; font-size: 24px; font-weight: 600; color: var(--en-blue); }
.en-sub { margin: 16px 0 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: var(--en-text); }
.en-verse { margin: 22px 0 0; padding: 4px 0 4px 18px; border: 0; border-left: 4px solid var(--en-sun); border-radius: 0; background: none; font-family: var(--font); }
.en-verse p { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.7; color: var(--en-text); font-style: normal; }
.en-verse cite { display: block; font-family: var(--font); margin-top: 6px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--en-ink); }
.en-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.en-chips > span { padding: 6px 14px; border-radius: 980px; background: #fff; border: 1px solid var(--en-line); font-size: 15px; font-weight: 600; color: var(--en-ink); }
.en-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.en-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 980px; background: var(--en-blue); color: #fff; font-weight: 700; text-decoration: none; }
.en-btn:hover { text-decoration: none; background: #1863ad; }
.en-btn-line { background: #fff; color: var(--en-blue); border: 1.5px solid #bcd6f0; }
.en-btn-line:hover { background: var(--en-sky); }

.en-sec { padding: 56px 22px; background: #fff; }
.en-h { margin: 0 0 18px; font-family: var(--font); font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--en-ink); }
.en-about { text-align: center; }
.en-lede { max-width: 760px; margin: 0 auto; font-size: 20px; line-height: 1.75; color: var(--en-text); }
.en-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; }
.en-times > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 26px; border-radius: 18px; background: var(--en-sky); border: 1px solid var(--en-line); }
.en-times > div > span { font-size: 15px; color: var(--en-text); }
.en-times b { font-size: 20px; color: var(--en-ink); }
.en-own { background: var(--en-sky); }

.en-flow { list-style: none; counter-reset: en; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.en-flow li { counter-increment: en; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--en-line); }
.en-flow li::before { content: counter(en); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: var(--en-sun); color: #fff; font-weight: 800; }
.en-flow b { font-size: 19px; color: var(--en-ink); }
.en-flow li > span { color: var(--en-text); line-height: 1.5; }

.en-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0 0 30px; }
.en-card { display: flex; flex-direction: column; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--en-line); }
.en-card h3 { margin: 0 0 4px; font-size: 21px; color: var(--en-ink); }
.en-card p { margin: 0 0 10px; line-height: 1.6; color: var(--en-text); }
.en-card .en-when { color: var(--en-blue); font-weight: 600; }
.en-card-links { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: 14px; font-weight: 600; }

.en-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.en-facts div { padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--en-line); }
.en-facts div > span { display: block; font-size: 15px; color: var(--en-text); }
.en-facts b { font-size: 20px; color: var(--en-ink); }
.en-soon { margin: 16px 0 0; color: var(--en-text); }

.en-two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.en-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.en-list li { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--en-line); }
.en-list li > span { font-size: 14px; color: var(--en-text); }
.en-list b { font-size: 17px; color: var(--en-ink); }
.en-list small { font-size: 14px; color: var(--en-blue); }
.en-albums a { text-decoration: none; }
.en-more { margin: 0; font-weight: 600; }

.en-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.en-tiles a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--en-line); color: var(--en-ink); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.en-tiles a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31, 116, 201, 0.14); text-decoration: none; }
.en-tiles img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.en-tile-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 18px; }
.en-tile-body strong { font-size: 20px; }
.en-tile-body small { font-size: 15px; color: var(--en-text); }

.en-next { background: linear-gradient(180deg, #fff 0%, #fff8ec 100%); }
.en-ask { max-width: 620px; margin: 0 auto; padding: 30px; border-radius: 22px; background: #fff; border: 1px solid #f1e2c4; text-align: center; box-shadow: 0 14px 34px rgba(244, 166, 42, 0.12); }
.en-k { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #c47a0a; }
.en-who { margin: 8px 0 0; font-size: 22px; font-weight: 700; color: var(--en-ink); }
.en-ask .en-ctas { justify-content: center; }
.en-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; }
.en-links a { padding: 9px 18px; border-radius: 980px; background: #fff; border: 1px solid var(--en-line); color: var(--en-blue); font-weight: 600; text-decoration: none; }
.en-links a:hover { border-color: var(--en-blue); }

@media (max-width: 860px) {
  .en-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 16px 36px; }
  .en-hero-img { order: -1; aspect-ratio: 16 / 10; border-radius: 20px; }
  .en-title { font-size: 40px; }
  .en-flow { grid-template-columns: 1fr 1fr; }
  .en-two { grid-template-columns: 1fr; gap: 24px; }
  .en-tiles { grid-template-columns: 1fr 1fr; }
  .en-facts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .en-tiles, .en-flow { grid-template-columns: 1fr; } .en-sec { padding: 40px 16px; } }
/* 首頁: 每週聚會 left the 聖經書 — one link to the 行事曆 instead */
.hero2-week { margin: -6px 0 16px; font-size: 16px; }
.hero2-week a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 3px; }

/* 奉獻 /give/: quiet, like a page from the church — a photo and the verse, then plain sections with thin rules */
.gv-hero { position: relative; overflow: hidden; min-height: 380px; display: grid; place-items: center; padding: 70px 22px; text-align: center; color: #fff; background: #6b5a45; }
.gv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.gv-hero::after { content: ""; position: absolute; inset: 0; background: rgba(40, 26, 12, 0.32); }
.gv-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.gv-verse { margin: 0; font-family: var(--serif); font-size: 44px; line-height: 1.4; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.gv-ref { margin: 10px 0 0; font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.gv-page { max-width: 700px; margin: 0 auto; padding: 52px 22px 72px; color: #3a3128; }
.gv-lede { margin: 0 0 40px; font-family: var(--serif); font-size: 21px; line-height: 1.9; }
.gv-h { margin: 44px 0 6px; padding-bottom: 10px; border-bottom: 2px solid #3a2a1a; font-family: var(--serif); font-size: 28px; color: #2a1d10; }
.gv-way { padding: 22px 0; border-bottom: 1px solid #e4d9c6; }
.gv-way h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; color: #2a1d10; }
.gv-way p { margin: 0 0 8px; line-height: 1.8; }
.app-steps { margin: 0; padding-left: 1.4em; line-height: 1.9; font-size: 17px; }
.gv-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.gv-copy b { font-size: 20px; word-break: break-all; color: #2a1d10; }
.gv-addr { margin: 4px 0 10px; padding-left: 14px; border-left: 3px solid #c9b48f; font-style: normal; line-height: 1.7; }
.gv-note { font-size: 15px; color: #7a6a58; }
.gv-uses { margin: 0; display: grid; grid-template-columns: 8em minmax(0, 1fr); }
.gv-uses dt, .gv-uses dd { margin: 0; padding: 16px 0; border-bottom: 1px solid #e4d9c6; line-height: 1.7; }
.gv-uses dt { font-family: var(--serif); font-size: 19px; color: #2a1d10; }
.gv-prayer { margin: 48px 0 0; padding: 0; background: none; border-radius: 0; text-align: center; }
.gv-prayer p { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 2; color: #3a2a1a; }
.gv-help { margin: 36px 0 0; text-align: center; font-size: 15px; color: #7a6a58; }
@media (max-width: 600px) { .gv-verse { font-size: 32px; } .gv-uses { grid-template-columns: 1fr; } .gv-uses dt { padding-bottom: 0; border-bottom: 0; } .gv-uses dd { padding-top: 4px; } }

/* 首頁聖經書: the prayer requests, a few to a page (prayer-home.js) */
.bp-pray-list { display: flex; flex-direction: column; }
.bp-pray { padding: 14px 0; border-bottom: 1px solid #e3d4b4; }
.bp-pray:first-child { padding-top: 0; }
.bp-pray:last-child { border-bottom: 0; }
.bp-pray h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; line-height: 1.4; color: #8e1a18; }
.bp-pray p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.75; color: #2b2118; overflow-wrap: anywhere; }
.bp-pray .bp-pray-meta { margin-top: 6px; font-family: var(--font); font-size: 14px; color: #8a6a3a; }
.bp-pray-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #d9c89f; font-family: var(--serif); font-size: 17px; }
.bp-pray-foot a { color: #8e1a18; font-weight: 600; }
@media (max-width: 600px) { .bp-pray h4 { font-size: 20px; } .bp-pray p { font-size: 17px; line-height: 1.65; } }

/* ---------- 禱告牆 (/prayer/): bright and plain, after The Upper Room's prayer wall — a photo with a white card over its
   foot, a few words about the wall, then the requests as a simple list of white cards; warm red for the actions ---------- */
.pw { background: #f7f3ea; color: #2b2118; padding-bottom: 64px; }
.pw::before, .pw::after { content: none; }
.pw-hero { max-width: 1180px; margin: 0 auto; padding: 18px 16px 0; }
.pw-hero img { display: block; width: 100%; height: clamp(220px, 34vw, 400px); object-fit: cover; object-position: center; border-radius: 4px; }
.pw-head { position: relative; max-width: 820px; margin: -84px auto 0; padding: 28px 30px 26px; background: #fff; text-align: center; box-shadow: 0 2px 14px rgba(43, 33, 24, 0.10); }
.pw-h1 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: 0.06em; color: #2b2118; text-shadow: none; }
.pw .pw-verse { margin: 10px auto 0; max-width: 640px; color: #5a4a3a; font-style: italic; font-size: clamp(17px, 1.8vw, 19px); }
.pw .pw-verse cite { color: #8a6a3a; font-style: normal; font-size: 14px; }
.pw-start { margin: 22px 0 0; text-align: center; }
.pw-pour { border: 0; border-radius: 4px; padding: 12px 30px; background: #a31d1d; color: #fff; font: inherit; font-family: var(--serif); font-size: 18px; letter-spacing: 0.06em; cursor: pointer; box-shadow: none; }
.pw-pour:hover { background: #8e1a18; filter: none; }
.pw-pour-sm { padding: 9px 20px; font-size: 16px; }
/* 教會公禱: quiet and open, like a page of prayers — serif paragraphs with air between them, no numbers (those are the 週報's) */
.pw-church { max-width: 1040px; margin: 44px auto 0; padding: 38px 48px 30px; background: #fbf7ef; border-top: 1px solid #e4d7bf; border-bottom: 1px solid #e4d7bf; }
.pw-church-top { text-align: center; margin-bottom: 26px; }
.pw-church-h { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: .08em; }
.pw-church-date { margin: 6px 0 12px; color: #7a6a55; font-size: 15px; letter-spacing: .04em; }
.pw-church-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.pw-church.is-one .pw-church-cols { grid-template-columns: minmax(0, 680px); justify-content: center; }
.pw-church-col h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: .18em; color: #8a6420; }
.pw-church-col p { margin: 0; padding: 14px 0; font-family: var(--serif); font-size: 18.5px; line-height: 1.95; color: #2f2a24; }
.pw-church-col p + p { border-top: 1px solid #ece3d2; }
.pw-church-col h3 + div p:first-child, .pw-church-sub + div p:first-child { padding-top: 2px; }
.pw-church-col .pw-church-sub { padding: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.5; }
.pw-church-none { text-align: center; color: #7a6a55; }
.pw-church-past { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #ece3d2; font-size: 15px; }
.pw-church-past select { font: inherit; padding: 5px 8px; border: 1px solid #d9ccb5; border-radius: 6px; background: #fffdf8; }
.pw-church-past button:disabled { opacity: .35; cursor: default; }
.pw-church-login { margin: 18px 0 0; text-align: center; font-size: 15px; }
.pw-gate { max-width: 620px; margin: 0 auto; padding: 8px 0 24px; text-align: center; }
.pw-gate p { margin: 10px 0; }
@media (max-width: 760px) { .pw-church { margin: 28px 0 0; padding: 28px 18px 22px; } .pw-church-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pw-church-col p { font-size: 17.5px; line-height: 1.85; } }
.pw-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pw-note { margin: 10px 16px 0; text-align: center; font-size: 15px; color: #6b5a48; }
.pw-about { max-width: 820px; margin: 48px auto 0; padding: 0 22px; } /* at the end of the page: the prayers come first */
.pw-about h2, .pw-listh { margin: 0 0 8px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5a48; }
.pw-about p { margin: 0; font-size: 17px; line-height: 1.8; color: #3a2e22; }
.pw-body { max-width: 820px; margin: 40px auto 0; padding: 0 16px; }
.pw-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 12px; border-bottom: 1px solid #e3d8c4; }
.pw-listh { margin: 0; }
.pw-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 16px; }
.pw-tabs { justify-content: flex-start; gap: 4px 18px; margin: 0; }
.pw-tabs button { padding: 6px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: #5a4a3a; font: inherit; font-size: 17px; cursor: pointer; }
.pw-tabs button[aria-pressed="true"] { background: none; border-bottom-color: #a31d1d; color: #2b2118; font-weight: 600; }
.pw-search { display: block; margin: 0; flex: 0 1 260px; }
/* 類別 and 搜尋 side by side, once the wall needs them */
.pw-tools { display: flex; gap: 8px; flex: 0 1 440px; }
.pw-tools[hidden] { display: none; }
.pw-tools .pw-search { flex: 1 1 auto; }
.pw-catsel select { height: 100%; padding: 8px 10px; border: 1px solid #d9ccb6; border-radius: 4px; background: #fff; color: #2b2118; font: inherit; font-size: 16px; }
.pw .pw-status .pw-empty-go { margin-top: 14px; }
/* a few or more: two columns on a wide screen */
@media (min-width: 1000px) {
  .pw-body.is-many { max-width: 1120px; }
  .pw-body.is-many .pw-wall { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pw-body.is-many .pw-card { margin: 0; }
}
.pw-search input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #d9ccb6; border-radius: 4px; background: #fff; color: #2b2118; font: inherit; font-size: 16px; }
.pw .pw-status { color: #6b5a48; text-align: center; font-family: inherit; }
.pw .pw-status:empty { display: none; }
.pw .pw-wall { column-count: 1; display: grid; gap: 0; }
/* one request: a white card with a thin border and a coloured edge — red for a prayer, gold when answered, green for praise */
.pw .pw-card { margin: 0 0 -1px; padding: 22px 26px 18px; border: 1px solid #e3d8c4; border-left: 4px solid #a31d1d; border-radius: 0; background: #fff; box-shadow: none; }
.pw .pw-card.is-answered { border-left-color: #c9a046; background: #fff; }
.pw .pw-card.pw-k-praise, .pw .pw-card.pw-k-answered { border-left-color: #4f7a3a; background: #fff; }
.pw-card-h { margin: 0 0 6px; font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.35; color: #2b2118; }
.pw-card-h span { font-weight: 400; color: #5a4a3a; }
.pw .pw-text { font-family: inherit; font-size: 17px; line-height: 1.75; color: #2b2118; }
.pw .pw-expand { color: #1f4e9a; font-size: 16px; }
.pw .pw-meta { display: block; margin: 12px 0 0; font-size: 13px; color: #7a6a58; }
.pw .pw-praise { margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid #c9a046; border-radius: 0; background: none; font-size: 16px; color: #3a2e22; }
.pw .pw-acts { margin-top: 12px; padding-top: 0; border-top: 0; }
.pw .pw-pray, .pw .pw-open { border-radius: 4px; border: 1px solid #d9ccb6; background: #fff; color: #8e1a18; font: inherit; font-size: 15px; padding: 5px 14px; cursor: pointer; }
.pw .pw-pray[aria-pressed="true"] { background: #a31d1d; border-color: #a31d1d; color: #fff; font-weight: 400; }
.pw .pw-count { color: #7a6a58; }
.pw .pw-r { border-radius: 4px; background: #faf6ee; box-shadow: none; border: 1px solid #ece2d0; }
.pw .pw-r-update { background: #fbf1dc; border-color: #e3c98c; }
.pw .pw-quick button, .pw .pw-verses button { border-radius: 4px; border-color: #d9ccb6; background: #fff; }
.pw .pw-write input { border-radius: 4px; border-color: #d9ccb6; }
.pw .pw-write .pill { border-radius: 4px; background: #a31d1d; color: #fff; }
.pw .pw-todo { display: block; margin: 0 0 18px; padding: 10px 14px; border: 1px solid #e3c98c; border-radius: 4px; background: #fbf1dc; color: #7a4a0c; font-weight: 600; text-align: center; text-decoration: none; }
.pw .pw-todo[hidden] { display: none; }
.pw-foot { margin-top: 22px; text-align: center; }
.pw-foot a { color: #1f4e9a; }
.pw-more-wrap { margin: 18px 0 0; text-align: center; }
.pw-more { padding: 10px 26px; border: 1px solid #d9ccb6; border-radius: 4px; background: #fff; color: #8e1a18; font: inherit; font-size: 16px; cursor: pointer; }
.pw-more:hover { background: #faf6ee; }
.pw-more[hidden] { display: none; }
.pw-done-flame { color: #a31d1d; font-size: 30px; }
@media (max-width: 640px) {
  .pw-hero { padding: 0; }
  .pw-hero img { border-radius: 0; height: 220px; }
  .pw-head { margin: -48px 12px 0; padding: 20px 18px; }
  .pw .pw-card { padding: 18px 16px 14px; }
  .pw-card-h { font-size: 19px; }
  .pw-search { flex-basis: 100%; }
  .pw-tools { flex-basis: 100%; }
}
/* 英文事工 › Small Groups: each group's own photo (Church Center) */
.en-card.has-img { padding-top: 0; overflow: hidden; }
.en-card-img { display: block; width: calc(100% + 44px); max-width: none; margin: 0 -22px 16px; aspect-ratio: 16 / 10; object-fit: cover; }
.en-card.is-paused .en-card-img { filter: saturate(0.6); }
.en-paused { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 980px; background: #fff4dc; color: #a0670a; font-size: 13px; font-weight: 600; vertical-align: 3px; }
.en-leaders { font-size: 15px; color: var(--en-text); }
.rm-block.is-standing { background: #8a94a6; }
.rm-block.is-calendar { background: #5b7fa6; }
/* 教會行事曆 › 地點: 選房間 */
.ct-place input { width: 100%; box-sizing: border-box; }
.ct-rooms-btn { display: inline-block; margin: 4px 0 0; font-size: 14px; }
.ct-picker { width: min(560px, calc(100vw - 24px)); }
.ct-pick-group { margin: 0 0 12px; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.ct-pick-group legend { margin-bottom: 4px; padding: 0; font-weight: 700; color: var(--text); }
.ct-pick-group label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 400; }
.ct-pick-other { display: grid; gap: 4px; }
.ct-picker .ct-pick-group label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 400; color: var(--text); white-space: nowrap; }
.ct-picker .ct-pick-group input[type=checkbox] { width: auto; margin: 0; padding: 0; flex: none; }
.ct-clash { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff4e5; color: #9a4b00; font-size: 14px; line-height: 1.5; white-space: normal; }
.ct-clash[hidden] { display: none; }

/* 租用管理 (/portal/rentals/) */
.rt-tabs { margin: 0 0 12px; }
.rt-card { margin: 0 0 18px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.rt-card .wt-h { margin-top: 0; }
.rt-term { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)) minmax(0, 1fr); gap: 10px 14px; align-items: end; }
.rt-term label { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.rt-term input, .rt-term textarea, .rt-row input, .rt-row select { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-sizing: border-box; }
.rt-term textarea { width: 100%; }
.rt-week-wrap { overflow-x: auto; }
.rt-week { width: 100%; border-collapse: collapse; font-size: 14px; }
.rt-week th, .rt-week td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rt-week thead th { color: var(--text-2); font-weight: 600; }
.rt-week tbody th { white-space: nowrap; font-weight: 600; }
.rt-time { display: block; padding: 2px 6px; margin: 1px 0; border-radius: 6px; background: #e8edf4; color: #34465c; white-space: nowrap; }
.rt-list { display: grid; gap: 8px; margin: 0 0 12px; }
.rt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: var(--gray, #f5f5f7); }
.rt-row.is-past { opacity: 0.6; }
.rt-row .rt-title { flex: 1 1 200px; min-width: 0; }
.rt-rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 220px; }
.rt-chip { padding: 2px 10px; border-radius: 980px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.rt-row .ss-icon-btn { margin-left: auto; }
.rt-clash { flex-basis: 100%; margin: 4px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff4e5; color: #9a4b00; font-size: 14px; line-height: 1.5; }
.rt-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.rt-month-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.rt-month-head b { font-size: 18px; }
.rt-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rt-dow { padding: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: center; }
.rt-day { min-height: 74px; padding: 4px 6px; border-radius: 8px; background: var(--gray, #f5f5f7); font-size: 12px; overflow: hidden; }
.rt-day.is-blank { background: none; }
.rt-day.is-today { box-shadow: inset 0 0 0 2px var(--blue); }
.rt-day > b { display: block; font-size: 13px; color: var(--text-2); }
.rt-use { margin: 3px 0 0; padding: 3px 5px; border-radius: 6px; background: #dfe6f0; line-height: 1.3; }
.rt-use.is-event { background: #fbe7c6; }
.rt-use span { display: block; font-weight: 600; }
.rt-use small { display: block; color: #4a5568; }
@media (max-width: 700px) {
  .rt-term { grid-template-columns: 1fr 1fr; }
  .rt-term .rt-note { grid-column: 1 / -1; }
  .rt-day { min-height: 52px; font-size: 11px; }
  .rt-use small { display: none; }
}
/* 租用管理: approvals, dates, legend; the tenant's page (/rental/) */
.rt-wait { border-color: #f0c98a; background: #fffaf1; }
.rt-ev { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rt-ev:last-child { border-bottom: 0; }
.rt-ev.is-past { opacity: 0.6; }
.rt-ev-main { display: grid; gap: 2px; flex: 1 1 300px; }
.rt-ev-main small { color: var(--text-2); font-size: 14px; }
.rt-ev-main .rt-why { color: #9a4b00; }
.rt-ev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-h3 { margin: 22px 0 6px; font-size: 18px; }
.rt-ask { margin: 12px 0 0; }
.rt-days { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.rt-days label { display: flex; align-items: center; gap: 3px; font-size: 14px; }
.rt-until { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.rt-add > summary { cursor: pointer; margin: 10px 0; color: var(--blue); font-weight: 600; }
.rt-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rt-link input { flex: 1 1 320px; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.rt-use.is-regular { background: #dfe6f0; }
.rt-use.is-approved { background: #d9efe0; }
.rt-use.is-pending { background: repeating-linear-gradient(135deg, #fbe7c6 0 6px, #fdf1dc 6px 12px); }
.rt-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.rt-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-left: 6px; }
.rt-legend .is-regular { background: #dfe6f0; } .rt-legend .is-approved { background: #d9efe0; } .rt-legend .is-pending { background: #fbe7c6; }
.rn-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; background: none; padding: 0; }
.rn-form label { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.rn-form input:not([type=checkbox]) { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; box-sizing: border-box; }
.rn-form .rn-what, .rn-form .rn-rooms, .rn-form .rn-send { grid-column: 1 / -1; }
.rn-rooms { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.rn-rooms legend { font-size: 14px; color: var(--text-2); margin-bottom: 4px; }
.rn-bld { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.rn-bld b { flex-basis: 100%; font-size: 14px; }
.rn-bld label { display: flex; align-items: center; gap: 5px; font-size: 15px; color: var(--text); }
.rn-bld small { color: #9a4b00; font-size: 12px; }
.rn-send { margin: 0; }
.rn-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
@media (max-width: 700px) { .rn-form { grid-template-columns: 1fr 1fr; } }
.rt-ev-main .cs-badge, .rt-ev-main > b { justify-self: start; }
/* 租用 › 文件 */
.rn-check { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.rn-check li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 10px; background: var(--gray, #f5f5f7); }
.rn-check li > span:first-child { flex: 1 1 220px; }
.rn-check small { color: var(--text-2); }
.rn-docform { margin: 0 0 14px; }
.rn-form select { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.ph-tenant { margin-top: 18px; }
.rn-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.rn-tabs a { padding: 8px 18px; border-radius: 980px; border: 1px solid var(--line); background: #fff; color: var(--text); font-weight: 600; text-decoration: none; }
.rn-tabs a[aria-current="page"] { background: var(--text); color: #fff; border-color: var(--text); }
/* ECC statement: 我們已付款 */
.es-paid { margin-top: 6px; }
.es-paid > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 15px; }
.es-paid form { margin-top: 8px; }
.es-paid input { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.es-wait { color: #9a4b00; }
.eb-card.is-reported { border-left: 4px solid #f0b54a; }
.rt-time.is-gate { background: #fbe7c6; color: #7a4a06; }
/* 租用管理: removable chips, frequencies, the unsaved bar */
.rt-chip { display: inline-flex; align-items: center; gap: 4px; }
.rt-chip-x { border: 0; background: none; padding: 0 2px; font-size: 16px; line-height: 1; color: var(--text-2); cursor: pointer; }
.rt-chip-x:hover { color: #b3261e; }
.rt-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rt-time small { display: block; font-size: 11px; opacity: 0.8; }
.rt-dated { margin: 4px 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.rt-dated .is-gate b { color: #7a4a06; }
.rt-dirty { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: #fff8e8; border: 1px solid #f0c98a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.rt-dirty > span { font-weight: 600; color: #7a4a06; flex: 1 1 auto; }
/* 主日學與神學進深 › 神學進深 */
.za-theology { background: var(--ivory); }
.za-theo-lede { max-width: 720px; margin: 0 auto 18px; font-size: 18px; line-height: 1.8; color: #3a3128; }
.za-theo-dates { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 620px; display: grid; gap: 8px; }
.za-theo-dates li { display: grid; grid-template-columns: 9em 9em minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #ece3d2; }
.za-theo-dates b { color: #8e1a18; }
@media (max-width: 600px) { .za-theo-dates li { grid-template-columns: 1fr; } }

/* 溫度與空調 (/portal/hvac/) */
.hv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.hv-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.hv-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hv-card header strong { font-size: 18px; }
.hv-card p { margin: 4px 0; }
.hv-rooms { display: flex; flex-wrap: wrap; gap: 4px; }
.hv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin: 6px 0 10px; }
.hv-grid label, .hv-notes { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.hv-grid input, .hv-grid select, .hv-notes textarea { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.hv-rooms-edit { display: grid; gap: 6px; margin: 4px 0 10px; }
.hv-more { margin: 6px 0 10px; }
.hv-more > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 15px; }
.hv-cover { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.hv-cover li { display: grid; padding: 8px 12px; border-radius: 10px; background: #eef5ee; }
.hv-cover li.is-none { background: var(--gray, #f5f5f7); }
.hv-cover li.is-none small { color: #9a4b00; }
.hv-cover small { color: var(--text-2); font-size: 13px; }
.hv-modes { display: grid; gap: 6px; }
.hv-modes label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.hv-modes label span { display: grid; }
.hv-modes small { color: var(--text-2); }
.hv-days { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hv-days li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--gray, #f5f5f7); }
.hv-days li.is-hot { background: #fdf0e6; }
.hv-days small { color: var(--text-2); font-size: 13px; }
.hv-warn, .hv-days small.hv-warn { color: #9a4b00; }
.hv-plan, .hv-bills { width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 10px; }
.hv-plan td, .hv-bills td, .hv-bills th { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.hv-bills th { font-size: 13px; color: var(--text-2); font-weight: 600; }
.hv-plan .hv-at { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; width: 4em; }
.hv-plan tr.is-setback td { color: var(--text-2); }
.hv-bill-form { padding: 10px 12px; border-radius: 12px; background: var(--gray, #f5f5f7); }
.hv-reg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hv-reg input, .hv-reg select { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.hv-reg input[data-r="name"] { width: 9em; }
@media (max-width: 640px) { .hv-plan td:last-child { display: block; padding-top: 0; } .hv-plan tr { display: grid; grid-template-columns: 4em 1fr; } .hv-plan td:nth-child(3) { grid-column: 2; } .hv-bills { font-size: 14px; } }
.cf-form { display: grid; gap: 12px; max-width: 560px; }
.cf-form label { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.cf-form select, .cf-form input { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cf-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-votes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cf-vote { font: inherit; font-size: 15px; padding: 12px 4px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.cf-vote.is-on { color: #fff; border-color: transparent; }
.cf-v0.is-on { background: #2d6bb3; } .cf-v1.is-on { background: #5b93c9; } .cf-v2.is-on { background: #3f8a5a; } .cf-v3.is-on { background: #d08a3a; } .cf-v4.is-on { background: #b9542f; }
.cf-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cf-mine li { padding: 8px 12px; border-radius: 10px; background: var(--gray, #f5f5f7); }
@media (max-width: 480px) { .cf-votes { grid-template-columns: repeat(3, 1fr); } }

/* 維護 redesign: counts, categories, rows, the year grid, the guide */
.fa-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
.fa-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--gray, #f5f5f7); }
.fa-stat b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fa-stat span { font-size: 14px; color: var(--text-2); }
.fa-stat.is-bad:not(.is-zero) { background: #fdecec; } .fa-stat.is-bad:not(.is-zero) b { color: #c92a2a; }
.fa-stat.is-due:not(.is-zero) { background: #fff4e5; } .fa-stat.is-due:not(.is-zero) b { color: #b35c00; }
.fa-stat.is-zero b { color: var(--text-2); }
.fa-cats { margin-bottom: 18px; }
.fa-dot { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 980px; background: #c92a2a; color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.fa-sec { margin: 0 0 26px; }
.fa-clear { padding: 14px 16px; border-radius: 12px; background: #e6f4ea; color: #1e6b34; margin: 0; }
.fa-task h3 { margin: 8px 0 0; }
.fa-open { all: unset; cursor: pointer; font-size: 20px; font-weight: 700; }
.fa-open:hover { text-decoration: underline; }
.fa-cat-tag { font-size: 13px; color: var(--text-2); }
.fa-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fa-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.fa-row-main { all: unset; flex: 1; display: grid; grid-template-columns: 9em 1fr; gap: 12px; align-items: center; padding: 10px 4px; cursor: pointer; }
.fa-row-main:hover .fa-row-name b { text-decoration: underline; }
.fa-row-when { display: grid; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-row-when small, .fa-row-name small { font-size: 13px; color: var(--text-2); }
.fa-row-name { display: grid; gap: 1px; }
.fa-row-act { flex: none; }
.fa-year-wrap { overflow-x: auto; }
.fa-year { border-collapse: separate; border-spacing: 2px; font-size: 14px; min-width: 640px; width: 100%; }
.fa-year th { font-weight: 600; color: var(--text-2); font-size: 13px; text-align: center; padding: 2px; }
.fa-year tbody th { text-align: left; white-space: nowrap; padding-right: 8px; }
.fa-year tbody th .link-btn { font-size: 14px; color: var(--text); }
.fa-year td { height: 22px; border-radius: 4px; background: #f6f3ee; }
.fa-year th.is-now { color: var(--text); }
.fa-year td.is-now { box-shadow: inset 0 0 0 1px #c9b48a; }
.fa-year td.is-on { background: #6b8fb5; }
.fa-year td.is-on.c-hvac { background: #4a7fb5; } .fa-year td.is-on.c-roof { background: #8a6d4b; } .fa-year td.is-on.c-grounds { background: #5f8f5a; }
.fa-year td.is-on.c-safety { background: #c0563a; } .fa-year td.is-on.c-building { background: #8a7bb0; } .fa-year td.is-on.c-cleaning { background: #3f9c9a; }
.fa-dlg { width: min(640px, calc(100vw - 32px)); }
.fa-guide-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; }
.fa-facts { display: grid; grid-template-columns: 5em 1fr; gap: 6px 10px; margin: 0 0 10px; }
.fa-facts dt { color: var(--text-2); font-size: 14px; }
.fa-facts dd { margin: 0; }
.fa-note { padding: 8px 12px; border-radius: 10px; background: var(--gray, #f5f5f7); }
.fa-h3 { font-size: 17px; margin: 14px 0 6px; }
.fa-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.fa-safety { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #fff4e5; color: #6b4a12; }
.fa-safety ul { margin: 4px 0 0; padding-left: 18px; }
.fa-mini-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.fa-check { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0 10px; }
.fa-check legend { font-size: 14px; color: var(--text-2); padding: 0 4px; }
.fa-check label { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.fa-kind { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 6px 0 8px; }
.fa-kind legend { font-size: 14px; color: var(--text-2); margin-bottom: 4px; }
.fa-win { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.fa-win input { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; width: 5.5em; }
.fa-win input[name^="wname"] { flex: 1; width: auto; }
@media (max-width: 640px) { .fa-sum { grid-template-columns: repeat(2, 1fr); } .fa-row-main { grid-template-columns: 7.5em 1fr; } .fa-row-when { white-space: normal; } .fa-row-act .ss-btn { padding: 6px 10px; } }
.fa-dlg .fa-kind label, .fa-dlg .la-check, .fa-dlg .fa-check label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 16px; color: var(--text); }
.fa-dlg .fa-kind input, .fa-dlg .la-check input, .fa-dlg .fa-check input { width: auto; margin: 0; flex: none; }
.fa-dlg .fa-check label { align-items: flex-start; }
.fa-dlg .fa-check input { margin-top: 4px; }
.fa-stat.is-buy { text-decoration: none; color: inherit; }
.fa-stat.is-buy:not(.is-zero) { background: #e7f0fd; } .fa-stat.is-buy:not(.is-zero) b { color: #1c5fb8; }
.fa-sum { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) { .fa-sum { grid-template-columns: repeat(3, 1fr); } }
.fa-short { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: #fdecec; color: #a61e1e; font-size: 14px; }
.fa-buy { margin: 0 0 14px; }
.fa-row-static { cursor: default; }
.fa-stock { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.fa-need { min-width: 0; margin-bottom: 6px; }
.fa-stock th, .fa-stock td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fa-stock thead th { font-size: 13px; color: var(--text-2); font-weight: 600; }
.fa-stock .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-stock-cat th { background: var(--gray, #f5f5f7); font-size: 14px; }
.fa-stock tr.is-low td { background: #fff5f5; }
.fa-stock tr.is-low .num b { color: #c92a2a; }
.fa-stock-acts { white-space: nowrap; text-align: right; }
.fa-stock-acts .link-btn + .link-btn { margin-left: 10px; }
.fa-use { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.fa-dlg .fa-use select { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fa-dlg .fa-use input { width: 5.5em; flex: none; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.fa-every { display: flex; gap: 6px; } .fa-dlg .fa-every input { width: 6em; flex: none; } .fa-dlg .fa-every select { flex: 1; }
.fa-who-tabs { display: inline-flex; gap: 4px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
.fa-who-tabs button { padding: 5px 12px; border-radius: 980px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.fa-who-tabs button[aria-pressed="true"] { background: #2b5a8a; border-color: #2b5a8a; color: #fff; }
@media (max-width: 640px) { .fa-who-tabs { margin: 6px 0 0; padding: 0; border: 0; } }
.fa-who { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.fa-who.is-self { color: #2f6b3a; } .fa-who.is-vendor, .fa-who.is-both { color: #2b5a8a; }
.fa-trade-filter { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.fa-trade-filter select { font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fa-cons { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.fa-con { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.fa-con header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fa-con p { margin: 6px 0 0; }
.fa-dlg .fa-trades { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.fa-con header { flex-wrap: wrap; } .fa-con header b { flex: 1 1 auto; min-width: 8em; }
.fa-cost-total { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.fa-cost-total b { font-size: 32px; font-variant-numeric: tabular-nums; }
.fa-cost-total span { color: var(--text-2); }
.fa-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 110px; align-items: end; margin: 0 0 14px; }
.fa-months div { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.fa-months i { align-self: end; display: block; background: #4a7fb5; border-radius: 4px 4px 0 0; min-height: 2px; }
.fa-months small { font-size: 12px; color: var(--text-2); }
.fa-cost-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 22px; margin: 0 0 10px; }
.fa-cost-part ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fa-cost-part li { display: grid; grid-template-columns: 7em 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.fa-cost-part li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-cost-part li i { display: block; height: 10px; border-radius: 5px; background: #8fb0d3; }
.fa-cost-part li b { font-variant-numeric: tabular-nums; }
#fa-costs select[data-fa-year] { font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ecc-costs { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--gray, #f5f5f7); font-size: 14px; }
.ecc-costs ul { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 2px; }
.ecc-cost-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ecc-cost-add input { font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ecc-cost-add input[data-cost-amount] { width: 7em; }
.ecc-cost-add input[data-cost-payee] { flex: 1; min-width: 8em; }
.fa-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0 10px; } .fa-box legend { font-size: 14px; color: var(--text-2); padding: 0 4px; }
.fa-add { margin: 0 0 18px; }
.fa-esec { border-top: 1px solid var(--line); padding: 10px 0 4px; margin-top: 8px; }
.fa-esec h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 4px; }
.fa-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2b5a8a; color: #fff; font-size: 13px; font-weight: 700; }
.fa-esec textarea, .fa-esec input[type=number] { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.fa-tools { margin: 0; padding-left: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 14px; }
.fa-del { color: #c92a2a; margin-right: auto; }
/* 維護 tabs */
.fa-cats { gap: 6px; }
.fa-cats button { font-size: 17px; padding: 8px 18px; }
.fa-cats button small { color: inherit; opacity: .7; font-size: 13px; }
.fa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; }
.fa-toolbar select { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fa-items { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.fa-items th, .fa-items td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fa-items thead th { font-size: 13px; color: var(--text-2); font-weight: 600; }
.fa-items .fa-open { font-size: 16px; font-weight: 600; }
.fa-items .fa-who { margin: 0; font-size: 14px; }
.fa-quick { padding: 14px 16px; border-radius: 14px; background: #f3f7fc; border: 1px solid #d6e3f2; margin: 0 0 16px; display: grid; gap: 10px; }
.fa-quick label, .fa-dlg [data-freq-show] label { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.fa-quick input, .fa-quick select { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fa-quick .fa-kind label { display: flex; flex-direction: row; gap: 6px; align-items: center; color: var(--text); font-size: 16px; }
.fa-quick .fa-kind input { width: auto; }
.fa-quick .fa-every input { width: 6em; }
.fa-months-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fa-months-pick input { flex: 1; min-width: 8em; }
.fa-dlg select[name=freq] { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fa-row.is-late .fa-row-when b { color: #c92a2a; }
.fa-row.is-now .fa-row-when b { color: #b35c00; }
.fa-late-h { color: #c92a2a; }
.fa-first { display: flex; gap: 6px; align-items: center; }
.fa-first input { font: inherit; font-size: 14px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; }
.fa-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: 12px; background: #f3f7fc; border: 1px solid #d6e3f2; margin: 0 0 12px; }
.fa-export select { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 100%; }
.fa-export .la-check { margin: 0; }
.fa-row .fa-pick { flex: none; width: 18px; height: 18px; margin: 0 2px 0 4px; }
/* 排班總表 */
.ro-sheet-wrap { list-style: none; }
.ro-sheet-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ro-confirm-link { padding: 10px 14px; border-radius: 12px; background: #f3f7fc; border: 1px solid #d6e3f2; margin: 0 0 12px; }
.ro-confirm-link .la-link-row { margin-top: 6px; }
.ro-sheet-sum { margin: 0 0 8px; font-size: 15px; }
.ro-sheet { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.ro-sheet th, .ro-sheet td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ro-sheet thead th { font-size: 13px; color: var(--text-2); font-weight: 600; }
.ro-sheet tr.is-past td { opacity: .55; }
.ro-sheet tr.is-special td { background: #fffaf0; }
.ro-sdate { white-space: nowrap; }
.ro-person { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 10px 4px 0; }
.ro-pname { font-weight: 600; }
.ro-pstate { border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.ro-pnote { flex-basis: 100%; color: #a61e1e; font-size: 13px; }
.ro-sedit { font-size: 14px; }
[data-ro-paste] { width: 100%; box-sizing: border-box; font: 14px/1.4 ui-monospace, Menlo, monospace; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.rc-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.rc-me select { font: inherit; font-size: 17px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rc-day { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; margin: 0 0 10px; }
.rc-day.is-special { border-color: #e2c48a; background: #fffaf0; }
.rc-day h2 { margin: 0 0 8px; font-size: 19px; }
.rc-role { display: grid; gap: 6px; margin: 6px 0 0; }
.rc-role > span { font-size: 13px; color: var(--text-2); }
.rc-person { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-person.is-me { padding: 8px 10px; border-radius: 10px; background: #f3f7fc; }
.rc-person b { font-size: 17px; }
.rc-person textarea { flex-basis: 100%; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.ss-form .la-check input[type=checkbox], .ss-form .la-check input[type=radio] { width: auto; flex: none; margin: 0; }
/* 排班總表 (禱告會) */
.rs { list-style: none; }
.rs-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.rs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e67700; vertical-align: 2px; }
.rs-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 15px; }
.rs-st { display: inline-block; padding: 1px 9px; border-radius: 980px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rs-st.is-ok { background: #e6f4ea; color: #1e6b34; } .rs-st.is-off { background: #f1f1f3; color: #6e6e73; } .rs-st.is-bad { background: #fdecec; color: #c92a2a; }
.rs-nav { display: flex; gap: 16px; margin: 0 0 6px; font-size: 15px; }
.rs-table { display: grid; grid-template-columns: 9em repeat(var(--n, 2), minmax(0, 1fr)) minmax(0, 1fr); border-top: 1px solid var(--line); }
.rs-table.is-ed { grid-template-columns: 9em repeat(var(--n, 2), minmax(0, 1fr)) minmax(0, 1fr) auto; }
.rs-mini { grid-template-columns: 7em repeat(var(--n, 2), minmax(0, 1fr)); margin-top: 8px; }
.rs-head, .rs-row { display: contents; }
.rs-head > span { padding: 8px; font-size: 13px; color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--line); }
.rs-row > span { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.rs-row.is-past > span { opacity: .5; }
.rs-row.is-next > span { background: #f6f9fd; }
.rs-row.is-special > span { background: #fffaf0; }
.rs-date b { font-size: 16px; }
.rs-date small { color: var(--text-2); }
.rs-tag { display: inline-block; padding: 0 7px; border-radius: 6px; background: #fff0d6; color: #9a5b00; font-size: 12px; }
.rs-role { display: none; }
.rs-p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.rs-p b { font-size: 16px; }
.rs-p small { flex-basis: 100%; color: #a61e1e; font-size: 13px; }
.rs-none { color: #b0b0b5; }
.rs-note { font-size: 14px; color: var(--text-2); }
.rs-act { text-align: right; }
.rs-order p { margin: 2px 0; font-size: 14px; }
.rs-order b { display: inline-block; min-width: 6em; }
.rs-fs { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; display: grid; gap: 8px; }
.rs-fs legend { font-weight: 700; padding: 0 4px; }
.rs-fs select, .rs-fs input[data-rs-other], .rs-fs input[data-rs-why] { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.rs-states { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rs-dlg .rs-states label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; color: var(--text); }
.rs-dlg .rs-states input { width: auto; margin: 0; }
.rs-dlg textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 640px) {
  .rs-table, .rs-table.is-ed { display: block; border: 0; }
  .rs-head { display: none; }
  .rs-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rs-row > span { padding: 0; border: 0; background: none !important; }
  .rs-row.is-next { background: #f6f9fd; margin: 0 -8px; padding: 12px 8px; border-radius: 10px; }
  .rs-date { grid-column: 1; }
  .rs-act { grid-column: 2; grid-row: 1; }
  .rs-cell, .rs-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
  .rs-role { display: inline-block; min-width: 5.5em; color: var(--text-2); font-size: 13px; }
  .rs-note:empty { display: none; }
  .rs-mini .rs-row { grid-template-columns: 1fr; }
}
.rs-lists { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--gray, #f5f5f7); font-size: 14px; }
.rs-lists b { display: inline-block; min-width: 6.5em; }
.rs-dlg.rs-dlg-wide { width: min(760px, calc(100vw - 24px)); }
.rl { margin: 0 0 16px; }
.rl h3 { font-size: 17px; margin: 6px 0; }
.rl h3 small { color: var(--text-2); font-weight: 400; font-size: 14px; }
.rl-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.rl-t th, .rl-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.rl-t th { font-size: 12px; color: var(--text-2); font-weight: 600; }
.rl-n { color: var(--text-2); width: 2em; }
.rl-acts { white-space: nowrap; text-align: right; }
.rl-acts .link-btn { margin-left: 8px; }
.rl-acts .link-btn[disabled] { opacity: .25; cursor: default; }
.rl-add { display: flex; gap: 8px; margin-top: 8px; }
.rl-add input { flex: 1; font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.rl-note { padding: 8px 12px; border-radius: 8px; background: #fff4e5; color: #8a5100; font-size: 14px; }
.rs-rounds { margin: 24px 0 0; }
.rs-rounds h3 { font-size: 18px; margin: 0 0 8px; }
.rs-round { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 8px; background: #fff; }
.rs-round summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.rs-round[open] summary { margin-bottom: 8px; }
/* 場地預約 10/2026: tabs, the room finder, approvals */
.rm-tabs { margin: 0 0 14px; }
.rm-tabs button small { opacity: .7; font-size: 13px; }
.rm-when { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #f3f7fc; border: 1px solid #d6e3f2; }
.rm-when label { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.rm-when input, .rm-when select { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.rm-week { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; margin: 10px 0; }
.rm-week .wt-days { margin: 0; }
.rm-week > .ss-icon-btn { width: 34px; height: 44px; font-size: 20px; }
.rm-week > .ss-icon-btn:disabled, .wt-days > button:disabled { opacity: 0.35; cursor: default; }
.rm-quickdays { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.rm-quickdays button { font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.rm-quickdays button[aria-pressed="true"] { background: #2b5a8a; border-color: #2b5a8a; color: #fff; }
.rm-legend2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; margin: 4px 0 10px; }
.rm-legend2 small { color: var(--text-2); }
.rm-only { margin-left: auto !important; font-size: 14px; }
.rm-st { display: inline-block; padding: 2px 10px; border-radius: 980px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rm-st.is-free { background: #e3f4e7; color: #1e6b34; }
.rm-st.is-pending { background: #fff1d6; color: #9a5b00; }
.rm-st.is-partial { background: #fdf0e3; color: #a14d00; }
.rm-st.is-blocked { background: #ececef; color: #6e6e73; }
.rm-for { margin: 6px 0; font-size: 16px; }
.rm-bh { font-size: 15px; color: var(--text-2); margin: 16px 0 4px; }
.rm-rooms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rm-room-row { display: grid; grid-template-columns: minmax(8em, 13em) minmax(0, 1fr) 8.5em; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.rm-room-row.is-blocked .rm-room-main b { color: var(--text-2); }
.rm-room-main { display: grid; }
.rm-room-main b { font-size: 16px; }
.rm-room-main small { color: var(--text-2); font-size: 13px; }
.rm-room-st { display: grid; gap: 2px; justify-items: start; }
.rm-why { font-size: 13px; color: var(--text-2); }
.rm-why.is-pending { color: #9a5b00; }
.rm-room-act { text-align: right; } .rm-room-act .pill, .rm-room-act .ss-btn { white-space: nowrap; }
.rm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin: 0 0 8px; }
.rm-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.rm-legend i.is-ok { background: #1f6f78; } .rm-legend i.is-pending { background: #e9a443; } .rm-legend i.is-lease { background: #8a94a6; } .rm-legend i.is-cal { background: #5b7fa6; }
.rm-ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rm-ap { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; border-left: 5px solid #2f9e44; }
.rm-ap.is-compete { border-left-color: #e67700; }
.rm-ap.is-conflict { border-left-color: #c92a2a; }
.rm-ap-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 15px; }
.rm-ap-room { font-weight: 700; }
.rm-ap-title { display: block; font-size: 19px; margin: 4px 0 2px; }
.rm-ap-who { margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
.rm-ap-box { padding: 8px 12px; border-radius: 10px; font-size: 14px; margin: 0 0 8px; }
.rm-ap-box ul { margin: 4px 0 0; padding-left: 18px; }
.rm-ap-box.is-ok { background: #e6f4ea; color: #1e6b34; }
.rm-ap-box.is-bad { background: #fdecec; color: #8b1a1a; }
.rm-ap-box.is-warn { background: #fff4e5; color: #8a5100; }
@media (max-width: 640px) {
  .rm-when { grid-template-columns: 1fr 1fr; }
  .rm-room-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rm-room-st { grid-column: 1 / -1; grid-row: 2; }
  .rm-room-act { grid-row: 1; grid-column: 2; }
  .rm-only { margin-left: 0 !important; }
}
/* 分享排班 (/roster/view/) */
.rv-range { margin: 6px 0 0; color: inherit; opacity: .85; font-size: 16px; }
.rv-tools { margin: 0 0 10px; text-align: right; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rv-table th, .rv-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.rv-table th { font-size: 13px; color: var(--text-2); font-weight: 600; }
.rv-table tr.is-past td { opacity: .45; }
.rv-table tr.is-special td { background: #fffaf0; }
.rv-d { white-space: nowrap; }
.rv-d small, .rv-n { color: var(--text-2); font-size: 14px; }
@media print {
  .globalnav, .globalfooter, .fb-btn, .rv-tools, .rv-foot, .ab-rule { display: none !important; }
  .rv-hero { background: none !important; color: #000 !important; padding: 0 0 8px !important; min-height: 0 !important; }
  .rv-hero .ab-title, .rv-hero .ab-eyebrow, .rv-range { color: #000 !important; }
  .rv-section { padding: 0 !important; }
  .rv-table tr.is-past td { opacity: 1; }
  .rv-table th, .rv-table td { padding: 6px 8px; }
}
.pw-expand { margin: 2px 0 6px; font-size: 15px; }
.pw-card.is-target { box-shadow: 0 0 0 3px #e9c46a; }
.bp-pray-more { white-space: nowrap; font-size: .9em; }
.ble-item { grid-template-columns: 34px minmax(0, 1fr) auto; }
.ble-lead { display: grid; justify-items: center; gap: 4px; }
.ble-print { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--text-2); cursor: pointer; }
.ble-print input { margin: 0; }
.ble-item.is-noprint textarea { background: #f4f4f6; color: #8e8e93; }

/* ---------- 一起讀經 (/reading/, /reading/manage/) ---------- */
.rd { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; }
.rd h1 { font-family: var(--serif); font-size: clamp(30px, 4.5vw, 40px); letter-spacing: 0.06em; margin: 0 0 6px; color: var(--navy, #14213d); }
.rd-head { text-align: center; margin-bottom: 18px; }
.rd-verse { font-family: var(--serif); color: var(--text-2); font-size: 17px; margin: 0 0 18px; }
.rd-plans { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.rd-plans button { font: inherit; font-size: 16px; padding: 6px 14px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.rd-plans button[aria-pressed="true"] { background: var(--navy, #14213d); border-color: var(--navy, #14213d); color: #fff; }
.rd-plan-info { color: var(--text-2); font-size: 16px; margin: 0 0 6px; }
.rd-guest { background: var(--cream, #fbf6ee); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 16px; color: var(--text-2); }
.rd-status { text-align: center; color: var(--text-2); }
.rd-next { text-align: center; color: var(--text-2); font-size: 16px; margin: 0 0 14px; }
.rd-day { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.rd-day header { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.rd-date { margin: 0; color: var(--gold, #b8914a); font-size: 15px; font-weight: 500; }
.rd-day h2 { font-family: var(--serif); font-size: 26px; margin: 2px 0 8px; letter-spacing: 0.04em; }
.rd-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 16px; }
.rd-links a { font-weight: 500; }
.rd-file { display: inline-flex; align-items: center; gap: 4px; }
.rd-file .link-btn { color: var(--text-2); font-size: 14px; }
.rd-two { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.rd-big { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--gold, #b8914a); background: var(--cream, #fbf6ee); color: var(--navy, #14213d); font-size: 17px; font-weight: 600; flex: 1 1 200px; text-align: center; }
.rd-big:hover { text-decoration: none; background: #f6ecd9; }
.rd-big-pdf { border-color: var(--navy, #14213d); }
.rd-scripture { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.rd-oneday header { margin-bottom: 12px; }
.rd-sharelink { font: inherit; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 980px; border: 0; background: var(--navy, #14213d); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; }
.rd-sharelink:disabled { opacity: 0.6; }
.rd-upload { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 980px; border: 1px dashed var(--link); color: var(--link); font-size: 15px; font-weight: 500; cursor: pointer; }
.rd-upload:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.rd-who { margin: 0 0 6px; color: var(--text-2); font-size: 15px; }
.rd-who b { color: var(--text); }
.rd-text p { margin: 0 0 0.7em; line-height: 1.75; font-size: 17px; }
.rd-share { margin-bottom: 8px; }
.rd-share-form textarea, .rd-reply-form textarea, .rd-form input:not([type="checkbox"]), .rd-form select, .rd-form textarea { font: inherit; font-size: 16px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rd-replies { border-top: 1px dashed var(--line); padding-top: 10px; }
.rd-replies h3 { font-size: 15px; color: var(--text-2); margin: 0 0 8px; font-weight: 600; }
.rd-reply { padding: 8px 0; border-bottom: 1px solid var(--gray, #f6f2ea); }
.rd-reply .rd-text p { font-size: 16px; line-height: 1.65; margin-bottom: 0.4em; }
.rd-r-who { margin: 0 0 2px; font-size: 14px; color: var(--text-2); }
.rd-reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.rd-reply-form textarea { flex: 1; }
.rd-primary { background: var(--navy, #14213d); border-color: var(--navy, #14213d); color: #fff; }
.rd-primary:hover { background: #22345c; }
.rd-more-wrap { text-align: center; }
.rd-back { margin: 0 0 8px; }
.rd-badge { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 980px; background: var(--gray, #f6f2ea); color: var(--text-2); vertical-align: middle; }
.rd-mplan { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; background: #fff; }
.rd-mplan.is-archived { opacity: 0.7; }
.rd-macts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .rd-del { margin-left: auto; color: #b00020; }
.rd-mplan h2 { font-size: 21px; margin: 0 0 6px; }
.rd-mplan p { margin: 0 0 6px; font-size: 16px; color: var(--text-2); }
.rd-form { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: #fff; margin-top: 10px; }
.rd-form h2 { margin: 0 0 12px; font-size: 22px; }
.rd-field { display: block; margin-bottom: 12px; } .rd-field > span { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 4px; }
.rd-row { display: flex; flex-wrap: wrap; gap: 0 12px; } .rd-row .rd-field { flex: 1 1 180px; } .rd-row .rd-narrow, .rd-narrow { flex: 0 1 140px; max-width: 220px; }
.rd-leaders { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.rd-leaders li { display: grid; grid-template-columns: 26px 1fr auto; grid-template-areas: "n name acts" "n email acts"; gap: 0 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rd-leaders li.rd-l-none { display: block; border-style: dashed; }
.rd-l-n { grid-area: n; font-weight: 700; color: var(--gold, #b8914a); text-align: center; }
.rd-leaders .rd-l-name { grid-area: name; font: inherit; font-size: 16px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; width: 100%; box-sizing: border-box; }
.rd-leaders .rd-l-name:hover, .rd-leaders .rd-l-name:focus { border-color: var(--line); }
.rd-leaders small { grid-area: email; color: var(--text-2); font-size: 13px; padding-left: 7px; overflow-wrap: anywhere; }
.rd-l-acts { grid-area: acts; display: inline-flex; gap: 2px; }
.rd-l-acts .ss-icon-btn { width: 32px; height: 32px; min-width: 0; padding: 0; font-size: 15px; }
.rd-l-acts .ss-icon-btn:disabled { opacity: 0.3; }
.rd-check input { width: auto; margin-right: 6px; }
.rd-hint { color: #b00020; font-size: 15px; margin: -4px 0 8px; }
.rd-started { margin: -4px 0 12px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; }
.rd-started > summary { cursor: pointer; font-size: 15px; color: var(--link); }
.rd-started[open] > summary { margin-bottom: 10px; }
.rd-hint-ok { color: var(--navy, #14213d); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.rd-check { display: block; margin: 0 0 12px; font-size: 16px; }
.rd-form-acts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 0; }
@media (max-width: 600px) {
  .rd { padding: 24px 14px 48px; }
  .rd-day { padding: 16px; }
  .rd-day h2 { font-size: 23px; }
  .rd-reply-form { flex-direction: column; align-items: stretch; }
}

/* 一起讀經 › one chapter (/reading/chapter/): set for reading on a phone; --rc-step: A− / A+ */
.rc { --rc-step: 0; max-width: 680px; margin: 0 auto; padding: 18px 20px 56px; }
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.rc-back { font-size: 17px; }
.rc-size { display: inline-flex; border: 1px solid var(--line); border-radius: 980px; overflow: hidden; }
.rc-size button { font: inherit; font-size: 16px; min-width: 48px; min-height: 40px; border: 0; background: #fff; cursor: pointer; color: var(--text); }
.rc-size button + button { border-left: 1px solid var(--line); }
.rc-plan { margin: 0; color: var(--gold, #b8914a); font-size: 15px; font-weight: 500; }
.rc-title { font-family: var(--serif); font-size: calc(30px + var(--rc-step) * 2px); margin: 2px 0 12px; letter-spacing: 0.05em; color: var(--navy, #14213d); }
.rc-notes { margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.rc-notes-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--cream, #fbf6ee); font-size: 16px; font-weight: 500; }
button.rc-notes-btn { font: inherit; font-size: 16px; font-weight: 500; color: var(--link); cursor: pointer; }
.rc-notes-btn:hover { text-decoration: none; border-color: var(--gold, #b8914a); }
.rc-text { font-family: var(--serif); font-size: calc(19px + var(--rc-step, 0) * 2px); line-height: 1.95; color: var(--text); }
.rc-text p { margin: 0 0 0.9em; text-align: justify; }
.rc-text .rc-q { text-align: left; padding-left: 1.2em; }
.rc-h { font-family: var(--font); font-size: calc(17px + var(--rc-step, 0) * 1px); font-weight: 700; color: var(--navy, #14213d); margin: 1.4em 0 0.5em; letter-spacing: 0.04em; }
.rc-text > .rc-h:first-child { margin-top: 0.4em; }
.rc-d { font-size: 0.88em; color: var(--text-2); font-style: italic; }
.rc-v sup { font-family: var(--font); font-size: 0.58em; color: var(--gold, #b8914a); font-weight: 600; margin: 0 0.15em 0 0.25em; vertical-align: 0.55em; line-height: 0; }
.rc-v:target { background: rgba(243, 199, 126, 0.3); border-radius: 4px; }
.rc-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 980px; overflow: hidden; margin: 0 0 14px; }
.rc-lang button { font: inherit; font-size: 15px; padding: 7px 14px; border: 0; background: #fff; cursor: pointer; color: var(--text); }
.rc-lang button + button { border-left: 1px solid var(--line); }
.rc-lang button[aria-pressed="true"] { background: var(--navy, #14213d); color: #fff; }
.rc-pair { margin: 0 0 0.9em; }
.rc-pair p { margin: 0; text-align: left; }
.rc-en { font-family: Georgia, "Times New Roman", serif; font-size: 0.86em; line-height: 1.6; color: #3d3a35; margin-top: 0.15em !important; }
.rc-en sup, .rc-zh sup { font-family: var(--font); font-size: 0.6em; color: var(--gold, #b8914a); font-weight: 600; margin-right: 0.25em; vertical-align: 0.5em; line-height: 0; }
.rc-body[data-mode="both"] .rc-en sup { display: none; }
.rc-body[data-mode="en"] .rc-zh, .rc-body[data-mode="en"] .rc-h, .rc-body[data-mode="en"] .rc-d { display: none; }
.rc-body[data-mode="en"] .rc-en { font-size: 1em; line-height: 1.75; color: var(--text); }
.rc-pair:target { background: rgba(243, 199, 126, 0.3); border-radius: 4px; }
.rc-pager { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; }
.rc-pager a[data-rc-next] { margin-left: auto; text-align: right; }
.rc-source { margin: 22px 0 0; font-size: 13px; color: var(--text-2); text-align: center; }
@media (max-width: 600px) { .rc { padding: 12px 16px 48px; } }

/* 一起讀經 › 解經 PDF library (/reading/manage/) */
.rd-lib { padding-top: 8px; }
.rd-lib h2 { font-size: 24px; margin: 0 0 6px; }
.rd-lib-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0; }
.rd-lib-table th { text-align: left; font-weight: 600; color: var(--text-2); padding: 4px; border-bottom: 1px solid var(--line); }
.rd-lib-table td { padding: 4px; border-bottom: 1px solid var(--gray, #f6f2ea); vertical-align: middle; }
.rd-lib-table select, .rd-lib-table input { font: inherit; font-size: 15px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; max-width: 9em; }
.rd-lib-table input { width: 4.5em; }
.rd-lib-table tr.is-done { color: var(--text-2); }
.rd-q-name { overflow-wrap: anywhere; }
.rd-lib-book { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
.rd-lib-book summary { cursor: pointer; font-weight: 600; }
.rd-lib-book ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.rd-lib-book .rd-del { margin-left: 0; }

/* 音響 › 分享連結 (/portal/sound/) and the shared page (/sound/) */
.sd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; font-size: 15px; }
.sd-share [data-sd-share-body] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 260px; }
.sd-share input { flex: 1 1 220px; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--gray, #f6f2ea); }
.sd-public { max-width: 820px; margin: 0 auto; padding: 28px 18px 56px; }
.sd-status { text-align: center; color: var(--text-2); }

/* 場地預約 › 使用情形: 一天／一週 and 選房間 */
.rm-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.rm-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 980px; overflow: hidden; }
.rm-mode button { font: inherit; font-size: 15px; padding: 6px 16px; border: 0; background: #fff; cursor: pointer; color: var(--text); }
.rm-mode button + button { border-left: 1px solid var(--line); }
.rm-mode button[aria-pressed="true"] { background: var(--text); color: #fff; }
.rm-roompick { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: #fff; }
.rm-pick-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.rm-pick-b > b { flex: 0 0 100%; font-size: 14px; color: var(--text-2); }
.rm-pick-b button { font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.rm-pick-b button[aria-pressed="true"] { background: #2b5a8a; border-color: #2b5a8a; color: #fff; }
.rm-pick-acts { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 0; }
.rm-pick-hint { padding: 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--text-2); text-align: center; }
.rm-row.is-today .rm-label { font-weight: 700; color: #2b5a8a; }
.wt-days > button.is-today:not([aria-pressed="true"]) { border-color: #2b5a8a; }
.wt-days > button.is-today:not([aria-pressed="true"]) > b { color: #2b5a8a; }
.rm-findmode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.rm-findmode button { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; color: var(--text); }
.rm-findmode button b { font-size: 17px; }
.rm-findmode button small { font-size: 13px; color: var(--text-2); }
.rm-findmode button[aria-pressed="true"] { border-color: #2b5a8a; box-shadow: inset 0 0 0 1px #2b5a8a; background: #f2f6fb; }
.rm-bfilter { font-size: 14px; color: var(--text-2); } .rm-bfilter select { font: inherit; font-size: 14px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.rm-slot-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--gray, #f6f2ea); }
.rm-slot-day > b { min-width: 6.5em; font-size: 15px; }
.rm-slot { font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 980px; border: 1px solid #2f7d4f; background: #eef7f1; color: #1f5c39; cursor: pointer; }
.rm-slot:hover { background: #dff0e6; }
.rm-slot:disabled { cursor: default; }
.rm-slot-day .rm-why { flex: 0 0 100%; }

/* 迎新: when (最近一週 / years → months), 篩選 chips */
.nc-periods { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 10px 0 2px; scrollbar-width: thin; }
.nc-periods button { flex: none; font: inherit; display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; color: var(--text); }
.nc-periods button b { font-size: 16px; }
.nc-periods button small { font-size: 13px; color: var(--text-2); }
.nc-periods button[aria-selected="true"] { background: var(--navy, #14213d); border-color: var(--navy, #14213d); color: #fff; }
.nc-periods button[aria-selected="true"] small { color: rgba(255, 255, 255, 0.75); }
.nc-months { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.nc-months button { font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--text); }
.nc-months button small { color: var(--text-2); }
.nc-months button[aria-pressed="true"] { background: #2b5a8a; border-color: #2b5a8a; color: #fff; }
.nc-months button[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.8); }
.nc-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.nc-fbtn { font: inherit; font-size: 15px; font-weight: 600; padding: 6px 14px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--text); }
.nc-fbtn[aria-expanded="true"] { border-color: #2b5a8a; color: #2b5a8a; }
.nc-active { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nc-pill { font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 980px; border: 0; background: #e7eef7; color: #1d4470; cursor: pointer; }
.nc-fpanel { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: #fff; display: grid; gap: 10px; }
.nc-fgroup { display: grid; grid-template-columns: 3.6em 1fr; gap: 8px; align-items: start; }
.nc-flabel { font-size: 14px; font-weight: 600; color: var(--text-2); padding-top: 5px; }
.nc-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-fchips button { font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 980px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--text); }
.nc-fchips button[aria-pressed="true"] { background: #2b5a8a; border-color: #2b5a8a; color: #fff; }
.nc-mhead { font-size: 15px; margin: 16px 2px 6px; color: var(--navy, #14213d); position: sticky; top: 0; background: var(--bg, #fff); padding: 4px 0; z-index: 1; }
.nc-mhead small { font-weight: 400; color: var(--text-2); }
.nc-empty { padding: 18px; text-align: center; color: var(--text-2); border: 1px dashed var(--line); border-radius: 12px; }
.nc-short { align-self: end; }
.nc-chk-box { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.nc-chk-box h3 { margin: 0 0 4px; font-size: 18px; }
.nc-chk { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.nc-chk li { padding: 6px 8px; border: 1px solid var(--gray, #f6f2ea); border-radius: 8px; font-size: 15px; }

/* 歡迎新朋友 card: who came, one row each */
.kreg-people { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 10px; }
.kreg-person { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.kreg-person:first-child { grid-template-columns: 1fr; }
.kreg-person { box-sizing: border-box; min-width: 0; }
.kreg-person > label { display: grid; gap: 4px; min-width: 0; }
.kreg-person input[name="p-name"] { font: inherit; font-size: 20px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; width: 100%; box-sizing: border-box; min-width: 0; }
.kreg-rel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.kreg-rel label { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 980px; cursor: pointer; }
.kreg-rel label:has(input:checked) { border-color: #2b5a8a; background: #f2f6fb; }
.kreg-person [data-remove-person] { grid-row: 1; grid-column: 2; }
.kreg-add { font-size: 18px; padding: 10px 18px; }
.kreg-more { margin: 14px 0; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; }
.kreg-more > summary { cursor: pointer; font-size: 17px; color: var(--link); }
.kreg-more[open] > summary { margin-bottom: 10px; }
.kreg-more label, .kreg-more fieldset { display: grid; gap: 4px; margin-bottom: 10px; }
.kreg-wishes { border: 0; padding: 0; }
.kreg-consent { margin: 12px 0; font-size: 16px; }
.nc-group-list { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 4px; }
.nc-group-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nc-people-edit { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; margin-top: 8px; }
.nc-people-rows { padding-left: 1.4em; margin: 0; display: grid; gap: 6px; }
.nc-people-rows li input { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin-right: 6px; }
.nc-people-rows li select { font: inherit; font-size: 15px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; }

/* 報銷: what the AI read from the receipts */
.rb-ai { border: 1px solid #c9d8ea; background: #f2f6fb; border-radius: 10px; padding: 8px 12px; margin: 6px 0 12px; font-size: 15px; }
.rb-ai p { margin: 2px 0; }
/* 總表: several people a role, 詩班, a role's own line (講題) */
.rs-detail { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.rs-p.rs-choir b { color: #6b3fa0; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.rs-choir-chip[aria-pressed="true"] { background: #6b3fa0 !important; border-color: #6b3fa0 !important; }
.rs-addone { display: flex; gap: 6px; margin: 4px 0; }
.rs-addone input { flex: 1; font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.rs-fs [data-rs-detail] { width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }

/* 主日分工 (/portal/duty/) */
.dt { max-width: 760px; margin: 0 auto; padding: 28px 18px 56px; }
.dt h1 { font-family: var(--serif); font-size: clamp(28px, 4vw, 36px); margin: 4px 0 4px; color: var(--navy, #14213d); }
.dt-sub { color: var(--text-2); margin: 0 0 14px; }
.dt-back { font-size: 15px; margin: 0; }
.dt-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 980px; overflow: hidden; margin-bottom: 12px; }
.dt-tabs button { font: inherit; font-size: 15px; padding: 7px 16px; border: 0; background: #fff; cursor: pointer; color: var(--text); }
.dt-tabs button + button { border-left: 1px solid var(--line); }
.dt-tabs button[aria-selected="true"] { background: var(--navy, #14213d); color: #fff; }
.dt-status { color: var(--text-2); }
.dt-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.dt-card.is-mine { border-color: #2b5a8a; }
.dt-head { font: inherit; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; text-align: left; padding: 12px 14px; border: 0; background: none; cursor: pointer; color: var(--text); }
.dt-date b { font-size: 17px; }
.dt-group { font-weight: 600; }
.dt-count { font-size: 14px; color: var(--text-2); }
.dt-tag { white-space: nowrap; display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 980px; background: var(--gray, #f6f2ea); color: var(--text-2); }
.dt-tag.is-mine { background: #e7eef7; color: #1d4470; }
.dt-body { padding: 0 14px 14px; border-top: 1px solid var(--gray, #f6f2ea); }
.dt-task { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.dt-task h3 { margin: 0 0 6px; font-size: 17px; }
.dt-task h3 small { font-weight: 400; color: var(--text-2); font-size: 13px; }
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-add { display: flex; gap: 6px; margin-top: 6px; }
.dt-add input, .dt-note input { flex: 1; font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.dt-who { margin: 2px 0; }
.dt-instr { margin-top: 6px; font-size: 15px; }
.dt-instr summary { cursor: pointer; color: var(--link); }
.dt-instr div { margin-top: 6px; padding: 8px 10px; background: var(--cream, #fbf6ee); border-radius: 8px; line-height: 1.6; }
.dt-note { display: grid; gap: 4px; margin: 10px 0 4px; font-size: 14px; color: var(--text-2); }
.dt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.dt-saved { font-size: 14px; color: var(--text-2); }
.dt-elist { padding: 0; list-style: none; display: grid; gap: 10px; }
.dt-erow { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.dt-erow-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.dt-erow-top > input { flex: 1 1 160px; font: inherit; font-size: 16px; font-weight: 600; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.dt-people { font-size: 14px; color: var(--text-2); } .dt-people input { width: 4em; font: inherit; padding: 5px; border: 1px solid var(--line); border-radius: 8px; }
.dt-eacts { display: inline-flex; gap: 2px; margin-left: auto; }
.dt-eacts .ss-icon-btn { width: 32px; height: 32px; font-size: 15px; }
.dt-eacts .ss-icon-btn:disabled { opacity: 0.3; }
.dt-erow textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 560px) { .dt-head { grid-template-columns: 1fr auto; } .dt-count { grid-column: 1 / -1; } }

/* 教會財務 /portal/finance/ — tabs (finance.js): 總覽's month, 維修與維護, 財務手冊 */
.fi-tabs { margin: 0 0 20px; }
.fi-tabs button[hidden] { display: none; }
.fi-panel[hidden] { display: none; }
.fi-head { gap: 8px 12px; flex-wrap: wrap; }
.fi-head h2 { margin: 0; }
.fi-sec { margin: 0 0 32px; }
.fi-month-nav { align-items: center; gap: 6px; }
.fi-month-nav b { min-width: 7.5em; text-align: center; font-variant-numeric: tabular-nums; }
.fi-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.fi-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: #fff; margin: 0 0 12px; }
.fi-block h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 18px; }
.fi-block h3 b, .fi-group summary b, .fi-lines b, .fi-net b, .fi-total b, .fi-part b { font-variant-numeric: tabular-nums; }
.fi-block.is-in h3 b { color: #2b6a3a; }
.fi-block.is-out h3 b { color: #8a3b12; }
.fi-block.is-note { background: var(--ivory); }
.fi-group { border-top: 1px solid var(--line); }
.fi-group summary { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; }
.fi-group summary::-webkit-details-marker { display: none; }
.fi-group summary span::before { content: "▸ "; color: var(--text-2); }
.fi-group[open] summary span::before { content: "▾ "; }
.fi-group summary small { color: var(--text-2); }
.fi-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.fi-lines li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 15px; }
.fi-lines li:first-child { border-top: 0; }
.fi-d { flex: 0 0 3.6em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fi-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fi-t small { color: var(--text-2); }
.fi-net { display: flex; justify-content: space-between; max-width: 100%; padding: 10px 16px; margin: 0 0 12px; border-radius: 12px; background: var(--ivory); font-size: 17px; }
.fi-net b.is-neg { color: #a61e4d; }
.fi-soon { list-style: none; padding: 0; margin: 0; }
.fi-soon li { padding: 6px 0; border-top: 1px solid var(--line); }
.fi-soon li b { display: inline-block; min-width: 3.6em; font-variant-numeric: tabular-nums; }
.fi-soon li.is-past { color: var(--text-2); }
.fi-soon .is-late, .fi-note .is-late { color: #a61e4d; font-weight: 600; }
.fi-total { font-size: 18px; margin: 0 0 12px; }
.fi-total b { font-family: var(--serif); font-size: 26px; margin: 0 6px; }
.fi-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 16px; }
.fi-part { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: #fff; }
.fi-part h3 { font-size: 16px; margin: 0 0 8px; }
.fi-part ul { list-style: none; margin: 0; padding: 0; }
.fi-part li { display: grid; grid-template-columns: minmax(0, 7em) 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 15px; }
.fi-part li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-part li i { display: block; height: 8px; border-radius: 4px; background: var(--gold); width: var(--w); }
.fi-all > summary, .fi-archived > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.fi-book-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; }
.fi-book-tools input[type="search"] { flex: 1 1 220px; max-width: 360px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 980px; font-size: 16px; }
.fi-cats { margin: 0; }
.fi-cats small { opacity: .7; }
.fi-book { list-style: none; margin: 0 0 16px; padding: 0; }
.fi-note { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 8px; background: #fff; }
.fi-note.is-pinned { border-left: 4px solid var(--gold); }
.fi-note summary { padding: 12px 16px; cursor: pointer; list-style: none; }
.fi-note summary::-webkit-details-marker { display: none; }
.fi-note-h { display: flex; flex-direction: column; gap: 2px; }
.fi-note-h small { color: var(--text-2); font-size: 14px; }
.fi-pin { font-size: 13px; color: #8a5a0b; font-weight: 600; }
.fi-note-body { padding: 0 16px; line-height: 1.7; overflow-wrap: anywhere; }
.fi-note-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px 12px; margin: 0; }
.fi-archived .fi-lines li { align-items: center; }
@media (max-width: 734px) {
  .fi-head .la-tools { width: 100%; }
}

/* 維修與維護 /portal/facilities/ — 今天要做, the 維護 sub-views, links between repairs and upkeep (facilities-admin.js, ecc.js) */
.fa-dot.is-quiet { background: var(--text-2); }
.fa-sub { display: inline-flex; gap: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 980px; overflow: hidden; }
.fa-sub button { border: 0; background: #fff; padding: 7px 16px; font-size: 16px; cursor: pointer; color: var(--text); }
.fa-sub button + button { border-left: 1px solid var(--line); }
.fa-sub button[aria-pressed="true"] { background: var(--text); color: #fff; }
.fa-sub small { opacity: .7; }
.fa-today-sum { margin: 0 0 10px; color: var(--text-2); }
.fa-today-none { font-size: 18px; margin: 12px 0 4px; }
.fa-kind-tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 980px; line-height: 1.6; margin-bottom: 2px; }
.fa-kind-tag.is-repair { background: #fde8e0; color: #9a3412; }
.fa-kind-tag.is-maint { background: #e6efe3; color: #2f5d2a; }
.fa-today .fa-row-name small .cs-badge { margin-right: 4px; }
.fa-found { margin: 4px 0 0; }
.ecc-upkeep { margin: 6px 0 0; font-size: 15px; }
.ecc-item.is-flash { box-shadow: 0 0 0 3px var(--gold); transition: box-shadow .3s; }
.fa-row-when .fa-kind-tag { justify-self: start; }
.fa-maint-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.fa-maint-head .fa-sub { margin: 0; }
@media (max-width: 640px) {
  /* 維修與維護's lists on a phone: the date (and tag) over the name, so the name gets the width; the button to the right,
     or on its own line when there isn't room */
  .fa-rows .fa-row { flex-wrap: wrap; gap: 0 10px; }
  .fa-rows .fa-row-main { flex: 1 1 0; min-width: 58%; grid-template-columns: 1fr; gap: 4px; }
  .fa-rows .fa-row-when { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; white-space: normal; }
  .fa-rows .fa-row-act { margin-left: auto; padding-bottom: 8px; }
  .fa-today .fa-row-main { flex-basis: 100%; }
}

/* 認領維修 /portal/volunteer/ (volunteer.js) and who has a repair on the desk (ecc.js) */
.vo-sec { margin: 0 0 28px; }
.vo-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; background: #fff; }
.vo-card.is-urgent { border-left: 4px solid #c92a2a; }
.vo-card header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vo-card header b { font-size: 18px; }
.vo-meta { margin: 4px 0; color: var(--text-2); font-size: 15px; }
.vo-detail { margin: 6px 0; white-space: pre-line; }
.vo-steps summary { cursor: pointer; font-size: 15px; color: var(--text-2); }
.vo-steps ol { margin: 6px 0; padding-left: 1.4em; }
.vo-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vo-late { color: #a35d0f; font-weight: 600; }
.vo-others summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.vo-other { margin: 6px 0; }
.vo-notify { margin-top: 8px; }
.ecc-claim { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--ivory); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ecc-claim.is-needsVendor { background: #fdecec; }
.ecc-late { color: #c92a2a; font-weight: 600; }
.ecc-vendor { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ecc-vendor input { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; min-width: 9em; }
.vo-links a { font-weight: 600; }
.vo-recent { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.vo-recent .vo-links { margin: 2px 0 0; }
.fa-jobbuy, .ecc-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fa-jobbuy { margin: 10px 0; }
.ecc-buy { flex-basis: 100%; }
.rb-job { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--ivory); }
.rb-note { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--ivory); border-radius: 6px; }
/* ECC /portal/ecc/ — ECC's accounts: one line each (帳單, 報修, 文件), what needs something first (ecc-home.js) */
.eh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eh-row { display: grid; grid-template-columns: 5em 1fr auto; gap: 8px 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; background: #fff; }
.eh-row.is-bad { border-left-color: #c92a2a; }
.eh-row.is-soon { border-left-color: #e8a33d; }
.eh-row.is-ok { border-left-color: #5b8c51; }
.eh-title { margin: 0; font-size: 20px; }
.eh-state p { margin: 2px 0; }
.eh-state small { color: var(--text-2); }
.eh-bad { color: #c92a2a; font-weight: 600; }
.eh-soon { color: #a35d0f; font-weight: 600; }
.eh-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
  .eh-row { grid-template-columns: 1fr; }
  .eh-acts { justify-content: flex-start; }
}
.ab-eyebrow a[data-es-back], .ab-eyebrow a[data-rn-back] { color: inherit; }
.rt-as-tenant { align-self: center; margin-left: 6px; }
.eh-preview { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #eef3fb; border-left: 4px solid #3b6fb6; font-size: 15px; }
.eh-preview b { margin-right: 6px; }
.eh-acts .is-preview { opacity: .55; cursor: not-allowed; }

/* 廠商追蹤 (vendor-follow.js) */
.vf-who { margin: 0 0 8px; }
.vf-who p { margin: 4px 0 0; }
.vf-track { margin: 8px 0 12px; }
.vf-track small { color: var(--text-2); font-weight: 400; }
.vf-alert { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #8a1c1c; font-size: 15px; }
.vf-stage { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; display: grid; gap: 6px; }
.vf-stage legend { font-weight: 600; padding: 0 4px; }
.vf-stage .am-row { margin: 0 0 4px 24px; }
.vf-notes ul { margin: 6px 0; padding-left: 1.2em; font-size: 15px; }
.vf-notes small { color: var(--text-2); margin-right: 4px; }
.vf-release { margin-right: auto; }

/* 服事排班 /portal/rosters/ (rosters-hub.js) */
.rh-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; background: #fff; }
.rh-card .rm-head { margin: 0 0 6px; }
.rh-sunday p { margin: 6px 0; line-height: 1.7; }
.rh-k { display: inline-block; min-width: 7.5em; color: var(--text-2); font-size: 15px; margin-right: 6px; }
.rh-gap, .rh-warn { color: #a35d0f; font-weight: 600; }
.rh-soft { color: var(--text-2); }
.rh-ok { color: #2f6b2a; font-weight: 600; }
.rh-todo-card { border-left: 4px solid #e8a33d; }
.rh-todo { margin: 0; padding-left: 1.2em; }
.rh-todo li { margin: 4px 0; }
.rh-todo li.is-bad { color: #a61e4d; font-weight: 600; }
.rh-list { list-style: none; margin: 0; padding: 0; }
.rh-row { display: grid; grid-template-columns: minmax(8em, 1.2fr) 1fr 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rh-row:first-child { border-top: 0; }
@media (max-width: 640px) { .rh-row { grid-template-columns: 1fr auto; } .rh-row .rh-until, .rh-row > span:nth-of-type(2) { grid-column: 1; font-size: 14px; } .rh-row a { grid-row: 1; grid-column: 2; } }
.fa-teamfit { margin: 4px 0 10px; padding-left: 1.2em; font-size: 15px; }
.fa-teamfit li { margin: 4px 0; }

/* 週三禱告會 每週投影片 (prayer-slides.js) */
.ps-slides .ps-tmpl { padding: 8px 0 12px; border-bottom: 1px solid var(--line); }
.ps-items { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.ps-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ps-change summary, .ps-how summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.ps-how { margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: #eef3fb; font-size: 15px; }
.ps-how ol { margin: 4px 0 6px; padding-left: 1.4em; }
.ps-weeks { list-style: none; margin: 8px 0 0; padding: 0; }
.ps-week { padding: 10px 0; border-top: 1px solid var(--line); }
.ps-week.is-mine { background: #fffaf0; margin: 0 -10px; padding: 10px; border-radius: 10px; }
.ps-week.is-past { opacity: .7; }
.ps-week-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ps-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ps-up { cursor: pointer; }
.ms-error { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #8a1c1c; font-size: 15px; }

/* 小組 › 家庭與組員 (smallgroups-admin.js) */
.sg-tabs { margin: 8px 0 14px; }
.sg-fams { display: grid; gap: 12px; margin: 0 0 18px; }
.sg-fam { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: #fff; }
.sg-fam > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.sg-fam > header h3 { margin: 0; font-size: 20px; }
.sg-fam-acts { margin-left: auto; display: flex; gap: 6px; }
.sg-people { list-style: none; margin: 0; padding: 0; }
.sg-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sg-person:first-child { border-top: 0; }
.sg-person.is-off { opacity: .6; }
.sg-person .kr-open { grid-column: 1; text-align: left; }
.sg-person .nc-right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.sg-will { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.sg-will button { border: 1px solid var(--line); background: #fff; color: var(--text-2); border-radius: 980px; padding: 2px 10px; font-size: 14px; cursor: pointer; }
.sg-will button[aria-pressed="true"] { background: #e6efe3; border-color: #8db584; color: #2f5d2a; font-weight: 600; }
.sg-will button[aria-pressed="true"]::before { content: "✓ "; }
.sg-hist summary { cursor: pointer; font-size: 14px; color: var(--text-2); padding: 6px 0 0; }
.sg-hist ul { margin: 4px 0 0; padding-left: 1.2em; font-size: 14px; }
.sg-hist small { color: var(--text-2); margin-right: 4px; }
/* 待確認 (an old list's family) · 未分組 / 不再來教會 */
.sg-fam.is-pending { border-color: #e3c98c; background: #fffaf0; }
.sg-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #fbf1dc; color: #7a4a0c; font-size: 15px; }
.sg-pool { margin: 22px 0 0; display: grid; gap: 12px; }
.spa-sort { margin: 0 0 18px; padding: 12px 16px; border: 1px solid #e3c98c; border-radius: 12px; background: #fffaf0; }
.spa-sort .fa-h3 { margin-top: 0; }
/* 分區 */
.spa-dists { display: grid; gap: 14px; }
.spa-dist { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.spa-dist > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.spa-dist h3 { margin: 0; font-size: 20px; }
.spa-dist-groups { list-style: none; margin: 10px 0 0; padding: 0; }
.spa-dist-groups li { padding: 6px 0; border-top: 1px solid var(--line); }
.spa-dist-f { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.spa-dist-f legend input { font: inherit; font-weight: 600; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; }
.spa-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; }
.spa-checks .is-other { opacity: 0.45; }
.spa-inv { margin: 6px 0 0; }
.ble-card.is-synced .ble-tools, .ble-card.is-synced [data-add], .ble-card.is-synced [data-en-add="order"], .ble-card.is-synced .ble-actions, .ble-card.is-synced .ble-auto, .ble-card.is-synced .ble-hint, .ble-card.is-synced [data-song-add], .ble-card.is-synced [data-song-del] { display: none; }
.ble-card.is-synced input, .ble-card.is-synced textarea { background: #f6f3ec; color: #3a2e22; }
/* 關懷輔導 (smallgroups-view): to look at only — the page hides what changes things (the server refuses it too) */
#sg-app.is-sg-readonly button:not([data-sg-tab]):not([data-sg-edit]):not(.sg-will button), #sg-app.is-sg-readonly .sg-addlead { display: none; }
#sg-app.is-sg-readonly [data-sg-edit], #sg-app.is-sg-readonly .sg-will button { pointer-events: none; }
.spa-app.is-spa-readonly button:not([data-spa-tab]):not([data-vg-prev]):not([data-vg-next]):not([data-vg-season]):not([data-x]), .spa-app.is-spa-readonly .vg-notes, .spa-app.is-spa-readonly .vg-share { display: none; }
/* 職分管理 (positions.js) */
.po-search input { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 16px; }
.po-person { margin: 12px 0; padding: 12px 16px; border: 1px solid #e3c98c; border-radius: 12px; background: #fffaf0; }
.po-person p { margin: 4px 0; }
.po-kind { margin: 24px 0; }
.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.po-card { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.po-card > header { display: flex; align-items: baseline; gap: 8px; }
.po-card h3 { margin: 0; font-size: 18px; }
.po-scope { font-size: 13px; color: #6b5a48; }
.po-sens { padding: 1px 7px; border-radius: 999px; background: #fbe9e7; color: #8a2a1d; font-size: 12px; }
.po-count { margin-left: auto; min-width: 26px; padding: 0 7px; border-radius: 999px; background: var(--linen); color: #6e5127; font-size: 14px; font-weight: 700; text-align: center; }
.po-feats { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.po-feat { padding: 2px 8px; border-radius: 999px; background: #f4eee3; color: #5b4630; font-size: 13px; }
.po-feat.is-sens { background: #fbe9e7; color: #8a2a1d; }
.po-holders { list-style: none; margin: 0; padding: 0; }
.po-holders li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 5px 0; border-top: 1px solid #f0e6d4; font-size: 15px; }
.po-holders li > span:first-child { flex: 1; min-width: 0; }
.po-holders small { color: #6b5a48; }
.po-holder.is-hit { background: #fffaf0; }
.po-noacct { padding: 1px 7px; border-radius: 999px; background: #fdf1d8; color: #8a5a0b; font-size: 12px; }
.po-link { order: 1; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.po-link input { flex: 1; min-width: 0; max-width: 320px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.po-act { margin: 8px 0 0; font-size: 15px; }
.po-dists { display: grid; gap: 4px; border: 0; padding: 0; margin: 8px 0; }
.po-views { margin: 8px 0 16px; }
.po-field { display: grid; gap: 4px; margin: 0 0 12px; }
.po-field select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.po-leads summary { cursor: pointer; font-size: 14px; color: #6b5a48; padding: 4px 0; }
.po-leads .po-dists { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 260px; overflow: auto; }
.po-who { max-width: 460px; margin: 8px 0 16px; }
.po-form { display: grid; gap: 12px; }
.po-set { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.po-set legend { padding: 0 6px; font-weight: 700; }
.po-tick { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid #f0e6d4; }
.po-tick:first-of-type { border-top: 0; }
.po-tick small { grid-column: 2; color: #6b5a48; }
.po-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-role select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.po-sum { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
/* 聚會程序 (order.js) */
.od-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.od-day { padding: 6px 14px; border-radius: 980px; border: 1px solid #e2d3b3; background: #fff; color: #5b4630; font-size: 16px; cursor: pointer; }
.od-day[aria-pressed="true"] { background: #a35d0f; border-color: #a35d0f; color: #fff; }
.od-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.od-row { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.od-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.od-head [data-od-item] { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; font-weight: 600; }
.od-head [data-od-item][readonly] { border-color: transparent; background: transparent; }
.od-tools { display: flex; gap: 2px; }
.od-row [data-od-who] { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.od-songs { display: grid; gap: 6px; justify-items: start; }
.od-song { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; width: 100%; }
.od-song input { min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.od-sermon { margin: 0; }
.od-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
@media (max-width: 560px) { .od-song { grid-template-columns: minmax(0, 1fr) auto; } .od-song [data-od-link] { grid-column: 1; } }
/* 聚會人數 (headcount.js) */
.hc-week { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.hc-week input[type=date] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.hc-form { padding: 4px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hc-item { display: grid; gap: 2px; min-width: 0; }
.hc-ins { display: flex; gap: 10px; }
.hc-num { display: grid; gap: 2px; font-size: 13px; color: #6b5a48; }
.hc-num input { width: 92px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.hc-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.hc-scroll { overflow-x: auto; }
.hc-table { border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.hc-table th, .hc-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.hc-table th { font-weight: 600; color: #6b5a48; }
.pu-suns { display: grid; gap: 12px; margin: 12px 0; }
.pu-sun { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pu-sun.is-mine { border-color: #e3c98c; background: #fffaf0; }
.pu-sun.is-past { opacity: 0.75; }
.pu-sun > header { margin-bottom: 8px; font-size: 18px; }
.pu-speakers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; }
.pu-speakers label { display: grid; gap: 2px; font-size: 14px; color: #6b5a48; }
.pu-speakers select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.pu-state { margin: 10px 0 0; font-size: 15px; }
.pu-mine { padding: 12px 16px; border-radius: 14px; background: #fffaf0; border: 1px solid #e3c98c; }
.pu-mine .mp-h2 { margin: 0 0 6px; }
.pu-owners { margin: 22px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pu-own-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pu-own-list li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.pu-own-people { display: flex; flex-wrap: wrap; gap: 6px; }
.pu-past summary { cursor: pointer; color: #6b5a48; }
.ble-miss { color: #a31d1d; font-weight: 600; }
.ble-ok { color: #2e7d32; font-weight: 700; }
.ble-synced-sum li { margin: 2px 0; }
.ble-synced.is-unsynced { background: #fff4dc; color: #7a4a0c; }
.ble-synced.is-fixing { background: #e6f0fb; color: #1d4f86; } /* 校對修改: being corrected here, saved back to its source (the user, 11/12/2026) */
.ble-synced { margin: -2px 0 8px; padding: 6px 10px; border-radius: 8px; background: #eef4ea; color: #2f5a1f; font-size: 14px; }
.kreg-invite { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fffaf0; border: 1px solid #e3c98c; color: #5a3d0c; font-size: 17px; line-height: 1.7; }
.kreg-invite.is-warn { background: #fde2e2; border-color: #f0b4b4; color: #a31d1d; }
.sg-poolbox { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.sg-poolbox summary { cursor: pointer; font-size: 17px; }
.sg-poolul { list-style: none; margin: 8px 0 0; padding: 0; }
.sg-poolul li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.sg-poolul .kr-sub { display: block; }
.sg-loose { margin: 8px 0 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.sg-pline { display: grid; grid-template-columns: 1.2fr .9fr 1fr 1.2fr .8fr auto; gap: 6px; margin: 0 0 6px; align-items: center; }
.sg-pline input, .sg-pline select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 15px; min-width: 0; }
.sg-willing { border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sg-willing > div { display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media (max-width: 640px) { .sg-pline { grid-template-columns: 1fr 1fr; } .sg-person { grid-template-columns: 1fr; } .sg-person .nc-right { grid-column: 1; grid-row: auto; justify-content: flex-start; } }

/* 禱告牆's two tabs; each one's 管理 is a quiet line at its head, not a row of buttons */
.pw-main { display: flex; justify-content: center; gap: 36px; max-width: 760px; margin: 34px auto 0; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.pw-main button, .pw-main a { position: relative; padding: 10px 2px 12px; border: 0; background: none; color: var(--ink-2); font: inherit; font-family: var(--serif); font-size: 21px; letter-spacing: .06em; cursor: pointer; text-decoration: none; }
.pw-main a[hidden] { display: none; }
.pw-main button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.pw-main button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); }
.pw-main-n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-align: center; vertical-align: 2px; }
.pw-main-n[hidden] { display: none; }
.pw-panel { padding-top: 22px; }
.pw-panel[hidden] { display: none; }
.pw-panel .pw-church { margin-top: 0; }
.pw-panel .pw-body { margin-top: 0 !important; padding-top: 0 !important; }
.pw-panel .pw-church-date { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.pw-panel .pw-listhead .pw-note { margin: 0; }
.pw-admin { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 760px; margin: 0 auto 18px; padding: 0 16px; font-size: 15px; }
.pw-admin[hidden], .pw-admin a[hidden] { display: none; }
.pw-admin a { color: var(--link); text-decoration: none; }
.pw-admin a:hover { text-decoration: underline; }
.pw-review { margin: 0 0 18px; text-align: center; font-size: 15px; }
.pw-review > summary { display: inline-block; color: var(--link); cursor: pointer; list-style: none; }
.pw-review > summary::-webkit-details-marker { display: none; }
.pw-review > summary:hover { text-decoration: underline; }
.pw-review[open] { padding: 14px 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; text-align: left; }
.pw-review[open] > summary { margin-bottom: 12px; }
@media (max-width: 480px) { .pw-main { gap: 18px; margin-top: 24px; } .pw-main button, .pw-main a { font-size: 18px; letter-spacing: .02em; } }

/* 每日讀經｜一起讀經 */
.rd-switch { display: flex; justify-content: center; gap: 36px; max-width: 760px; margin: 18px auto 0; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.rd-switch[hidden] { display: none; }
.rd-switch a { position: relative; padding: 8px 2px 10px; color: var(--ink-2); font-family: var(--serif); font-size: 19px; letter-spacing: .06em; text-decoration: none; }
.rd-switch a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.rd-switch a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); }

/* 主日午餐: a short header, the tabs, one panel at a time on one warm background */
.mz-hero.lx-slim { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; padding: 28px 24px 24px; }
.lx-slim .mz-title { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 4px; }
.lx-slim .mz-hero-img { aspect-ratio: 16 / 9; max-height: 210px; border-radius: 12px; }
.lx-slim .mz-verse { margin-bottom: 0; }
.pw-main.lx-tabs { max-width: none; margin: 0; padding: 16px 16px 0; align-items: center; gap: 22px; border-bottom: 0; background: #f7efe2; }
.pw-main.lx-tabs[hidden] { display: none; }
.lx-tabs button.pub-manage, .pw-main.lx-tabs a.pub-manage { margin: 0; font-family: inherit; font-size: 16px; letter-spacing: 0; }
.lx-tabs button.pub-manage[hidden] { display: none; }
.lx-tabs button.pub-manage[aria-selected="true"] { background: #fff; color: var(--primary); }
.lx-tabs button.pub-manage[aria-selected="true"]::after { content: none; }
.lx-tabs:not([hidden]) ~ .lx-menu .lx-menu-head { display: none; }
.lx-menu[hidden], .lx-grace[hidden], .lx-manage[hidden] { display: none; }
.lx-tabs:not([hidden]) ~ .lx-menu { padding-top: 24px; }
.lx-manage { padding: 22px 16px 56px; background: #f7efe2; }
.lx-manage-in { max-width: 980px; margin: 0 auto; padding: 22px 24px 26px; border-radius: 18px; border: 1px solid #ead9bb; background: #fffdf8; }
.lu-empty { max-width: 560px; margin: 8px auto 22px; padding: 26px 22px; border-radius: 18px; border: 1px solid #ead9bb; background: #fffdf8; text-align: center; }
.lu-empty .lu-lede { margin-bottom: 6px; font-family: var(--serif); font-size: 23px; color: #3a1f0b; }
.lu-empty .muted { margin: 0; }
.lx-menu .lu-score { margin-top: 22px; }
.lx-menu { padding-bottom: 36px; }
@media (max-width: 760px) {
  .mz-hero.lx-slim { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px 18px; }
  .lx-slim .mz-hero-img { grid-row: 2; max-height: 170px; }
  .pw-main.lx-tabs { flex-wrap: wrap; gap: 10px 14px; }
  .lx-manage-in { padding: 16px 12px 20px; }
}

/* 特別活動 (redesigned 11/2026): cards for what's coming, 過去的活動, a header in the event's look, a side for those in charge */
.sv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important; gap: 16px !important; }
.sv-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px !important; padding: 16px 18px !important; border-radius: 14px !important; border: 1px solid #e6dcc9; background: #fffdf8 !important; }
.sv-card:not(:has(.sv-card-pic)) { grid-template-columns: minmax(0, 1fr); }
.sv-card:hover { text-decoration: none; border-color: #cdb889; }
.sv-card-pic { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid #e3b24c; }
.sv-card-in { display: grid; gap: 3px; min-width: 0; }
.sv-card.has-look { background: var(--sj-bgi) !important; border-color: var(--sj-line); color: var(--sj-ink); }
.sv-card.has-look small, .sv-card.has-look .sv-need { color: var(--sj-gold); }
.sv-card.has-look b { color: var(--sj-title); }
.sv-card.has-look .sv-card-pic { border-color: var(--sj-gold); }
.sv-past { margin: 26px 0 0; }
.sv-past > summary { cursor: pointer; font-family: var(--serif); font-size: 19px; color: var(--ink-2); }
.sv-past ul { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.sv-past a { display: flex; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.sv-past a span { flex: none; min-width: 11em; color: var(--ink-2); }
.sv-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin: 0 0 22px; padding: 24px 26px; border-radius: 18px; border: 1px solid #ead9bb; background: #fffdf8; }
.sv-hero:not(:has(.sv-hero-pic)) { grid-template-columns: minmax(0, 1fr); }
.sv-hero .sv-title { margin: 2px 0; font-size: clamp(26px, 4vw, 38px); }
.sv-hero .sv-sub { margin: 0 0 4px; font-family: "Cormorant Garamond", var(--serif); font-style: italic; font-size: 20px; color: #a0703a; }
.sv-hero .sv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.sv-hero .sv-acts button { margin: 0; white-space: nowrap; }
.sv-hero-pic { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid #e3b24c; padding: 4px; }
.sv-hero.has-look { background: var(--sj-bgi); border-color: var(--sj-line); color: var(--sj-ink); }
.sv-hero.has-look .sv-title { color: var(--sj-title); } .sv-hero.has-look .sv-kind, .sv-hero.has-look .sv-sub { color: var(--sj-gold); } .sv-hero.has-look .sv-when { color: var(--sj-ink); }
.sv-hero.has-look .sv-hero-pic { border-color: var(--sj-gold); }
.sv-type-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.sv-type-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-bottom: 1px solid #efe4cd; }
.sv-type-list li > span { min-width: 7em; font-weight: 600; }
.sv-look { display: grid; gap: 4px; max-width: 420px; margin-bottom: 4px; }
.sv-h4 { margin: 16px 0 6px; font-size: 16px; }
.sv-pics { margin: 4px 0 8px; padding: 10px 14px 12px; border: 1px solid #ead9bb; border-radius: 14px; }
.sv-pics legend { padding: 0 6px; font-weight: 600; }
.sv-pics-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-pic { position: relative; display: grid; justify-items: center; gap: 4px; width: 88px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.sv-pic input { position: absolute; opacity: 0; }
.sv-pic img, .sv-pic-none { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; box-shadow: 0 0 0 1px #e2d3b6; }
.sv-pic-none { background: linear-gradient(135deg, transparent 48.5%, #c9b48a 49% 51%, transparent 51.5%), #f6f1e7; }
.sv-pic.is-on img, .sv-pic.is-on .sv-pic-none { border-color: var(--primary); }
.sv-pic.is-on small { color: var(--primary); font-weight: 600; }
.sv-pic:focus-within img, .sv-pic:focus-within .sv-pic-none { outline: 2px solid var(--primary); outline-offset: 2px; }
.sv-pics-own { display: grid; gap: 4px; margin-top: 10px; max-width: 420px; }
.sv-type-list select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.sv-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 26px; align-items: start; }
.sv-side .sv-manage { margin-top: 0; position: sticky; top: 76px; }
.sv-plan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sv-plan li { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sv-plan b { color: var(--primary); }
.sv-groups { margin: 2px 0 0; font-size: 15px; color: #7a4e14; }
.sv-ended { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #f3ece0; color: var(--ink-2); }
.sv-editor[hidden], .sv-page[hidden] { display: none; }
.sv-form { max-height: none; } /* a page here, not a dialog: the dialog form's one-screen height cut it off and the footer showed through (11/2026) */
.sv-form .ss-grid2 { margin-bottom: 10px; }
.sv-form-body > label { display: grid; gap: 4px; margin-bottom: 10px; }
.sv-form-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); background: var(--paper); }
@media (max-width: 860px) { .sv-body { grid-template-columns: minmax(0, 1fr); } .sv-side .sv-manage { position: static; } }
@media (max-width: 560px) { .sv-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; } .sv-hero-pic { width: 110px; height: 110px; grid-row: 1; } .sv-plan li { grid-template-columns: 7.5em minmax(0, 1fr); } .sv-past a span { min-width: 8.5em; } }

/* 特別活動: 分享連結 for those in charge */
.sv-settings { margin: 0 0 18px; padding: 6px 20px 16px; border: 1px solid #ead9bb; border-radius: 16px; background: #fffdf8; }
.sv-settings[hidden] { display: none; }
.sv-manage { margin: 18px 0 8px; padding: 6px 20px 18px; border: 1px solid #ead9bb; border-radius: 16px; background: #fffdf8; }
.sv-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid #efe4cd; }
.sv-link > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.sv-link code { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.sv-link-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* the page a link opens (/special/join/): an invitation — plain (ivory) or the event's look (.is-plum, after the poster) */
.sj-page { --sj-bg: var(--paper); --sj-ink: var(--ink); --sj-soft: var(--ink-2); --sj-gold: #a0703a; --sj-line: var(--rule); --sj-card: #fffdf8; background: var(--sj-bg); color: var(--sj-ink); }
/* 風格庫 (the user, 11/2026): designed once, chosen per event (specialevents.js THEMES); the same colours on the
   invitation (.sj-page), the event's header (.sv-hero) and its card (.sv-card). --sj-gold is each look's accent. */
.is-plum { --sj-bg: #34122b; --sj-bgi: radial-gradient(120% 90% at 30% 0%, #4a1a3d 0%, #34122b 55%, #26091f 100%); --sj-ink: #f6ecdc; --sj-soft: #e6d6c2;
  --sj-gold: #e3b24c; --sj-title: #e3b24c; --sj-line: rgba(227, 178, 76, .35); --sj-card: rgba(255, 255, 255, .06); --sj-btn: #e3b24c; --sj-btn-ink: #34122b; }
.is-xmas { --sj-bg: #10392b; --sj-bgi: radial-gradient(120% 90% at 30% 0%, #1d5a43 0%, #10392b 55%, #0a281e 100%); --sj-ink: #f7f0e3; --sj-soft: #dfe5da;
  --sj-gold: #e2b85a; --sj-title: #f1d38a; --sj-line: rgba(226, 184, 90, .38); --sj-card: rgba(255, 255, 255, .06); --sj-btn: #b8322f; --sj-btn-ink: #fff; }
.is-easter { --sj-bg: #fffdf8; --sj-bgi: linear-gradient(180deg, #ffffff 0%, #fbf5e6 100%); --sj-ink: #2e2618; --sj-soft: #5e513d;
  --sj-gold: #b38a35; --sj-title: #8c6a22; --sj-line: rgba(179, 138, 53, .38); --sj-card: #fff; --sj-btn: #b38a35; --sj-btn-ink: #fff; }
.is-outdoor { --sj-bg: #e9f3f0; --sj-bgi: linear-gradient(180deg, #f3f9f7 0%, #dcebe6 100%); --sj-ink: #15332d; --sj-soft: #3b5a53;
  --sj-gold: #2f7d6d; --sj-title: #1f5d50; --sj-line: rgba(47, 125, 109, .3); --sj-card: #fff; --sj-btn: #2f7d6d; --sj-btn-ink: #fff; }
.is-solemn { --sj-bg: #f4f3f0; --sj-bgi: #f4f3f0; --sj-ink: #262624; --sj-soft: #4f4e4a;
  --sj-gold: #6d6a63; --sj-title: #2f2e2b; --sj-line: #d3cfc7; --sj-card: #fff; --sj-btn: #45433f; --sj-btn-ink: #fff; }
.is-spring { --sj-bg: #7e1416; --sj-bgi: radial-gradient(120% 90% at 30% 0%, #9b1c1f 0%, #7e1416 55%, #5c0c0f 100%); --sj-ink: #fff4e0; --sj-soft: #f6dcc0;
  --sj-gold: #f0c25a; --sj-title: #f6d27a; --sj-line: rgba(240, 194, 90, .45); --sj-card: rgba(255, 255, 255, .07); --sj-btn: #f0c25a; --sj-btn-ink: #6a0f12; }
.is-moon { --sj-bg: #121c36; --sj-bgi: radial-gradient(120% 90% at 30% 0%, #1d2a4d 0%, #121c36 55%, #0b1226 100%);
  --sj-ink: #eef1f8; --sj-soft: #c9d2e6; --sj-gold: #f2d58a; --sj-title: #f6e3a8; --sj-line: rgba(242, 213, 138, .32); --sj-card: rgba(255, 255, 255, .06); --sj-btn: #f2d58a; --sj-btn-ink: #121c36; }
.is-dawn { --sj-bg: #fff7ef; --sj-bgi: linear-gradient(180deg, #fde2c8 0%, #fff1e2 40%, #fffaf4 100%); --sj-ink: #3a2414; --sj-soft: #6b4a33;
  --sj-gold: #c8692b; --sj-title: #8a3f12; --sj-line: rgba(200, 105, 43, .3); --sj-card: #fff; --sj-btn: #c8692b; --sj-btn-ink: #fff; }
.is-newyear { --sj-bg: #0d1630; --sj-bgi: radial-gradient(120% 90% at 50% 0%, #1b2a52 0%, #0d1630 60%, #070c1c 100%); --sj-ink: #f2efe8; --sj-soft: #cfd3de;
  --sj-gold: #e9c46a; --sj-title: #f1d58f; --sj-line: rgba(233, 196, 106, .32); --sj-card: rgba(255, 255, 255, .06); --sj-btn: #e9c46a; --sj-btn-ink: #0d1630; }
.sj-page.has-look { background: var(--sj-bgi); }
/* each look's own touch on the invitation */
.sj-page.is-spring .sj { box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(240, 194, 90, .55); }
.sj-page.is-moon .sj { background: radial-gradient(circle at 92% 64px, rgba(246, 227, 168, .9) 0 26px, rgba(246, 227, 168, .14) 27px 58px, transparent 59px); }
.sj-page.is-dawn .sj { border-top: 6px solid #e9a066; }
.sj-page.is-newyear .sj { border-top: 2px solid #e9c46a; border-bottom: 2px solid #e9c46a; }
.sj-page.is-xmas .sj { border-top: 6px solid #b8322f; }
.sj-page.is-easter .sj { box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(179, 138, 53, .45); }
.sj-preview-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: 1040px; margin: 0 auto 12px; padding: 10px 16px; border-radius: 12px; background: #fff3d6; color: #3b2a12; border: 1px solid #e3c98a; }
.sj-preview-bar p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sj-preview-bar [aria-pressed="true"] { outline: 3px solid #3b2a12; outline-offset: 1px; }
.sj { max-width: 1040px; margin: 0 auto; padding: 40px 22px 56px; }
.sj-page.has-look { padding: 22px 16px; }
.has-look .sj { border: 1px solid var(--sj-line); border-radius: 6px; }
.sj-head { text-align: center; }
.sj-church { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; font-family: "Cormorant Garamond", var(--serif); font-size: 15px; letter-spacing: .32em; text-transform: uppercase; color: var(--sj-gold); }
.sj-church::before, .sj-church::after { content: ""; width: 56px; height: 1px; background: var(--sj-gold); opacity: .7; }
.sj-head h1 { margin: 10px 0 2px; font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 6vw, 58px); letter-spacing: .04em; color: var(--sj-ink); }
.has-look .sj-head h1 { color: var(--sj-title); }
.sj-sub { margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(19px, 2.6vw, 26px); color: var(--sj-gold); }
.sj-sub[hidden] { display: none; }
.sj-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; margin: 30px 0 0; }
.sj-hero:has(.sj-right[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
.sj-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--sj-line); }
.sj-date b { font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); color: var(--sj-ink); }
.sj-date span { font-size: 18px; color: var(--sj-gold); font-weight: 600; }
.sj-plan { list-style: none; margin: 0; padding: 0; }
.sj-plan[hidden] { display: none; }
.sj-plan li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sj-line); }
.sj-plan-what { display: grid; }
.sj-plan-what b { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 28px); color: var(--sj-ink); }
.sj-plan-what i { font-family: "Cormorant Garamond", serif; font-size: 18px; color: var(--sj-soft); }
.sj-plan-time { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(24px, 3.4vw, 38px); color: var(--sj-gold); white-space: nowrap; }
.sj-right { position: relative; display: flex; align-items: center; justify-content: center; }
.sj-right[hidden], .sj-photo[hidden], .sj-verse[hidden] { display: none; }
.sj-photo { margin: 0; width: min(60%, 300px); aspect-ratio: 1; border-radius: 50%; padding: 6px; border: 2px solid var(--sj-gold); flex: none; }
.sj-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sj-verse { flex: 1 1 0; min-width: 0; margin: 0 0 0 -40px; padding: 18px 22px 16px 54px; border: 1px solid var(--sj-line); border-radius: 0 999px 999px 0; background: var(--sj-card); }
.sj-photo[hidden] + .sj-verse { margin: 0; border-radius: 16px; padding-left: 22px; max-width: 360px; }
.sj-verse p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--sj-ink); }
.sj-verse cite { display: block; margin-top: 6px; font-style: normal; font-size: 15px; color: var(--sj-gold); }
.sj-about { max-width: 760px; margin: 26px auto 0; font-size: 18px; line-height: 1.8; color: var(--sj-soft); }
.sj-about p { margin: 0 0 8px; }
.sj-form { display: grid; gap: 14px; max-width: 640px; margin: 28px auto 0; padding: 22px 22px 24px; border: 1px solid var(--sj-line); border-radius: 18px; background: var(--sj-card); }
.sj-kicker { margin: 0 0 -8px; font-size: 14px; letter-spacing: .24em; color: var(--sj-gold); }
.sj-form[hidden], .sj-done[hidden], .sj-roles[hidden], .sj-row[hidden], .sj-form label[hidden] { display: none; }
.sj-form h2, .sj-done h2 { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--sj-ink); }
.sj-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sj-form > label, .sj-row label { display: grid; gap: 4px; font-size: 16px; color: var(--sj-soft); }
.sj-form input:not([type=radio]) { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; min-width: 0; background: #fff; color: #2b2118; }
.has-look .sj-form .pill { background: var(--sj-btn); color: var(--sj-btn-ink); }
.has-look .sj-form .am-status { color: var(--sj-soft); }
.sj-roles { display: grid; gap: 8px; }
.sj-role { position: relative; display: block; cursor: pointer; }
.sj-role input { position: absolute; opacity: 0; }
.sj-role-in { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #2b2118; }
.sj-role-in small { color: var(--primary); font-size: 14px; }
.sj-role-about { display: none; margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.sj-role input:checked + .sj-role-in { border-color: var(--primary); box-shadow: 0 0 0 2px var(--sj-gold); }
.sj-role input:checked + .sj-role-in .sj-role-about { display: block; }
.sj-role input:focus-visible + .sj-role-in { outline: 2px solid var(--sj-gold); outline-offset: 2px; }
.sj-role.is-full { opacity: .5; cursor: default; }
.sj-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sj-done { max-width: 640px; margin: 28px auto 0; padding: 26px 22px; border: 1px solid var(--sj-line); border-radius: 18px; background: var(--sj-card); text-align: center; }
.sj-done p { margin: 8px 0 0; font-size: 18px; color: var(--sj-soft); }
.sj-foot { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--sj-line); text-align: right; }
.sj-foot p { margin: 0; color: var(--sj-soft); font-size: 16px; }
.sj-foot .sj-foot-name { font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--sj-gold); }
.sj-foot .sj-foot-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 18px; }
@media (max-width: 760px) {
  .sj { padding: 28px 16px 40px; }
  .sj-page.has-look { padding: 10px; }
  .sj-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sj-right { flex-direction: column; }
  .sj-photo { width: min(78%, 280px); }
  .sj-verse, .sj-photo[hidden] + .sj-verse { flex: none; margin: -26px 0 0; padding: 30px 20px 16px; border-radius: 18px; max-width: 100%; text-align: center; }
  .sj-row { grid-template-columns: minmax(0, 1fr); }
  .sj-foot { text-align: center; }
  .sj-church { font-size: 12px; letter-spacing: .16em; }
  .sj-church::before, .sj-church::after { width: 16px; }
}

/* 相冊的瀏覽 (photogrid.js): rows of whole pictures, each row filled from the pictures' shapes (--r) */
.phx-grid.is-flow { --h: 170px; display: flex; flex-wrap: wrap; gap: 4px; }
.phx-grid.is-flow::after { content: ""; flex: 999 1 0; }
.phx-grid.is-flow > li { flex: var(--r) 1 calc(var(--r) * var(--h)); height: var(--h); max-width: calc(var(--r) * var(--h) * 1.7); min-width: 0; }
.phx-grid.is-flow > .phx-day { flex: 0 0 100%; max-width: none; height: auto; margin: 18px 0 4px; font-weight: 600; color: var(--ink); }
.phx-grid.is-flow > .phx-day:first-child { margin-top: 0; }
.phx-grid.is-flow .phx-cell { height: 100%; aspect-ratio: auto; border-radius: 3px; }
@media (min-width: 1100px) { .phx-grid.is-flow { --h: 190px; } }
@media (max-width: 640px) { .phx-grid.is-flow { --h: 110px; gap: 2px; } }
/* 上傳連結 of a group's album: the album, a simple viewer */
.alu-gallery { margin: 24px 0 0; }
.alu.is-album { max-width: 1100px; }
.alu-view { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; }
.alu-view[open] { display: grid; grid-template-rows: auto 1fr; }
.alu-view-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.alu-view-top button, .alu-view-top a { border: 0; background: none; color: #fff; font: inherit; cursor: pointer; text-decoration: none; }
.alu-stage { position: relative; min-height: 0; display: grid; place-items: center; }
.alu-stage img, .alu-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.alu-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; cursor: pointer; }
.alu-prev { left: 8px; } .alu-next { right: 8px; }
@media (hover: none) { .alu-nav { display: none; } }

/* 小組 › 分組調整 (sg-plans.js) */
.sp-notices { margin: 0 0 16px; }
.sp-plan { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 0 0 10px; background: #fff; }
.sp-plan header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.sp-units { list-style: none; margin: 6px 0; padding: 0; }
.sp-units li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.sp-units select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.sp-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.sp-from, .sp-to { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.sp-from { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sp-from legend, .sp-to legend { font-weight: 600; padding: 0 4px; }
.sp-torow { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 6px; align-items: start; margin: 0 0 8px; }
.sp-torow input, .sp-torow select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 0; }
@media (max-width: 640px) { .sp-torow { grid-template-columns: 1fr 1fr; } .sp-torow .sp-lead { grid-column: 1 / -1; } }

/* 小組（牧長） (sg-pastoral.js) and the visit note on a group's page */
.spa-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.spa-g { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.spa-g header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.spa-g header a { margin-left: auto; }
.spa-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.spa-nums div { background: var(--ivory); border-radius: 8px; padding: 6px 8px; }
.spa-nums dt { font-size: 12px; color: var(--text-2); }
.spa-nums dd { margin: 0; font-size: 18px; font-weight: 600; }
.spa-plans { list-style: none; padding: 0; margin: 0; }
.spa-plans li { padding: 8px 0; border-top: 1px solid var(--line); }
.spa-fris { display: grid; gap: 10px; }
.spa-fri { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.spa-fri.is-past { opacity: .75; background: var(--ivory); }
.spa-fri.is-today { border-color: var(--gold); }
.spa-fri header { display: flex; align-items: center; gap: 10px; }
.spa-fri ul { margin: 6px 0 0; padding-left: 1.2em; }
.spa-fri li { margin: 4px 0; }
.spa-team { list-style: none; padding: 0; margin: 0; }
.spa-bul { margin: 16px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); } .spa-bul legend { padding: 0; font-weight: 600; }
.spa-team li { padding: 8px 0; border-top: 1px solid var(--line); }
.sg-visit { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #eef3fb; font-size: 15px; }
@media (max-width: 640px) { .spa-nums { grid-template-columns: repeat(2, 1fr); } }
/* 家人申請: possible duplicates, and 不批准 with the reason (member-apps.js) */
.ma-dup { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff4e5; border-left: 4px solid #e8a33d; font-size: 15px; }
.ma-dup ul { margin: 4px 0 6px; padding-left: 1.2em; }
.ma-decline { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; gap: 8px; }
.ma-decline fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ma-decline legend { font-weight: 600; margin-bottom: 4px; }
.ma-decline > label:not(.la-check) { display: grid; gap: 4px; } .ma-decline input[name=account], .ma-decline textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.bp-give-ways { list-style: none; margin: 10px auto; padding: 0; text-align: center; font-size: 17px; line-height: 1.9; } .bp-give-ways b { margin-right: 8px; }

/* 小組 › 這週五 · 排班 · 鼓勵一下 (sg-friday.js) */
.sf-week { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: #fff; margin: 0 0 14px; }
.sf-week header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sf-week header h2 { margin: 0; }
.sf-week.is-off { background: var(--ivory); }
.sf-jobs { list-style: none; margin: 8px 0; padding: 0; }
.sf-jobs li { display: grid; grid-template-columns: 6em 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sf-jobs li:first-child { border-top: 0; }
.sf-job { color: var(--text-2); }
.sf-enc { border-left: 4px solid #8db584; background: #f3f8f1; border-radius: 10px; padding: 8px 14px; margin: 0 0 14px; }
.sf-enc ul { list-style: none; margin: 4px 0; padding: 0; }
.sf-enc li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid #d9e7d4; }
.sf-enc li:first-child { border-top: 0; }
.sf-table-wrap { overflow-x: auto; }
.sf-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
.sf-table th, .sf-table td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.sf-table tr.is-off { background: var(--ivory); color: var(--text-2); }
.sf-table tr.is-past { opacity: .7; }
.sf-table tr.is-now th { color: #a35d0f; }
.sf-cell { all: unset; cursor: pointer; display: block; min-height: 28px; padding: 3px 6px; border-radius: 6px; }
.sf-cell:hover { background: var(--ivory); }
.sf-cell.is-empty { color: #b0a48c; }
.sf-pick { list-style: none; margin: 6px 0; padding: 0; columns: 2; }
.sf-jrow { display: grid; grid-template-columns: 1fr 1fr 4em auto; gap: 6px; margin: 0 0 6px; }
.sf-jrow input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 0; }
.sf-people ul { margin: 6px 0; padding-left: 1.2em; }
@media (max-width: 640px) { .sf-jobs li { grid-template-columns: 5em 1fr; } .sf-jobs li button { grid-column: 1 / -1; justify-self: start; } .sf-pick { columns: 1; } }
.sf-pick li { font-size: 16px; padding: 4px 0; }
.spa-noacct { color: #a61e4d; font-weight: 600; }

/* 兒童事工 /portal/children/ (children.js) */
.kc-tabs { flex-wrap: wrap; }
.kc-tab-link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 980px; color: var(--text-2); text-decoration: none; font-size: 16px; }
.kc-tab-link:hover { color: var(--text); background: var(--gray); }
.kc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.kc-tools input[type="search"] { flex: 1 1 240px; min-width: 0; }
.kc-tools .pill { margin-left: auto; }
.kc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff7e8; border: 1px solid #f1dcb3; }
.kc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 16px; margin: 4px 0 8px; }
.kc-facts dt { font-size: 14px; color: var(--text-2); }
.kc-facts dd { margin: 0; }
.kc-sid { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.kc-allergy { flex-basis: 100%; color: #b42318; font-size: 15px; font-weight: 600; }
.kc-child .kr-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.kc-line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; margin: 0 0 6px; }
.kc-line:not(:has(input[type="email"])) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) auto; }
.kc-kidline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.kc-place { list-style: none; margin: 0; padding: 0; }
.kc-place li { padding: 6px 0; border-top: 1px solid var(--line); }
.kc-season { margin: 0 0 12px; color: var(--text-2); }
.kc-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kc-class { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: #fff; }
.kc-class.is-off { opacity: .6; }
.kc-class > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 6px; }
.kc-class > header h3 { margin: 0; font-size: 20px; }
.kc-class > header .ss-btn { margin-left: auto; }
.kc-teachers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.kc-teacher { padding: 1px 10px; border-radius: 980px; background: var(--gray); font-size: 15px; }
.kc-teacher.is-ok { background: #e6f4ea; color: #1e6b34; }
.kc-teacher.is-bad { background: #fdecec; color: #c92a2a; }
@media (max-width: 640px) { .kc-line, .kc-line:not(:has(input[type="email"])), .kc-kidline { grid-template-columns: 1fr 1fr; } .kc-line .link-btn { justify-self: start; } .kc-tools .pill { margin-left: 0; } }
.kc-tools input[type="search"], .kc-tools select { font: inherit; font-size: 16px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); }
.kc-class .kc-facts { grid-template-columns: 1fr 1fr; }

/* 點名 › 找孩子 */
.kr-find { margin: 0 0 14px; }
.kr-find input[type="search"] { width: 100%; font: inherit; font-size: 17px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 980px; background: #fff; }
.kr-found ul { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.kr-found li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.kr-found li:first-child { border-top: 0; }
.kr-found li > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.kr-found li > span > .kr-f-line, .kr-found li > span > .kc-allergy { flex-basis: 100%; }
.kr-found .kr-ok { color: #1e6b34; font-weight: 600; }
.kr-found > p { margin: 6px 4px 0; }
/* 兒童事工服事申請 /kids/apply/ */
.ka-private { padding: 10px 14px; border-radius: 12px; background: #f3f6fb; border: 1px solid #d8e2f0; }
.ka-wants { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ka-q { border: 0; padding: 0; margin: 0 0 14px; }
.ka-q legend { font-weight: 600; margin: 0 0 6px; }
.ka-q textarea { width: 100%; margin-top: 6px; }
/* 兒童事工 › 老師 / 背景調查 */
.kt-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.kt-link { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.kk-list { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.kk-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.kk-list li:first-child { border-top: 0; }
.kk-list li > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.kk-list li > span > .kr-f-line { flex-basis: 100%; }
.kk-ans .kk-wide { grid-column: 1 / -1; }
.ss-dialog-foot .link-btn { margin-right: auto; }
/* 兒童事工 › 這個主日 / 老師排班 */
.kd-date { align-items: center; }
.kd-date b { font-size: 20px; }
.kd-card.is-mine { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.kd-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.kd-big { font-size: 18px; padding: 12px 22px; }
.kd-guests { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.kr-swaps { flex-direction: column; align-items: stretch; }
.kr-swaps > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kr-wrap { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.kr-table { border-collapse: collapse; width: 100%; min-width: 480px; }
.kr-table th, .kr-table td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.kr-table tr:first-child th { border-top: 0; background: var(--gray); }
.kr-table th small { display: block; font-weight: 400; color: var(--text-2); }
.kr-table td { min-width: 110px; }
.kr-table td > * { display: block; margin: 2px 0; }
.kr-table td.is-mine { background: #fff7d6; }
.kr-table tr.is-past { opacity: .55; }
.kr-table tr.is-now th { color: var(--amber); }
.kr-cell { font: inherit; text-align: left; background: none; border: 0; padding: 0; color: var(--link, #0b57d0); cursor: pointer; }
.kr-table td > .cs-badge { display: inline-block; font-size: 14px; }
.kt-recruit { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf7; }
.kt-recruit .kk-list { margin: 8px 0 0; }
/* 兒童事工 › 規則 */
.kr-rules { display: grid; gap: 12px; margin: 0 0 14px; }
.kr-body p { margin: 0 0 8px; }
.kr-body ul, .kr-body ol { margin: 0 0 8px; padding-left: 1.4em; }
.kr-body li { margin: 2px 0; }
.kp-rules .kr-rule { padding: 16px 20px; }
/* 兒童事工 › 教學資料 */
.kc-subtabs { margin: 0 0 12px; }
.kc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-chip { font: inherit; font-size: 15px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); cursor: pointer; }
.kc-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: #fff; }
.km-lessons { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.km-lesson { padding: 10px 14px; border-top: 1px solid var(--line); }
.km-lesson:first-child { border-top: 0; }
.km-lesson.is-now { background: #fff7d6; }
.km-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.km-head .ss-btn { margin-left: auto; }
.km-acts { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.km-acts .ss-btn { margin-left: 0; }
.km-pick { max-height: 50vh; overflow-y: auto; }
.km-files { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; }
.km-files li { padding: 2px 0; }
.kc-line.km-line, .kc-line.km-line:not(:has(input[type="email"])) { grid-template-columns: 1.6em minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto; align-items: center; }
.km-crumbs { margin: 0 0 8px; }
.km-upl { cursor: pointer; }
@media (max-width: 640px) { .kc-line.km-line, .kc-line.km-line:not(:has(input[type="email"])) { grid-template-columns: 1.6em 1fr auto; } .km-line input[name="topic"], .km-line input[name="teacher"] { grid-column: 2; } }
.imp-map select { max-width: 100%; }
.imp-prev td, .imp-prev th { font-size: 14px; white-space: nowrap; }
.kc-app details.sg-hist { margin: 0 0 14px; }
/* 兒童事工 › 值班、職務、活動、物資 */
.kt-roles { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.kd-duty { list-style: none; margin: 0 0 8px; padding: 0; }
.kd-duty li { padding: 3px 0; }
.kd-duty-card h4 { margin: 8px 0 2px; font-size: 15px; color: var(--text-2); }
.kr-duty-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kr-duty-row th { color: var(--text-2); }
.kr-pick { width: 100%; font: inherit; }
.kc-line.kd-line, .kc-line.kd-line:not(:has(input[type="email"])) { grid-template-columns: 110px minmax(0, 1fr) auto; }
.kc-line.ks-line, .kc-line.ks-line:not(:has(input[type="email"])) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.6fr) auto; }
@media (max-width: 640px) { .kc-line.ks-line, .kc-line.ks-line:not(:has(input[type="email"])) { grid-template-columns: 1fr 1fr; } }

/* 首頁 (10/2026): no white seams between the sections; navy only for the top bar and the footer — the live /
   welcome pair sits on warm paper, the same family as the Bible book above it */
.hero2 ~ .bible-wrap, .bible-wrap + .ministry-split, .ministry-split + .tile-pair { margin-top: 0; }
.tile-pair { border-top: 0; background: #f6efe2; }
.tile-live, .tile-welcome { background: #f6efe2; color: #2b2118; }
.tile-pair .tile-live { border-right-color: #e3d4b4; }
.pair-head .kicker { color: #8a6a3a; }
.pair-head h2 { color: #2b2118; }
.tile-pair .video { box-shadow: 0 6px 18px rgba(43, 23, 12, 0.18); }
.pair-strip { color: #4a3b2c; }
.pair-strip li { border-left-color: #d4a94e; }
.pair-strip strong { color: #2b2118; }
.pair-strip a, .hw-addr a { color: #8e1a18; }
.tile-welcome .hw-photo { box-shadow: 0 6px 18px rgba(43, 23, 12, 0.18); }
.hw-links a { background: #fffaf0; border-color: #e3d4b4; color: #2b2118; }
.hw-links a:hover { background: #fff; }
.hw-links b { color: #8e1a18; }
.hw-links span { color: #6b5a48; }
.hw-addr { color: #4a3b2c; }
@media (max-width: 734px) {
  .tile-pair .tile-live { border-bottom-color: #e3d4b4; }
}
/* announcement pages read cleanly: no faint printed text behind them, and a lighter seal */
.bible-page:has(.bp-pray, .bp-pr-page:not(.bp-give)) .bp-bg { display: none; }
.bible-page:has(.bp-pray, .bp-pr-page:not(.bp-give))::before { opacity: 0.05; }
/* 本週經文 on the ministry photo: a soft shade at the top only, so it stays legible over the lanterns */
.ms-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); }
.ms-panel > * { position: relative; z-index: 1; }
.ms-panel:has(.ms-verse[hidden])::before { display: none; }
.ms-verse { padding-top: 8px; }
/* 首頁聖經: the button under the book says which page comes next (下一頁：奉獻 ›) — gold, so it is easy to find */
.bible-wrap .bible-controls { position: relative; z-index: 10; }
.bible-wrap .bible-btn-next { width: auto; max-width: min(78vw, 420px); height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px 0 22px; border-radius: 999px; border: 0; background: var(--amber-soft); color: #3d2214; font-family: var(--serif); font-size: 18px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.bible-wrap .bible-btn-next:hover { background: #f6d498; }
.bible-wrap .bible-btn-next > span[aria-hidden] { font-size: 24px; line-height: 1; }
.bible-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bible-wrap .bible-btn-next.is-restart { background: rgba(255, 250, 240, 0.92); box-shadow: none; }
/* the page corner reads as paper curling up: a lit underside with a soft shadow on the page; it curls up and
   settles back every few seconds while the book is in view, until the first page turn (bible.js) */
.bible-corner-next { background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #d6c194 50%, #efe2c4 58%, #fffaf0 74%, #f1e5c9 100%); filter: drop-shadow(-3px -3px 5px rgba(70, 40, 15, 0.3)); }
.bible-corner-next.is-hint { animation: bible-curl 4.5s ease-in-out 0.6s infinite; }
@keyframes bible-curl {
  0%, 46%, 100% { width: 56px; height: 56px; filter: drop-shadow(-3px -3px 5px rgba(70, 40, 15, 0.3)); }
  14%, 24% { width: 120px; height: 120px; filter: drop-shadow(-8px -8px 12px rgba(70, 40, 15, 0.4)); }
  34% { width: 50px; height: 50px; }
  40% { width: 64px; height: 64px; }
}
@media (max-width: 734px) {
  .bible-controls { gap: 10px; }
  .bible-pos { min-width: 0; font-size: 15px; }
  .bible-wrap .bible-btn-next { font-size: 16px; height: 44px; padding: 0 14px 0 18px; }
}
/* 家長會 › 排老師時段: one block a teacher — who (and their classes) on top, then date, start, end, place */
.kc-line.km-block, .kc-line.km-block:not(:has(input[type="email"])) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.4fr); align-items: center; }
.km-block > .la-check, .km-block > b { grid-column: 1 / -1; margin: 0; }
.km-block .la-check small { margin-left: 4px; }
.km-defaults { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ss-form label.km-mins { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 0 0; }
.km-mins input { width: 5em; }
@media (max-width: 640px) { .kc-line.km-block, .kc-line.km-block:not(:has(input[type="email"])) { grid-template-columns: 1fr 1fr; } }
/* 禱告牆 › 代禱類別: a row of plain chips under the tabs; a card's 類別 is a link that filters by it */
.pw .pw-cat-link { padding: 0; font-size: 13px; color: #1f4e9a; }
.pr-cat { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: #8a7560; }
.pr-cat select { font: inherit; font-size: 15px; padding: 4px 8px; border: 1px solid #e3cfa5; border-radius: 8px; background: #fff; }
/* 第一次來 › 找到我們: the neighbourhood map in the photos' frame (the map's own colours are calm; no extra shadow tint) */
.au-day-map > figure a { display: block; height: 100%; }
.vt-map-credit { margin-top: 8px !important; font-size: 13px !important; color: #7a6a58 !important; }
.vt-map-credit a { color: inherit; }
/* 一起讀經 › 讀完了 and 我的讀經: a plain check-in button and count on each day; one's own half-year as small squares
   (cream → gold → the site's red), the streak and totals above it */
.rd-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; }
.rd-done { padding: 7px 18px; border: 1px solid #c9a46a; border-radius: 999px; background: #fff; color: #8e1a18; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.rd-done[aria-pressed="true"] { background: #a31d1d; border-color: #a31d1d; color: #fff; }
.rd-done:disabled { opacity: 0.6; cursor: default; }
.rd-done-n { font-size: 14px; color: #7a6a58; }
.rc-done { margin: 28px 0 8px; text-align: center; }
.rd-me { max-width: 760px; margin: 0 auto 22px; padding: 18px 20px 16px; border: 1px solid #e3d8c4; border-radius: 14px; background: #fff; }
.rd-me[hidden] { display: none; }
.rd-me-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rd-me-head h2 { margin: 0; font-family: var(--serif); font-size: 22px; }
.rd-me-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 12px; font-size: 15px; color: #4a4036; }
.rd-me-stats b { font-size: 20px; color: #8e1a18; }
.rd-hm { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.rd-hm-c { display: block; aspect-ratio: 1; border-radius: 3px; background: #efe6d2; }
.rd-hm-c.l1 { background: #e8c98a; }
.rd-hm-c.l2 { background: #d9a441; }
.rd-hm-c.l3 { background: #a31d1d; }
.rd-hm-c.is-today { outline: 2px solid #5a4a3a; outline-offset: 1px; }
.rd-hm-c.is-future { background: transparent; }
.rd-hm-key { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 8px 0 0; font-size: 12px; color: #7a6a58; }
.rd-hm-key .rd-hm-c { width: 11px; }
@media (max-width: 640px) { .rd-hm { gap: 2px; } .rd-me { padding: 14px 14px 12px; } }
/* 統計報表 › trends: the comparisons under a number, a small line of the last weeks, this year against last, and the
   months by year (deeper = more); the site's red for this year, a quiet grey for last year */
.rp-stats dd.rp-vss { display: grid; gap: 1px; margin-top: 4px; font-size: 14px; font-weight: 600; color: #4a4036; }
.rp-stats .is-warn dd.rp-vss, .rp-stats .is-bad dd.rp-vss { color: #4a4036; }
.rp-vs small { font-weight: 400; color: var(--text-2); }
.rp-spark { display: block; width: 100%; max-width: 120px; height: 28px; margin-top: 4px; }
.rp-spark polyline { fill: none; stroke: #a31d1d; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-trend svg { display: block; width: 100%; height: auto; }
.rp-trend .rp-grid line { stroke: #e8e1d4; stroke-width: 1; }
.rp-trend .rp-grid text { font-size: 11px; fill: #7a6a58; }
.rp-trend path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rp-trend path.rp-y0 { stroke: #a31d1d; }
.rp-trend path.rp-y1 { stroke: #b9ad9a; stroke-dasharray: 5 4; }
.rp-legend i.rp-y0 { background: #a31d1d; }
.rp-legend i.rp-y1 { background: #b9ad9a; }
.rp-months-wrap { overflow-x: auto; }
.rp-months { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.rp-months th { font-weight: 600; color: #7a6a58; text-align: center; padding: 2px; }
.rp-months tbody th { text-align: left; padding-right: 6px; }
.rp-months td { min-width: 30px; padding: 6px 2px; border-radius: 4px; text-align: center; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, #a31d1d calc(8% + var(--h, 0) * 72%), #f7f1e6); color: #2b2118; }
.rp-months td.is-dark { color: #fff; }
.rp-months td:empty { background: transparent; }
/* the card's columns may shrink below the months table: the table scrolls in its own box, not the page */
.rp-card { grid-template-columns: minmax(0, 1fr); }
.rp-card > * { min-width: 0; }
/* 讀經 tools (reading-tools.js): 目錄・搜尋・我的筆記 on the chapter page, a verse chosen and its bar, highlights, the card */
.rc-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rc-tools button { font: inherit; font-size: 15px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); cursor: pointer; }
.rc-top { flex-wrap: wrap; }
[data-rc-title][role="button"] { cursor: pointer; }
[data-rc-title][role="button"]::after { content: " ▾"; font-size: 0.6em; color: #b8914a; }
.rc-v, .rc-pair { cursor: pointer; border-radius: 4px; transition: background 0.15s; }
.rc-v.hl-y, .rc-pair.hl-y, .rt-notes li.hl-y { background: #fbefb8; }
.rc-v.hl-g, .rc-pair.hl-g, .rt-notes li.hl-g { background: #dcefd0; }
.rc-v.hl-b, .rc-pair.hl-b, .rt-notes li.hl-b { background: #d8e6f5; }
.rc-v.is-chosen, .rc-pair.is-chosen { text-decoration: underline dotted #a31d1d; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rc-pair.is-chosen { outline: 2px dashed #c9a46a; outline-offset: 2px; text-decoration: none; }
.rc-v.has-note sup::after, .rc-pair.has-note sup::after { content: "•"; color: #a31d1d; margin-left: 1px; }
.rc-v.is-flash, .rc-pair.is-flash { animation: rt-flash 2.4s ease-out; }
@keyframes rt-flash { 0%, 40% { background: #f3d58a; } 100% { background: transparent; } }
.rt-bar { position: sticky; bottom: 10px; z-index: 20; margin: 16px auto 0; max-width: 720px; padding: 12px 14px; border: 1px solid #e3d8c4; border-radius: 14px; background: #fffdf8; box-shadow: 0 8px 24px rgba(43, 33, 24, 0.16); }
.rt-bar[hidden] { display: none; }
.rt-bar p { margin: 0 0 8px; }
.rt-bar-note { padding: 6px 10px; border-left: 3px solid #c9a46a; background: #faf6ee; font-size: 15px; white-space: pre-wrap; }
.rt-bar-note[hidden] { display: none; }
.rt-bar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-bar-acts > button, .rt-bar-acts > a { font: inherit; font-size: 15px; padding: 7px 14px; border: 1px solid #d9ccb6; border-radius: 999px; background: #fff; color: #8e1a18; cursor: pointer; text-decoration: none; }
.rt-bar-acts > button[hidden] { display: none; }
.rt-colors { display: inline-flex; gap: 6px; margin-right: 4px; }
.rt-colors button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #c9b48a; cursor: pointer; font-size: 12px; color: #7a6a58; background: #fff; }
.rt-colors .sw-y { background: #f6dd74; } .rt-colors .sw-g { background: #a9d48e; } .rt-colors .sw-b { background: #9fc2ea; }
.rt-bar-msg { margin: 6px 0 0 !important; font-size: 14px; color: #6b5a48; }
.rt-bar-msg:empty { display: none; }
.rt-dlg { width: min(720px, calc(100vw - 20px)); max-height: calc(100vh - 30px); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.rt-dlg::backdrop { background: rgba(20, 16, 10, 0.45); }
.rt-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.rt-head h2 { margin: 0; font-family: var(--serif); font-size: 22px; }
.rt-search { padding: 12px 18px 0; }
.rt-search input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid #d9ccb6; border-radius: 10px; font: inherit; font-size: 17px; }
.rt-body { padding: 10px 18px 18px; }
.rt-sec h3 { margin: 14px 0 6px; font-size: 14px; letter-spacing: 0.1em; color: #8a6a3a; }
.rt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-pills button { font: inherit; font-size: 16px; padding: 6px 12px; border: 1px solid #e3d8c4; border-radius: 999px; background: #fff; cursor: pointer; }
.rt-pills button[aria-current], .rt-chs a[aria-current] { background: #a31d1d; border-color: #a31d1d; color: #fff; }
.rt-bookname { margin: 4px 0 10px; font-family: var(--serif); font-size: 22px; }
.rt-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.rt-chs a { display: grid; place-items: center; min-height: 44px; border: 1px solid #e3d8c4; border-radius: 8px; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.rt-ref { display: block; margin: 4px 0 10px; padding: 12px 14px; border-radius: 10px; background: #fbf1dc; color: #7a2a12; text-decoration: none; font-size: 17px; }
.rt-count { margin: 6px 0; font-size: 14px; color: #7a6a58; }
.rt-hits { list-style: none; margin: 0; padding: 0; }
.rt-hits li { border-top: 1px solid #f0e9dc; }
.rt-hits a { display: block; padding: 10px 4px; color: #2b2118; text-decoration: none; font-family: var(--serif); font-size: 17px; line-height: 1.7; }
.rt-hits a b { font-family: var(--font); font-size: 14px; color: #a31d1d; margin-right: 6px; }
.rt-hits mark { background: #f6dd74; color: inherit; }
.rt-notes li { padding: 0 8px; border-radius: 8px; margin-bottom: 4px; border-top: 0; }
.rt-note-text { margin: 0 0 10px; padding-left: 10px; border-left: 3px solid #c9a46a; font-size: 15px; white-space: pre-wrap; }
.rt-noteform { padding: 14px 18px 18px; display: grid; gap: 10px; }
.rt-noteform blockquote { margin: 0; font-family: var(--serif); color: #4a4036; }
.rt-noteform textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d9ccb6; border-radius: 10px; font: inherit; font-size: 16px; }
.rt-card { padding: 14px 18px 18px; text-align: center; }
.rt-card img { display: block; width: min(100%, 420px); margin: 0 auto 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(43, 33, 24, 0.18); }
/* 一起讀經 › 全本聖經: 66 tiles, deeper for more read */
.rd-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.rd-bible { margin-top: 16px; padding-top: 12px; border-top: 1px solid #efe6d2; }
.rd-bible-h { margin: 0 0 6px; font-size: 15px; color: #4a4036; }
.rd-bible-h b { font-family: var(--serif); font-size: 18px; margin-right: 6px; color: #2b2118; }
.rd-bible-t { margin: 8px 0 4px; font-size: 12px; letter-spacing: 0.12em; color: #8a6a3a; }
.rd-bks { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 3px; }
.rd-bk { display: grid; place-items: center; min-height: 32px; border-radius: 4px; font-size: 13px; text-decoration: none; color: #3a2e22;
  background: color-mix(in srgb, #d9a441 calc(var(--f, 0) * 100%), #f2ebdd); }
.rd-bk.is-all { background: #a31d1d; color: #fff; }
/* 背經 (/reading/memory/) */
.rm { max-width: 760px; margin: 0 auto; padding: 24px 18px 60px; }
.rm-ref { margin: 0 0 14px; color: #8a6a3a; }
.rm-verse { font-family: var(--serif); font-size: 22px; line-height: 1.9; color: #2b2118; }
.rm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.rm-help { margin: 0 0 8px; color: #6b5a48; }
.rm-answer { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; padding: 10px; border: 1px dashed #d9ccb6; border-radius: 12px; background: #fffdf8; }
.rm-slot { min-width: 34px; min-height: 34px; padding: 4px 8px; border-bottom: 2px solid #e3d8c4; font-family: var(--serif); font-size: 19px; }
.rm-slot.is-on { border-bottom-color: #a31d1d; }
.rm-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rm-chip { font: inherit; font-family: var(--serif); font-size: 19px; padding: 9px 14px; border: 1px solid #d9ccb6; border-radius: 10px; background: #fff; color: #2b2118; cursor: pointer; }
.rm-chip[disabled] { visibility: hidden; }
.rm-chip.is-hint { border-color: #a31d1d; box-shadow: 0 0 0 3px rgba(163, 29, 29, 0.25); }
.rm-chip.is-wrong { animation: rm-shake 0.4s; border-color: #c9774a; }
@keyframes rm-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.rm-miss { font-size: 14px; color: #7a6a58; }
.rm-done-h { margin: 6px 0; font-family: var(--serif); font-size: 26px; color: #a31d1d; }
@media (prefers-reduced-motion: reduce) { .rm-chip.is-wrong, .rc-v.is-flash, .rc-pair.is-flash { animation: none; } }

/* ---------- 認識我們 (10/2026): one warm palette — gold and the site's deep red, no green; light paper for the mission
   (navy stays in the header and footer); real photos, straight, in the same frame as elsewhere ---------- */
.au-note-photo { transform: none; border-radius: 20px; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.12); }
/* 一個主日: the sanctuary panorama as a strip, then the words */
.au-pano { margin: 0 0 28px; }
.au-pano img { display: block; width: 100%; height: clamp(150px, 20vw, 260px); object-fit: cover; object-position: center 45%; }
.au-sunday-text { max-width: 760px; text-align: center; }
.au-sunday-text p { font-size: 18px; line-height: 1.8; color: #4a4036; }
.au-sunday-text .au-ctas { justify-content: center !important; }
/* 我們的使命: paper, three columns divided by thin gold rules */
.ab-mission { background: #f7f1e6; color: #2b2118; }
.ab-label-light { color: #8a6a3a; }
.ab-pillars { gap: 0; }
.ab-pillar { padding: 8px 28px 10px; border: 0; border-radius: 0; background: none; }
.ab-pillar + .ab-pillar { border-left: 1px solid #d9c49a; }
.ab-pillar-en { color: #a07a2c; }
.ab-pillar-zh { color: #2b2118; font-weight: 700; }
.ab-pillar p { color: #5a4a3a; }
.au-strives { gap: 0; margin-top: 8px; }
.au-strives li { padding: 14px 12px; border: 0; border-radius: 0; background: none; color: #2b2118; font-family: var(--serif); font-size: 19px; }
.au-strives li + li { border-left: 1px solid #e3d4b4; }
.au-strives li::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 8px; background: #c9a046; transform: rotate(45deg); }
/* 我們的故事: more room; 今天 in the site's red */
@media (min-width: 761px) { .au-timeline { gap: 6px; } .au-timeline > li { padding-top: 34px; } }
.au-year { font-size: 24px; color: #8a5a00; }
.au-timeline strong { font-size: 16px; line-height: 1.4; }
.au-timeline small { font-size: 14px; }
.au-timeline > li.au-now::before { background: #a31d1d; box-shadow: 0 0 0 4px #f6e2df; }
.au-timeline > li.au-now::after { background: linear-gradient(90deg, #e2d3b3, #e8b8b2); }
.au-timeline > li.au-now .au-year, .au-timeline > li.au-now strong { color: #a31d1d; }
.au-ahead-h { color: #2b2118; }
.au-ahead li { border: 0; border-top: 3px solid #c9a046; border-radius: 4px 4px 14px 14px; background: #fff; box-shadow: 0 6px 18px rgba(60, 40, 10, 0.06); }
.au-ahead strong { color: #2b2118; }
.au-ahead small { color: #5a4a3a; }
@media (max-width: 760px) {
  .ab-pillar + .ab-pillar { border-left: 0; border-top: 1px solid #d9c49a; padding-top: 22px; margin-top: 14px; }
  .au-strives li + li { border-left: 0; }
  .au-strives { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
  .au-pano img { height: 140px; }
}
.ab-story-more { text-align: center; margin-bottom: 0; }
.au-story { padding-bottom: 56px; }

/* ---------- honest pictures (10/2026): no over-polished or AI-edited photos. The first screens are warm paper and words
   (home: with the neighbourhood map; 認識我們: with the church family's own photo); the ministries are words on paper;
   the sanctuary is its real panorama ---------- */
.hero2.is-paper { background: #f7f1e6; color: #2b2118; }
.hero2.is-paper::after { content: none; }
.hero2.is-paper .hero2-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 52px; align-items: center; padding-top: 52px; padding-bottom: 56px; }
.hero2.is-paper .hero2-card { max-width: none; color: #2b2118; text-shadow: none; }
.hero2.is-paper .hero2-title { color: #2b2118; }
.hero2.is-paper .hero2-date, .hero2.is-paper .hero2-addr, .hero2.is-paper .hero2-times li, .hero2.is-paper .hero2-more { color: #5a4a3a; }
.hero2.is-paper .hero2-times li.is-main { color: #2b2118; }
.hero2.is-paper .hero2-more > summary { border-color: #d9ccb6; }
.hero2.is-paper .hero2-week a { color: #1f4e9a; }
.hero2.is-paper .hero2-addr a { color: #8e1a18; }
.hero2.is-paper .hero2-act { color: #2b2118; border-color: #d9ccb6; background: #fff; }
.hero2.is-paper .hero2-act:hover { background: #fbf7ef; }
.hero2.is-paper .hero2-act.is-main { background: #a31d1d; border-color: #a31d1d; color: #fff; }
.hero2-map { display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.14); }
.hero2-map img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .hero2.is-paper .hero2-inner { grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 28px; }
}
/* 認識我們 · 第一次來: the same paper first screen */
.au-hero.is-paper { min-height: 0; display: block; color: #2b2118; background: #f7f1e6; }
.au-hero.is-paper::after { content: none; }
.au-hero.is-paper .au-hero-inner { margin: 0 auto; padding: 64px 22px 48px; text-align: center; }
.au-hero.is-paper .au-title { color: #2b2118; text-shadow: none; }
.au-hero.is-paper .au-sub { color: #5a4a3a; }
.au-hero.is-paper .au-eyebrow { color: #8a6a3a; }
.au-hero.is-paper .au-ghost { color: #2b2118; border-color: #d9ccb6; background: #fff; }
.au-hero.is-paper .au-ghost:hover { background: #fbf7ef; }
.au-hero.is-paper .cl-jump a { background: #fff; border-color: #e2d3b3; color: #2b2118; backdrop-filter: none; }
.au-hero-split { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.au-hero-split.is-paper { background: #f7f1e6; max-width: none; padding: 0 max(22px, calc((100% - 1136px) / 2)); }
.au-hero-split.is-paper .au-hero-inner { padding: 56px 0 48px; text-align: left; }
.au-hero-split.is-paper .au-sub { margin-left: 0; }
.au-hero-split.is-paper .au-ctas { justify-content: flex-start; }
.au-hero-photo { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.14); }
.au-hero-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .au-hero-split { grid-template-columns: 1fr; }
  .au-hero-split.is-paper .au-hero-inner { padding: 30px 0 4px; }
  .au-hero-split .au-hero-photo { margin-bottom: 26px; }
  .au-hero.is-paper .au-hero-inner { padding-top: 34px; padding-bottom: 30px; }
}
/* 中文事工 | English Ministry: words on white paper, a thin gold rule between them */
.ministry-split { min-height: 0; background: #fff; border-top: 1px solid #efe6d2; border-bottom: 1px solid #efe6d2; }
.ms-panel { padding: 56px 44px 52px; background: none; color: #2b2118; justify-content: flex-start; }
.ms-panel + .ms-panel, html[data-lang="en"] .ms-en + .ms-zh { border-left: 1px solid #e3d4b4; }
.ms-kicker { color: #8a6a3a; }
.ms-name { color: #2b2118; }
.ms-go { color: #8e1a18; }
.ms-meta { color: #5a4a3a; font-size: 17px; }
.ms-verse { margin-bottom: 22px; color: #3a2e22; }
.ms-verse-text, .ms-verse-ref { text-shadow: none; color: inherit; }
.ms-verse-text { font-size: clamp(19px, 1.8vw, 23px); }
.ms-verse-ref { color: #8a6a3a; font-size: 15px; }
.ms-panel::before { content: none !important; }
@media (max-width: 734px) {
  .ms-panel { min-height: 0; padding: 32px 22px 30px; }
  .ms-panel + .ms-panel, html[data-lang="en"] .ms-en + .ms-zh { border-left: 0; border-top: 1px solid #e3d4b4; }
}
/* the real sanctuary panorama in the ministries' first screens: its middle (the aisle and the lanterns) */
.mz-hero-img { object-position: center 45%; }
.hero2-photo { margin: 0; }
/* the ministry panels: bigger names, a short gold line before the one-line description */
.ms-name { font-size: clamp(40px, 4.4vw, 56px); }
.ms-meta { position: relative; margin-top: 12px; padding-left: 30px; }
.ms-meta::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 20px; height: 2px; background: #c9a046; }

/* ---------- 首頁 (10/2026, take 3): a real photo across the first screen; the Bible book on linen (no photo behind
   it); the two ministries as deep-coloured blocks — fewer photo backgrounds, still warm ---------- */
.hero2.is-warm::after { background: linear-gradient(90deg, rgba(34, 22, 12, 0.82) 0%, rgba(34, 22, 12, 0.6) 36%, rgba(34, 22, 12, 0.1) 66%, rgba(34, 22, 12, 0) 100%); }
.hero2.is-warm .hero2-bg { object-position: center 38%; }
.hero2.is-warm .hero2-act.is-main { background: #f3c77e; border-color: #f3c77e; color: #2b2118; }
@media (max-width: 760px) { .hero2.is-warm::after { background: linear-gradient(180deg, rgba(34, 22, 12, 0.78) 0%, rgba(34, 22, 12, 0.66) 100%); } }
/* the Bible book: an open Bible on a linen tablecloth */
.bible-wrap { background: radial-gradient(120% 90% at 50% 30%, #f6efe2 0%, #ece2cf 70%, #e3d6bd 100%); }
.bible-wrap::before, .bible-wrap::after { content: none; }
.bible-wrap .bible { box-shadow: 0 26px 50px rgba(70, 45, 20, 0.28), 0 4px 10px rgba(70, 45, 20, 0.18), inset 0 0 0 2px rgba(212, 169, 78, 0.35), inset 0 0 0 7px rgba(0, 0, 0, 0.15); }
.bible-wrap .bible-pos { color: #5a4a3a; }
.bible-wrap .bible-btn { background: #fff; }
/* 中文事工 · English Ministry: wine and coffee-black, a faint large 中 / EN, cream words and gold */
.ministry-split { border: 0; background: #2b1d14; }
.ms-panel { position: relative; overflow: hidden; padding: 60px 48px 56px; min-height: 360px; color: #fbf3e2; }
.ms-zh { background: linear-gradient(150deg, #7a2420 0%, #5c1814 100%); }
.ms-en { background: linear-gradient(150deg, #3b3028 0%, #241b15 100%); }
/* hover: the panel keeps its colour (an older rule turned it near-white) — a touch warmer, a gold line grows along the
   bottom, the large 中 / EN comes forward and the arrow moves on */
.ms-zh:hover, .ms-zh:focus-visible { background: linear-gradient(150deg, #8a2a24 0%, #661b16 100%); }
.ms-en:hover, .ms-en:focus-visible { background: linear-gradient(150deg, #47392f 0%, #2c211a 100%); }
.ms-panel::after { content: ""; position: absolute; left: 48px; right: 48px; bottom: 0; height: 3px; z-index: 1; background: #f3c77e; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.ms-panel:hover::after, .ms-panel:focus-visible::after { transform: scaleX(1); }
.ms-mark { transition: color 0.35s ease, transform 0.35s ease; }
.ms-panel:hover .ms-mark, .ms-panel:focus-visible .ms-mark { color: rgba(243, 199, 126, 0.18); transform: translateY(-6px); }
.ms-go { transition: letter-spacing 0.25s ease; }
.ms-panel:hover .ms-go, .ms-panel:focus-visible .ms-go { letter-spacing: 0.02em; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: reduce) { .ms-panel::after, .ms-mark, .ms-go { transition: none; } }
.ms-panel + .ms-panel, html[data-lang="en"] .ms-en + .ms-zh { border-left: 0; }
.ms-mark { position: absolute; right: 24px; bottom: -40px; z-index: 0; font-family: var(--serif); font-size: 240px; line-height: 1; font-weight: 700; color: rgba(243, 199, 126, 0.10); pointer-events: none; }
.ms-panel > :not(.ms-mark) { position: relative; z-index: 1; }
.ms-kicker { color: #f3c77e; }
.ms-name { color: #fff8ec; }
.ms-meta { color: rgba(251, 243, 226, 0.88); }
.ms-meta::before { background: #f3c77e; }
.ms-when { display: inline-block; margin-top: 14px; align-self: flex-start; padding: 5px 14px; border: 1px solid rgba(243, 199, 126, 0.55); border-radius: 999px; font-size: 16px; color: #fbf3e2; }
.ms-go { color: #f3c77e; }
.ms-verse { color: #fbf3e2; }
.ms-verse-ref { color: #f3c77e; }
@media (max-width: 734px) {
  .ms-panel { padding: 36px 24px 32px; min-height: 0; }
  .ms-panel + .ms-panel, html[data-lang="en"] .ms-en + .ms-zh { border-top: 0; }
  .ms-mark { font-size: 170px; bottom: -30px; }
  .ms-panel::after { left: 24px; right: 24px; }
}
.bible-wrap .bible-btn-next { background: #f3c77e; }
.bible-wrap .bible-btn-next.is-restart { background: #fff; }
/* 首頁聖經 › 怎麼來: the map on a page, a thin gold frame so it sits on the paper */
.bp-find { display: grid; gap: 10px; justify-items: center; text-align: center; }
.bp-find-map { display: block; width: 100%; max-width: 460px; padding: 6px; border: 1px solid #d9c49a; border-radius: 6px; background: #fffaf0; }
.bp-find-map img { display: block; width: 100%; height: auto; border-radius: 3px; }
.bp-find-addr { margin: 2px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.6; color: #2b2118; }
.bp-find-credit { margin: 0; font-size: 11px; color: #9a8466; }
.bible-page:has(.bp-find) .bp-bg { display: none; }
/* 首頁聖經 in pairs: a verse page — the verse alone, in the middle of the page; 這個主日; 成為家人 */
.bible-page:has(.bp-one) { display: flex; flex-direction: column; }
.bp-one { flex: 1; margin: 0 0 24px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.bp-one p { text-align: center !important; font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.9 !important; }
.bible-page:has(.bp-one) .bp-bg { display: none; }
.bp-sun-list { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 10px; }
.bp-sun-list li { display: grid; grid-template-columns: 6.5em 1fr; gap: 4px 14px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid #e3d4b4; font-family: var(--serif); font-size: 20px; color: #2b2118; text-align: left; }
.bp-sun-list b { color: #a31d1d; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-sun-list small { grid-column: 2; font-family: var(--font); font-size: 14px; color: #8a6a3a; }
.bp-col { flex-direction: column; align-items: center; }
.bible-page:has(.bp-sunday) .bp-bg, .bible-page:has(.bp-col) .bp-bg { display: none; }

/* ==========================================================================================================
   One look on every page (consistency pass, 10/2026)
   - Palette: linen paper, ink, wine for actions, gold for thin rules and labels, coffee for the second accent.
     Navy only in the header and footer. No blues, purples, greens or rainbow bars in page content.
   - Two page headers only: the paper header (.ab-hero: label, serif title, a line, a gold rule) and the split
     header (text on paper beside one real photo: .mz-hero, .en-hero, .lx-hero) — no dark overlays, no stock photos.
   - One card (white on paper, a thin warm border, 12px corners), one sub-menu, one button, one form field.
   ========================================================================================================== */
:root {
  --primary: #7a2420; --primary-hover: #8e2d27; --blue: #7a2420; --link: #8a3a1c; --link-dark: #8a3a1c;
  --ink: #2b2118; --ink-2: #5a4a3a; --paper: #fbf7ef; --linen: #f4ecdf; --rule: #e3d4b4; --gold: #b8914a; --gold-soft: #f3c77e; --coffee: #3b3028;
}
a { color: var(--link); }
.pill, .en-btn { background: var(--primary); border-color: var(--primary); color: #fff8ec; }
.pill:hover, .en-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff8ec; }
.pill-outline, .en-btn-line, .mz-ghost, .mz-ghost-dark { background: #fff; color: var(--ink); border: 1px solid #d9c6a0; }
.pill-outline:hover, .en-btn-line:hover, .mz-ghost:hover, .mz-ghost-dark:hover { background: var(--linen); color: var(--ink); border-color: #c9ad78; }
.link-more { color: var(--link); }

/* the paper header */
.ab-hero { background: linear-gradient(180deg, var(--paper) 0%, var(--linen) 100%); border-bottom: 1px solid #ecdfc6; }
.ab-eyebrow { color: #9a7432; }
.ab-title { color: var(--ink); }
.ab-sub { color: var(--ink-2); }
.ph-verse { max-width: 640px; margin: 18px auto 0; font-family: var(--serif); font-size: 19px; line-height: 1.85; color: #4a3a2a; }
.ph-verse cite { display: block; margin-top: 4px; font-family: var(--font); font-size: 14px; font-style: normal; letter-spacing: 0.06em; color: #9a7432; }
.ph-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; }

/* the split header: 中文事工 (.mz-hero), English Ministry (.en-hero), 午餐 (.lx-hero) — words on the paper, the photo beside */
.mz-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; min-height: 0; max-width: 1120px; margin: 0 auto; padding: 52px 24px 44px; overflow: visible; color: var(--ink); background: var(--paper); }
.mz-hero::after { content: none; }
.mz-hero:has(> .mz-hero-img) { box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.mz-hero:not(:has(> .mz-hero-img)) { grid-template-columns: minmax(0, 1fr); text-align: center; box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.mz-hero-img { position: static; grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 40px rgba(70, 45, 20, 0.16); }
.mz-hero-inner { grid-column: 1; grid-row: 1; padding: 0; max-width: none; margin: 0; }
.mz-eyebrow { color: #9a7432; letter-spacing: 0.16em; font-weight: 600; }
.mz-title { color: var(--ink); font-size: clamp(38px, 5vw, 54px); }
.za-tag { color: var(--primary); font-size: 22px; }
.mz-verse { color: #4a3a2a; font-size: 18px; }
.mz-verse > small { color: #9a7432; opacity: 1; margin-top: 4px; }
.mz-hero:not(:has(> .mz-hero-img)) .mz-verse { margin-left: auto; margin-right: auto; }
.mz-hero:not(:has(> .mz-hero-img)) .mz-chips, .mz-hero:not(:has(> .mz-hero-img)) .mz-ctas { justify-content: center; }
.mz-chips span { background: #fff; border: 1px solid var(--rule); color: var(--ink); }
.en-hero, .en-sec, .en-hero-home { --en-ink: #2b2118; --en-text: #5a4a3a; --en-blue: #7a2420; --en-sky: #f4ecdf; --en-sun: #b8914a; --en-line: #e3d4b4; }
.en-hero { background: var(--paper); border-bottom: 1px solid #ecdfc6; }
.en-hero-img { border-radius: 14px; box-shadow: 0 18px 40px rgba(70, 45, 20, 0.16); }
.en-hero-inner:not(:has(.en-hero-img)) { grid-template-columns: minmax(0, 1fr); text-align: center; max-width: 820px; }
.en-hero-inner:not(:has(.en-hero-img)) .en-verse { display: inline-block; text-align: left; }
.en-eyebrow { color: #9a7432; letter-spacing: 0.16em; }
.en-title { font-family: var(--serif); font-weight: 700; letter-spacing: 0.02em; }
.en-tag { color: var(--primary); font-family: var(--serif); font-weight: 600; }
.en-verse { border-left: 2px solid var(--gold); }
.en-verse p { font-family: var(--serif); color: #4a3a2a; }
.en-verse cite { color: #9a7432; }
.en-h, .mz-h { font-family: var(--serif); font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.en-sec { background: #fff; }
.en-own { background: var(--paper); }
.en-next { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.en-ask, .mz-card { border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 10px 28px rgba(70, 45, 20, 0.07); }
.en-k, .mz-k { color: #9a7432; }
.en-flow li::before { background: none; color: var(--primary); border: 1px solid var(--rule); font-family: var(--serif); }
.en-list small { color: #9a7432; }
@media (max-width: 860px) {
  .mz-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 20px 30px; }
  .mz-hero-img { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 9; }
}

/* one sub-menu (認識我們, 中文事工, English Ministry, every ministry) */
.mp-subnav, .ab-subnav { background: rgba(251, 247, 239, 0.94); border-bottom: 1px solid #ecdfc6; }
.mp-subnav a, .ab-subnav a { color: var(--ink); }
.mp-subnav a:hover, .ab-subnav a:hover { background: var(--linen); }
.mp-subnav a[aria-current="page"], .ab-subnav a[aria-current="page"], .mp-subnav[class*="mc-"] a[aria-current="page"] { background: var(--primary); color: #fff8ec; font-weight: 600; }

/* one card: the ministry lists (中文事工's six, the English Ministry's six), quietly numbered, no icon circles */
.mz-areas a { border-radius: 12px; border: 1px solid var(--rule); }
.mz-areas a:hover { border-color: #c9ad78; box-shadow: 0 10px 24px rgba(70, 45, 20, 0.08); }
.mz-num { background: none; width: auto; height: auto; place-items: start; color: #9a7432; font-size: 22px; }
.mz-areas small { color: var(--ink-2); }
.mz-closing { background: var(--paper); color: var(--ink); border-top: 1px solid #ecdfc6; border-bottom: 1px solid #ecdfc6; }
.mz-closing p { color: #4a3a2a; }
.mz-closing p::before, .mz-closing p::after { content: none; }

/* one form: fields, choices and the send button */
.section input[type="text"], .section input[type="email"], .section input[type="tel"], .section input[type="date"], .section input[type="number"], .section input[type="search"], .section select, .section textarea,
.am-form input:not([type="checkbox"]):not([type="radio"]), .am-form select, .am-form textarea, .bj-form input:not([type="checkbox"]):not([type="radio"]), .bj-form select, .bj-form textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: #fff; border: 1px solid #d9c6a0; border-radius: 8px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; }
.section select, .am-form select, .bj-form select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a6a55' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.section input:focus, .section select:focus, .section textarea:focus, .am-form :is(input, select, textarea):focus, .bj-form :is(input, select, textarea):focus { outline: 2px solid rgba(122, 36, 32, 0.35); outline-offset: 1px; border-color: var(--primary); }
.section button[type="submit"], .am-form button[type="submit"], .bj-form button[type="submit"] { background: var(--primary); border-color: var(--primary); color: #fff8ec; }
.section button[type="submit"]:hover, .am-form button[type="submit"]:hover, .bj-form button[type="submit"]:hover { background: var(--primary-hover); }
/* /ministries/: the other ministries — a small English (or Chinese) name above each; the hubs: no numbers at all */
.mz-areas.is-labeled .mz-num { grid-row: auto; grid-column: 1 / -1; font-family: var(--font); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.mz-areas.is-labeled a, .mz-areas a:not(:has(.mz-num)) { grid-template-columns: minmax(0, 1fr); }
/* the plain card and its pieces (青少年, and any page that needs two side by side) */
.ds-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ds-card { padding: 26px 26px 22px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); color: var(--ink); }
.ds-card > p { color: #4a3a2a; line-height: 1.8; }
.ds-card .mz-h { font-size: 26px; margin: 4px 0 10px; }
.ds-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--linen); font-size: 17px; }
.ds-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; font-weight: 600; }
.ab-hero .mz-chips { justify-content: center; }
@media (max-width: 760px) { .ds-two { grid-template-columns: minmax(0, 1fr); } }
/* the older page headers (兒童報名 .mp-hero, 主日學老師 .pt-hero) take the paper header's look */
.mp-hero, .pt-hero { background: linear-gradient(180deg, var(--paper) 0%, var(--linen) 100%); color: var(--ink); text-align: center; border-bottom: 1px solid #ecdfc6; }
.mp-hero .kicker, .mp-hero .kicker a, .pt-hero .kicker, .pt-hero .kicker a { color: #9a7432; letter-spacing: 0.16em; font-size: 15px; }
.mp-hero .headline, .pt-hero .headline { color: var(--ink); }
.mp-hero .subhead, .mp-hero .mp-summary, .pt-hero .subhead { color: var(--ink-2); }
.mp-hero .pill-white { background: var(--primary); border-color: var(--primary); color: #fff8ec; }

/* numbered steps (受洗, 兒童報名): one card each, a quiet serif number — no icons */
.kreg-steps { counter-reset: ds-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 28px 0 26px; padding: 0; list-style: none; }
.kreg-steps > li { counter-increment: ds-step; display: flex; flex-direction: column; justify-items: start; align-items: flex-start; gap: 2px; text-align: left; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.kreg-steps > li::before { content: counter(ds-step); font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.2; color: #9a7432; }
.kreg-steps > li > b { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.kreg-steps > li > small { font-size: 15px; color: var(--ink-2); }
.bj-form .pill { background: var(--primary); border: 1px solid var(--primary); }
.bj-form .pill:hover { background: var(--primary-hover); }
/* no emoji decorations (午餐的謝飯禱告, 兒童報名, 家人專區's tiles) */
.lx-grace-card::before, .kreg-kid legend::before { content: none; }
.ph-tile.is-locked .ph-tile-name::after { content: " · 需權限"; font-size: 0.75em; color: var(--ink-2); }
html[data-lang="en"] .ph-tile.is-locked .ph-tile-name::after { content: " · restricted"; }
.ph-owner::before { content: none; }
.lx-grace-card { border-radius: 12px; border: 1px solid var(--rule); box-shadow: 0 10px 28px rgba(70, 45, 20, 0.07); }
.lx-split .mz-hero-img { aspect-ratio: 3 / 2; }
.sg-key-arrow::before { color: #9a7432; }
/* 主日學 class covers: the first character on linen in the church's own tones (wine, coffee, gold, olive, slate,
   clay) — quiet, so the six read as one family */
.ssc-gen::after { content: none; }
.ssc-mark { color: #fff8ec; text-shadow: none; font-size: 84px; }
.ssc-tone-0 { background: #7a2420; } .ssc-tone-1 { background: #5a4130; } .ssc-tone-2 { background: #8a6a2e; }
.ssc-tone-3 { background: #5c6a48; } .ssc-tone-4 { background: #4a5560; } .ssc-tone-5 { background: #9a5a3a; }
.ssc-card { border-radius: 12px; border-color: var(--rule); }
.ssc-wrap, .ssd, .m-en, .m-kids, .m-zh { --mc: #9a7432; --mc-soft: #f4ecdf; }
.ssc-head h2::before { width: 3px; }
/* 中文事工's cards: one border, no coloured tops */
.wp-card, .wp-card:nth-child(2), .wp-card:nth-child(3), .za-terms article { background: #fff; border: 1px solid var(--rule); border-top: 1px solid var(--rule); border-radius: 12px; }
.mz-times li { border-radius: 10px; border: 1px solid #ecdfc6; border-left: 3px solid var(--gold); }
/* the header's verse is a line of text, not a box */
.ab-hero .ph-verse { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
/* 行事曆: the month sits below the header (no longer pulled up over a photo) */
.cl-month { margin-top: 28px; }
@media (max-width: 734px) { .cl-month { margin-top: 18px; } }
.kreg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .bj-path, .kreg-steps { grid-template-columns: minmax(0, 1fr); } }
/* forms: the send button is the one action colour; a child's box in the warm border; fields never overflow their row */
.kreg .pill[type="submit"], .am-form .pill[type="submit"] { background: var(--primary); border-color: var(--primary); }
.kreg .pill[type="submit"]:hover, .am-form .pill[type="submit"]:hover { background: var(--primary-hover); }
.kreg-kid { background: #fff; border-color: var(--rule); border-radius: 12px; }
.kreg-kid legend { color: var(--ink); }
.am-row > label { min-width: 0; }
.am-row > label > :is(input, select, textarea) { width: 100%; max-width: 100%; }
/* phones: the words first, the photo under them — on every split header */
@media (max-width: 860px) {
  .en-hero-inner { display: flex; flex-direction: column; align-items: stretch; }
  .en-hero-img { order: 2; aspect-ratio: 16 / 9; }
}
.kreg { border-color: var(--rule); border-radius: 12px; box-shadow: 0 10px 28px rgba(70, 45, 20, 0.07); }
.mz-chips span span, .en-chips span span { padding: 0; border: 0; background: none; border-radius: 0; font: inherit; }
/* 家人專區: the same paper header as the public pages (navy stays in the site header) */
.ph-hero { background: linear-gradient(180deg, var(--paper) 0%, var(--linen) 100%); color: var(--ink); border-bottom: 1px solid #ecdfc6; }
.ph-title { color: var(--ink); }
.ph-who, .ph-signin p { color: var(--ink-2); }
.ph-btn { background: var(--primary); color: #fff8ec; }
.ph-btn:hover { background: var(--primary-hover); }
.ph-signin .ph-note a { color: var(--link); }
/* 使用說明: the one dark card on the light hero, so the eye lands on it */
.ph-heads { display: grid; gap: 12px; max-width: 560px; margin: 20px auto 6px; }
.ph-heads.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.ph-guide, .ph-todo-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-radius: 14px; }
.ph-guide { background: var(--primary); color: #fff; text-align: left; text-decoration: none; box-shadow: 0 8px 22px rgba(90, 30, 20, .22); transition: background .15s, transform .15s; }
.ph-guide[hidden] { display: none; }
.ph-guide:hover, .ph-guide:focus-visible { background: var(--primary-hover); color: #fff; transform: translateY(-1px); text-decoration: none; }
.ph-guide-text { display: grid; gap: 2px; min-width: 0; }
.ph-guide-text strong { font-family: var(--serif); font-size: 24px; letter-spacing: .06em; }
.ph-guide-text > span { font-size: 16px; color: #f3e3d3; }
.ph-todo-card { border: 1px solid var(--primary); background: #fffdf8; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 14px; box-shadow: 0 8px 22px rgba(90, 30, 20, .1); }
.ph-todo-card[hidden] { display: none; }
.ph-todo-card:hover { background: #fff; }
.ph-todo-card .ph-guide-text > span { color: var(--ink-2); }
.ph-todo-count { flex: none; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 21px; font-weight: 700; line-height: 42px; text-align: center; }
.ph-guide-go { flex: none; padding: 7px 16px; border-radius: 999px; background: #fbf7ef; color: var(--primary); font-weight: 600; font-size: 15px; white-space: nowrap; }
@media (max-width: 640px) { .ph-heads.is-two { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 480px) { .ph-guide, .ph-todo-card { padding: 14px 16px; } .ph-guide-text strong { font-size: 21px; } .ph-guide-text > span { font-size: 15px; } }
.ph-signout { border-color: #d9c6a0; color: var(--ink-2); }
.tile-welcome .hw-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #2b2118; object-fit: cover; }

/* ==========================================================================================================
   首頁的書 — read like a traditional book (10/2026)
   One fixed page size per screen (the book never changes height as it turns); every page: a running head, the
   content, a page number. A chapter opens with its number, title, a gold rule and a verse as the epigraph. Text that
   doesn't fit ends in "…" (line clamps); announce.js flows the announcements across pages by measuring.
   ========================================================================================================== */
.bible-spread, .bible-spread.is-single { height: 700px; min-height: 0; }
@media (max-width: 734px) { .bible-spread, .bible-spread.is-single { height: 600px; } }
@media (max-width: 360px) { .bible-spread, .bible-spread.is-single { height: 580px; } }
.bible-page { display: flex; flex-direction: column; padding: 30px 50px 54px; }
.bible-page::before, .bp-bg { display: none; }
@media (max-width: 734px) { .bible-page { padding: 22px 26px 46px; } .bible-spread.is-single .bible-page { padding-right: 46px; } }

/* the running head and the page number */
.bible .bp-head { flex: none; margin: 0 0 16px; padding-bottom: 6px; border-bottom: 1px solid #ddcca6; font-family: var(--serif); font-size: 14px; letter-spacing: 0.3em; color: #9a7432; text-align: center; }
.bible .bp-num { bottom: 16px; font-size: 14px; color: #9a7432; letter-spacing: 0.1em; }

/* a chapter's opening */
.bk-ch { flex: none; text-align: center; }
.bk-ch-no { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.42em; color: #9a7432; }
.bk-ch-title { margin: 4px 0 0; font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; color: var(--ink); }
.bk-ch-title::after { content: ""; display: block; width: 72px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, #b8914a 20%, #b8914a 80%, transparent); }
.bk-epi { margin: 14px auto 0; padding: 0; max-width: 86%; border: 0; background: none; text-align: center; }
.bk-epi p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.75; color: #5a4a3a;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bk-epi cite { display: block; margin-top: 4px; font-style: normal; font-size: 14px; letter-spacing: 0.06em; color: #8e2d27; }
.bk-cont { flex: none; margin: 0 0 6px; text-align: center; font-family: var(--serif); font-size: 15px; letter-spacing: 0.2em; color: #9a7432; }

/* the text of a page */
.bk-body { flex: 1; min-height: 0; overflow: hidden; margin-top: 18px; display: flex; flex-direction: column; }
.bk-text { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.9; color: #2b2118; text-align: justify;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.bk-drop::first-letter { float: left; margin: 6px 8px 0 0; font-size: 3.1em; line-height: 0.9; font-weight: 700; color: #8e2d27; }
.bk-links { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin: auto 0 0; padding-top: 14px; font-size: 17px; font-weight: 600; }
.bk-links a { color: #8e2d27; }

/* 教會公告: when · where, the title, a few lines (then "…"), the way to the whole of it */
.bk-an { flex: none; padding: 12px 0 10px; border-top: 1px solid #e6d8b8; }
.bk-an:first-child { border-top: 0; padding-top: 2px; }
.bk-an-when { margin: 0; font-size: 14px; letter-spacing: 0.04em; color: #9a7432; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-an-title { margin: 2px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.45; font-weight: 700;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bk-an-title a { color: var(--ink); }
.bk-an-sum { margin: 4px 0 0; font-size: 17px; line-height: 1.7; color: #4a3a2a;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bk-an-more { display: flex; gap: 16px; margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.bk-an-more a { color: #8e2d27; }

/* 這個主日: time and gathering, two columns */
.bk-times { list-style: none; margin: 0; padding: 0; }
.bk-times li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dotted #d9c89f; font-size: 18px; }
.bk-times b { font-family: var(--serif); font-weight: 600; color: #8e2d27; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-times span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }

/* 我們的信仰: four lines, quietly numbered */
.bk-creed { margin: 0; padding: 0; list-style: none; counter-reset: bk; }
.bk-creed li { counter-increment: bk; position: relative; padding: 6px 0 6px 2em; font-family: var(--serif); font-size: 18px; line-height: 1.75; color: #2b2118;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bk-creed li::before { content: counter(bk, cjk-ideographic) "、"; position: absolute; left: 0; top: 6px; color: #9a7432; }
html[data-lang="en"] .bk-creed li::before { content: counter(bk) "."; }

/* 怎麼來 */
.bk-map { display: block; flex: 0 1 auto; min-height: 0; overflow: hidden; border: 1px solid #d9c89f; border-radius: 4px; }
.bk-map img { display: block; width: 100%; height: 100%; max-height: 300px; object-fit: cover; }
.bk-addr { margin: 10px 0 0; text-align: center; font-family: var(--serif); font-size: 18px; color: var(--ink); }

/* 奉獻 */
.bk-ways { margin: 0; }
.bk-ways > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dotted #d9c89f; font-size: 18px; }
.bk-ways dt { font-family: var(--serif); font-weight: 700; color: #8e2d27; }
.bk-ways dd { margin: 0; overflow-wrap: anywhere; }

/* the title page and 目錄 */
.bk-title { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.bk-orn { margin: 0; font-size: 24px; color: #b8914a; line-height: 1; }
.bk-orn-sm { margin-top: 18px; font-size: 22px; }
.bk-name { margin: 10px 0 0; font-family: var(--serif); font-size: 46px; font-weight: 700; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--ink); line-height: 1.2; }
.bk-name-2 { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: #9a7432; }
.bk-epi-title { margin-top: 18px; }
.bk-toc { width: 100%; max-width: 360px; margin: auto 0 0; padding-top: 16px; }
.bk-toc-h { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; letter-spacing: 0.3em; color: #9a7432; }
.bk-toc ol { list-style: none; margin: 0; padding: 0; }
.bk-toc a { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-family: var(--serif); font-size: 18px; color: var(--ink); text-decoration: none; }
.bk-toc a:hover span { color: #8e2d27; }
.bk-toc i { flex: 1; border-bottom: 1px dotted #b8a37a; transform: translateY(-5px); }
.bk-toc b { min-width: 1.4em; text-align: right; font-weight: 600; color: #9a7432; font-variant-numeric: tabular-nums; }

/* 本週經文 and the closing blessing: a page of scripture alone, like a plate in a book */
.bk-plate { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 4%; }
.bk-plate-k { margin: 0 0 18px; font-size: 14px; letter-spacing: 0.4em; color: #9a7432; }
.bk-plate-v { margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1.8; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.bk-plate-ref { margin: 16px 0 0; font-family: var(--serif); font-size: 17px; letter-spacing: 0.08em; color: #8e2d27; }
.bk-end .bk-plate-v { font-size: 24px; }
.bk-end > cite { display: block; margin: 16px 0 0; font-family: var(--serif); font-size: 17px; font-style: normal; letter-spacing: 0.08em; color: #8e2d27; } /* as .bk-plate-ref */
.bk-end-epi { margin-top: 26px; } .bk-end-epi p { font-size: 16px; }
.bk-epi[hidden] { display: none; }
/* 本週經文 on the title page: the whole verse, never cut short (scripture as given) */
.bk-epi.bk-epi-title p, .bk-epi.bk-end-epi p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.bk-sign { margin: 22px 0 0; font-family: var(--serif); font-size: 20px; letter-spacing: 0.3em; color: #5a4a3a; }

/* phones: the same book, sized for one page */
@media (max-width: 734px) {
  .bible .bp-head { font-size: 13px; margin-bottom: 10px; }
  .bk-ch-title { font-size: 27px; }
  .bk-ch-title::after { margin-top: 8px; }
  .bk-epi { max-width: 100%; margin-top: 10px; }
  .bk-epi p { font-size: 15.5px; line-height: 1.65; -webkit-line-clamp: 2; }
  .bk-body { margin-top: 12px; }
  .bk-text { font-size: 18px; line-height: 1.8; }
  .bk-an { padding: 9px 0 8px; }
  .bk-an-title { font-size: 19px; }
  .bk-an-sum { font-size: 16px; line-height: 1.6; -webkit-line-clamp: 2; }
  .bk-times li { font-size: 16.5px; padding: 6px 0; grid-template-columns: 5.6em minmax(0, 1fr); }
  .bk-creed li { font-size: 16.5px; line-height: 1.65; padding: 4px 0 4px 1.9em; }
  .bk-map img { max-height: 210px; }
  .bk-name { font-size: 36px; }
  .bk-toc a { font-size: 17px; padding: 4px 0; }
  .bk-plate-v { font-size: 24px; }
  .bk-end .bk-plate-v { font-size: 20px; }
  .bk-links { font-size: 16px; gap: 4px 16px; }
}

/* the table the book lies on: a linen cloth with a faint woven damask, and a soft light on the book */
.bible-wrap {
  background-color: #eee3cf;
  background-image:
    radial-gradient(ellipse 62% 70% at 50% 46%, rgba(255, 251, 242, 0.85) 0%, rgba(255, 251, 242, 0) 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b99d68' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M32 14c5 0 8 4 8 9 5 0 9 3 9 9s-4 9-9 9c0 5-3 9-8 9s-8-4-8-9c-5 0-9-3-9-9s4-9 9-9c0-5 3-9 8-9z'/%3E%3Cpath d='M32 26v12M26 32h12'/%3E%3C/g%3E%3Cg fill='%23b99d68' fill-opacity='.3'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='64' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='64' r='1.6'/%3E%3Ccircle cx='64' cy='64' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 64px 64px;
}
/* phones: the ribbon is a short bookmark at the top of the page, clear of the text; the pages pack a little tighter
   (an announcement's title is its link — 詳細 only on wide screens; 報名 stays) */
@media (max-width: 1279px) {
  .bible-spread.is-single .bible-ribbon { top: -6px; right: 22px; left: auto; height: 74px; }
}
@media (max-width: 734px) {
  .bible-spread.is-single .bible-page { padding-right: 26px; }
  .bk-an-more a:first-child { display: none; }
  .bk-an-more:not(:has(a + a)) { display: none; }
  .bk-an-more { margin-top: 2px; }
  .bk-an-title { font-size: 18px; }
  .bk-an-sum { font-size: 15.5px; }
  .bk-times li { padding: 4px 0; font-size: 16px; }
  .bk-creed li { font-size: 16px; line-height: 1.6; padding: 3px 0 3px 1.9em; }
  .bk-links { padding-top: 10px; }
}
.bk-small { margin-top: 14px; font-size: 17px; line-height: 1.8; color: #4a3a2a; -webkit-line-clamp: 4; }

/* Design refinements: keep the class facts readable on tablet widths and make the new Sunday School shortcut fit phones. */
@media (min-width: 735px) and (max-width: 900px) {
  .ssd-facts { grid-template-columns: 1fr 1fr; }
  .ssd-facts div:nth-child(3) { border-left: 0; }
  .ssd-facts div:nth-child(n + 3) { border-top: 1px solid #ece3d2; }
}
@media (max-width: 560px) {
  .hero2-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero2-acts .is-main { grid-column: 1 / -1; }
}

/* ==========================================================================================================
   Whole-site finish: quieter page chrome, more usable portal groups, and a real mobile calendar agenda.
   Keep the existing church palette and page layouts; these are shared details, not a new theme.
   ========================================================================================================== */
:focus-visible { outline: 3px solid #9a7432; outline-offset: 3px; }
.ph-tile-badge { background: var(--primary); }

/* 家人專區 › 我負責: administrators see many categories, so keep them tidy and open only the first available one. */
.ph-category-list { display: grid; gap: 10px; }
.ph-category { min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: #fffdf9; }
.ph-category[hidden] { display: none !important; }
.ph-category-summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; color: var(--ink); cursor: pointer; list-style: none; }
.ph-category-summary::-webkit-details-marker { display: none; }
.ph-category-summary::after { content: "+"; order: 3; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border: 1px solid var(--rule); border-radius: 50%; color: #7a2420; font-size: 20px; line-height: 1; }
.ph-category[open] > .ph-category-summary { border-bottom: 1px solid #efe5d4; }
.ph-category[open] > .ph-category-summary::after { content: "−"; }
.ph-category-title { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 0.04em; }
.ph-category-title::after { content: none; }
.ph-category-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--linen); color: #6e5127; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-category-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 12px; }
.ph-category .ph-tile { min-height: 100px; border-radius: 10px; background: #fff; }
/* 我負責's 共用／中文部／英文部 parts: no headings or boxes since 家人專區 has its own 中文部｜English Ministry sides
   (portal-home.js hides the other 部's part) — their tiles flow into the category like any other */
.ph-subsec, .ph-subgrid { display: contents; }
.ph-subsec[hidden] { display: none; }
.ph-sub { display: none; }
.ph-subsec .ph-sunday { grid-column: 1 / -1; margin: 0; }
/* 主日聚會: the coming Sunday's 週報 (portal-home.js) */
.ph-sunday { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid #eadfcb; border-radius: 10px; background: #fffaf0; }
.ph-sunday { padding: 8px 14px; }
.ph-sunday-head { font-size: 15px; cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.ph-sunday-head::-webkit-details-marker { display: none; }
.ph-sunday-head::after { content: "›"; margin-left: auto; color: #8a6430; transition: transform .15s; }
.ph-sunday-fold[open] > .ph-sunday-head::after { transform: rotate(90deg); }
.ph-sunday-fold[open] > .ph-sunday-head { margin-bottom: 6px; }
.ph-sunday-open { margin: 6px 0 0; font-size: 14px; }
.ph-sunday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ph-sunday-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 5px 0; border-top: 1px solid #f0e6d4; font-size: 15px; }
.ph-sunday-list li.is-mine { font-weight: 600; }
.ph-sunday-mark { min-width: 3em; font-size: 13px; }
.ph-sunday-who { color: #6b5a48; font-size: 14px; }
.ph-sunday-miss { color: #a31d1d; font-weight: 600; }
.ph-sunday-gap { color: #a31d1d; font-size: 14px; }
.ph-sunday-ok { color: #2e7d32; }
.ph-category-summary:focus-visible { position: relative; z-index: 1; outline-offset: -4px; }
@media (max-width: 560px) {
  .ph-category-summary { min-height: 54px; padding: 8px 12px; }
  .ph-category-title { font-size: 18px; }
  .ph-category-tiles { grid-template-columns: 1fr; padding: 9px; }
  .ph-category .ph-tile { min-height: 0; }
}

/* Church calendar: retain the month grid on wide screens; on phones, show the month as dated event cards. */
.cal-nav, .cal-today, .cal-chip { border-color: var(--rule); }
.cal-nav, .cal-today, .cal-chip { color: var(--ink); }
.cal-cell.is-sel { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-cell.is-today .cal-day { background: var(--primary); }
.cal-agenda { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.cal-agenda li a { border-radius: 8px; box-shadow: 0 1px 3px rgba(43, 33, 24, 0.04); }
.cal-agenda li a:focus-visible { outline-offset: 1px; }
.cal-month-day { padding: 10px 0 4px; border-top: 1px solid var(--rule); }
.cal-month-day:first-of-type { border-top: 0; padding-top: 0; }
.cal-month-day h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.cal-month-day.is-today h4 { color: var(--primary); }
.cal-agenda-month > h3 { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; }
@media (max-width: 734px) {
  .cal-head, .cal-grid { display: none; }
  .cal { margin-top: 22px; }
  .cal-agenda { margin-top: 0; padding: 15px; }
  .cal-month-day ul { margin: 0; }
  .cal-month-day li a { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 11px 12px; }
  .cal-month-day .ag-time { grid-column: 1 / -1; font-size: 14px; }
  .cal-month-day .ag-title { font-size: 17px; }
  .cal-month-day .ag-m { padding-right: 0; font-size: 13px; }
}

/* Long bulletins are easier to scan when their headings can be jumped to. */
.bl-toc { margin: 0 0 24px; border: 1px solid var(--rule); border-radius: 10px; background: #fffdf9; color: var(--ink); }
.bl-toc summary { display: flex; align-items: center; min-height: 48px; padding: 8px 14px; font-family: var(--serif); font-size: 17px; font-weight: 700; cursor: pointer; }
.bl-toc summary::after { content: "+"; margin-left: auto; color: var(--primary); font: 22px/1 var(--font); }
.bl-toc[open] summary { border-bottom: 1px solid #efe5d4; }
.bl-toc[open] summary::after { content: "−"; }
.bl-toc nav { padding: 6px 14px 12px; }
.bl-toc ol { margin: 0; padding-left: 1.4em; }
.bl-toc li { margin: 4px 0; color: #9a7432; }
.bl-toc li.bl-toc-sub { margin-left: 1em; list-style-type: circle; }
.bl-toc a { color: var(--link); }
.prose :is(h2, h3) { scroll-margin-top: 86px; }
.bl-toc a:focus-visible { outline-offset: 2px; }

/* ---------- 家人專區 › 活動相冊 (photos.js) ---------- */
.phx-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 18px; }
.phx-note { margin: 0; font-size: 15px; color: var(--ink-2); }
.phx-back { margin: 0 0 6px; font-weight: 600; }
.phx-title { margin: 0; font-family: var(--serif); font-size: 32px; color: var(--ink); }
.phx-meta { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }
.phx-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.phx-albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.phx-album { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.phx-album:hover { text-decoration: none; }
.phx-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--linen); border: 1px solid var(--rule); margin-bottom: 8px; }
.phx-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.phx-album:hover .phx-cover img { transform: scale(1.03); }
.phx-album-t { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.35; }
.phx-album-m { font-size: 15px; color: var(--ink-2); }
.phx-album.is-hidden, .phx-cell.is-hidden { opacity: 0.5; }
.phx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.phx-cell { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--linen); cursor: zoom-in; }
.phx-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phx-noimg { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 13px; color: var(--ink-2); word-break: break-all; }
.phx-play { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(43, 33, 24, 0.75); color: #fff8ec; font-size: 13px; }
.phx-flag { position: absolute; right: 6px; top: 6px; padding: 1px 8px; border-radius: 999px; background: #fff8ec; color: var(--primary); font-size: 12px; }
.phx-manage { position: relative; }
.phx-manage > summary { list-style: none; cursor: pointer; }
.phx-manage > summary::-webkit-details-marker { display: none; }
.phx-manage[open] > :not(summary) { margin-top: 8px; }
.phx-manage[open] { padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.phx-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.phx-form label { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-2); }
.phx-form input { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid #d9c6a0; border-radius: 8px; }
/* the uploader */
.phx-up { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: #fff; color: var(--ink); }
.phx-up::backdrop, .phx-view::backdrop { background: rgba(30, 22, 15, 0.6); }
.phx-up-inner { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.phx-up h2 { margin: 0; font-family: var(--serif); font-size: 24px; }
.phx-field { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ink-2); }
.phx-field :is(input, select) { font: inherit; font-size: 17px; color: var(--ink); padding: 9px 12px; border: 1px solid #d9c6a0; border-radius: 8px; background: #fff; }
.phx-new { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.phx-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border: 1.5px dashed #c9ad78; border-radius: 12px; background: var(--paper); text-align: center; cursor: pointer; }
.phx-drop.is-over { background: var(--linen); border-color: var(--primary); }
.phx-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.phx-drop b { font-size: 18px; color: var(--primary); }
.phx-queue { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.phx-q { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; padding: 7px 0; border-bottom: 1px solid #f0e6d2; font-size: 14px; }
.phx-q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phx-q-size { color: var(--ink-2); }
.phx-q-st { min-width: 4.5em; text-align: right; color: var(--ink-2); }
.phx-q-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #f0e6d2; overflow: hidden; }
.phx-q-bar i { display: block; height: 100%; background: var(--gold); transition: width 0.3s; }
.phx-q.is-done .phx-q-bar i { background: #5c7a3a; }
.phx-q.is-done .phx-q-st { color: #5c7a3a; }
.phx-q.is-error .phx-q-st { color: var(--primary); }
.phx-hint { margin: 0; font-size: 14px; color: var(--ink-2); }
.phx-up-buttons { display: flex; gap: 10px; justify-content: flex-end; }
/* the viewer */
/* the whole screen, measured from its edges (inset), not 100vw — Safari counts 100vw wider than what shows, which cut off
   the right side */
.phx-view { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: #17110c; color: #f4ecdf; overflow: hidden; }
.phx-view > * { box-sizing: border-box; max-width: 100%; }
.phx-view[open] { display: flex; flex-direction: column; }
/* the picture or video takes what's left between the bars, and never more than the screen is wide */
.phx-view-stage { flex: 1; min-height: 0; min-width: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 4px 12px; overflow: hidden; }
.phx-view-stage :is(img, video) { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.phx-view-stage > img { max-height: calc(100dvh - 200px); }
.phx-wait { color: #d9c6a0; }
.phx-view-top, .phx-view-nav { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.phx-view-nav { padding: 6px 12px 0; }
.phx-x, .phx-share, .phx-step { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 248, 236, 0.14); color: #fff8ec; font: inherit; font-size: 16px; cursor: pointer; }
.phx-x:hover, .phx-share:hover, .phx-step:hover { background: rgba(255, 248, 236, 0.26); }
.phx-share { background: #e8c77a; color: #2a1c08; font-weight: 600; }
.phx-share:hover { background: #f0d48f; }
.phx-step { flex: 1; max-width: 220px; font-size: 17px; }
.phx-view-nav { justify-content: space-between; }
.phx-view-count { margin-left: auto; color: #d9c6a0; font-size: 15px; font-variant-numeric: tabular-nums; }
.phx-share-box { position: relative; z-index: 2; margin: 8px 12px 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 248, 236, 0.1); }
.phx-share-box p { margin: 0 0 8px; font-size: 14px; color: #e8dcc6; }
.phx-share-url { padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); color: #fff8ec !important; font-size: 14px; word-break: break-all; -webkit-user-select: all; user-select: all; }
.phx-share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.phx-share-btn { flex: 1; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #e8c77a; color: #2a1c08; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.phx-share-btn + .phx-share-btn { background: rgba(255, 248, 236, 0.16); color: #fff8ec; }
.phx-share-m { color: #bfae8c !important; }
.phx-view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 20px 16px; }
.phx-view-cap { margin: 0; font-size: 15px; color: #d9c6a0; }
.phx-view-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.phx-view .ss-btn { background: rgba(255, 248, 236, 0.1); color: #fff8ec; border-color: rgba(255, 248, 236, 0.35); }
.phx-view select.phx-move { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 248, 236, 0.1); color: #fff8ec; border: 1px solid rgba(255, 248, 236, 0.35); max-width: 220px; }
.phx-view select.phx-move { appearance: auto; -webkit-appearance: auto; min-height: 0; }
.phx-move option { color: var(--ink); background: #fff; }
@media (max-width: 640px) {
  .phx-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .phx-album-t { font-size: 17px; }
  .phx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .phx-new { grid-template-columns: 1fr; }
  .phx-view-stage { padding: 4px 0; }
  .phx-step { min-width: 0; flex: 1; }
}
/* 活動相冊: tidying tools, picking files and folders, uploading in the background */
.phx-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.phx-filter { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.phx-filter select { font: inherit; font-size: 15px; padding: 5px 30px 5px 10px; min-height: 0; border: 1px solid #d9c6a0; border-radius: 999px; }
.phx-selbar { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #fff8ec; box-shadow: 0 8px 20px rgba(30, 22, 15, 0.2); }
.phx-selbar > span { margin-right: auto; font-weight: 600; }
.phx-selbar .ss-btn { background: rgba(255, 248, 236, 0.12); color: #fff8ec; border-color: rgba(255, 248, 236, 0.35); }
.phx-selbar select.phx-selmove { font: inherit; font-size: 14px; padding: 5px 10px; min-height: 0; border-radius: 999px; max-width: 200px; }
.phx-check { display: none; position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(30, 22, 15, 0.25); }
.phx-grid.is-selecting .phx-check { display: block; }
.phx-grid.is-selecting .phx-cell { cursor: pointer; }
.phx-cell.is-picked { outline: 3px solid var(--primary); outline-offset: -3px; }
.phx-cell.is-picked .phx-check { background: var(--primary); border-color: #fff; }
.phx-cell.is-picked .phx-check::after { content: "✓"; display: grid; place-items: center; height: 100%; color: #fff; font-size: 14px; line-height: 1; }
.phx-more { margin: 14px 0 0; text-align: center; color: var(--ink-2); }
.phx-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.phx-pick-btn { position: relative; overflow: hidden; cursor: pointer; }
.phx-pick-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.phx-drop { cursor: default; }
.phx-sum { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.phx-q.is-skip .phx-q-st { color: var(--ink-2); }
.phx-q.is-skip .phx-q-bar i { background: #c9b48a; width: 100% !important; }
.phx-dock { position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; min-width: 240px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff8ec; font: inherit; font-size: 15px; box-shadow: 0 10px 28px rgba(30, 22, 15, 0.3); cursor: pointer; }
.phx-dock-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 248, 236, 0.2); overflow: hidden; }
.phx-dock-bar i { display: block; height: 100%; width: 0; background: var(--gold-soft); transition: width 0.4s; }
@media (max-width: 734px) { .phx-dock { bottom: 84px; } .phx-selbar { top: 60px; } }
/* 活動相冊 › tabs, 精選, 教會典藏 */
.phx-tabs { display: flex; gap: 6px; margin: 0 0 20px; border-bottom: 1px solid var(--rule); }
.phx-tabs a { padding: 8px 16px 10px; font-family: var(--serif); font-size: 19px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.phx-tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--primary); }
.phx-year { margin: 26px 0 12px; font-family: var(--serif); font-size: 26px; color: var(--ink); border-bottom: 1px solid #ecdfc6; padding-bottom: 6px; }
.phx-year:first-child { margin-top: 0; }
.phx-curate-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 14px 0 8px; }
.phx-n { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-2); }
.phx-n input { width: 7em; font: inherit; font-size: 16px; padding: 7px 10px; min-height: 0; border: 1px solid #d9c6a0; border-radius: 8px; }
.phx-curate-tabs { display: flex; gap: 6px; margin: 10px 0 12px; }
.phx-curate-tabs button { font: inherit; font-size: 15px; padding: 5px 14px; border: 1px solid #d9c6a0; border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.phx-curate-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff8ec; border-color: var(--ink); }
.phx-pickcell { cursor: pointer; }
.phx-pickcell.is-suggested { outline: 3px solid var(--gold); outline-offset: -3px; }
.phx-pickcell.is-keep { outline: 3px solid var(--primary); outline-offset: -3px; }
.phx-pickcell.is-drop { opacity: 0.35; }
.phx-pickcell.is-archived { outline-color: #5c7a3a; }
.phx-picktag { position: absolute; left: 6px; bottom: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 248, 236, 0.92); color: var(--ink); font-size: 12px; font-weight: 600; }
.phx-pickcell.is-keep .phx-picktag { background: var(--primary); color: #fff8ec; }
.phx-pickcell.is-archived .phx-picktag { background: #5c7a3a; color: #fff; }
.phx-pickcap { margin: 4px 2px 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted, #6b5f55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phx-ask { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: var(--paper); border: 1px solid #ecdfc6; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.phx-dock { gap: 4px; padding: 12px 22px; min-width: 280px; border-radius: 16px; }
.phx-dock-text { font-weight: 600; }
.phx-dock-note { font-size: 13px; color: #d9c6a0; }
@media (min-width: 735px) { .phx-dock { bottom: 24px; } }
/* 活動相冊 › the upload dialog, three steps (10/2026 redesign) */
.phx-up { width: min(600px, calc(100vw - 20px)); border-radius: 16px; box-shadow: 0 24px 60px rgba(30, 22, 15, 0.35); }
.phx-up-inner { gap: 0; padding: 0; }
.phx-up-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid #f0e6d2; }
.phx-up-head h2 { margin: 0; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.phx-up-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--linen); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.phx-step { padding: 16px 22px 4px; }
.phx-step-k { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
.phx-step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff8ec; font-size: 14px; font-weight: 700; flex: none; }
.phx-up .phx-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; color: var(--ink); padding: 10px 12px; min-height: 46px; border: 1px solid #d9c6a0; border-radius: 10px; background: #fff; }
.phx-up .phx-new { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.phx-up .phx-new label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.phx-up .phx-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 14px 16px; border: 1.5px dashed #c9ad78; border-radius: 12px; background: var(--paper); cursor: default; }
.phx-up .phx-drop.is-over { background: var(--linen); border-color: var(--primary); }
.phx-up .phx-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.phx-up .phx-drop-hint { margin: 0; font-size: 14px; color: var(--ink-2); }
.phx-up .phx-limits { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
/* one button style for the dialog: the main action in wine with cream letters, the rest outlined */
.phx-up .phx-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid #d9c6a0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.phx-up .phx-btn:hover { background: var(--linen); }
.phx-up .phx-btn-main { background: var(--primary); border-color: var(--primary); color: #fff8ec; }
.phx-up .phx-btn-main:hover { background: var(--primary-hover); color: #fff8ec; }
.phx-up .phx-btn:disabled { opacity: 0.55; cursor: default; }
.phx-up .phx-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
/* the overall bar */
.phx-total { display: block; height: 14px; border-radius: 7px; background: #f0e6d2; overflow: hidden; }
.phx-total i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, var(--gold), #c9a45e); transition: width 0.4s; }
.phx-up .phx-sum { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.phx-files { margin: 8px 0 0; }
.phx-files > summary { cursor: pointer; font-size: 14px; color: var(--link); }
.phx-files .phx-queue { margin-top: 6px; max-height: 220px; }
.phx-up-msg { margin: 0; padding: 8px 22px 0; }
.phx-up .phx-up-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; margin-top: 8px; border-top: 1px solid #f0e6d2; }
@media (max-width: 560px) {
  .phx-up .phx-new { grid-template-columns: minmax(0, 1fr); }
  .phx-up .phx-up-buttons .phx-btn { flex: 1 1 auto; }
}
.phx-up .phx-btn span { color: inherit; font-size: inherit; }
/* 活動相冊 › 全部 / 照片 / 影片 */
.phx-kinds { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--linen); border: 1px solid #ecdfc6; }
.phx-kinds button { font: inherit; font-size: 15px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; }
.phx-kinds button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(43, 33, 24, 0.15); }
.phx-kinds button span { color: #9a7432; font-size: 13px; }
.phx-tools { gap: 10px 14px; }
.phx-selbar .phx-del { border-color: rgba(255, 200, 190, 0.6); }
.phx-view .phx-del { border-color: rgba(255, 200, 190, 0.6); }
/* 活動相冊 › 小組相冊 */
.phx-glist { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.phx-gcard { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.phx-gcard:hover { border-color: #c9ad78; text-decoration: none; box-shadow: 0 8px 20px rgba(70, 45, 20, 0.08); }
.phx-gcard b { font-family: var(--serif); font-size: 20px; }
.phx-gcard span { font-size: 14px; color: #9a7432; }
.phx-ghead { margin: 0 0 14px; }
.phx-people { margin-top: 10px; }
.phx-people > summary { list-style: none; cursor: pointer; display: inline-flex; }
.phx-people > summary::-webkit-details-marker { display: none; }
.phx-people[open] { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.phx-plist { list-style: none; margin: 8px 0; padding: 0; }
.phx-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0e6d2; }
.phx-person.is-off .phx-pname { color: var(--ink-2); }
.phx-person small { color: var(--ink-2); font-size: 14px; }
.phx-pname small { color: #9a7432; }
.phx-ptick { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }
.phx-ptick input { width: 18px; height: 18px; accent-color: var(--primary); }
/* 精選 › scanning */
.phx-scan { display: flex; gap: 14px; align-items: flex-start; margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px solid #ecdfc6; }
.phx-scan-main { flex: 1; min-width: 0; }
.phx-scan-text { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.phx-scan-note { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.phx-spin { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 3px solid #ecdfc6; border-top-color: var(--primary); animation: phx-spin 0.9s linear infinite; }
@keyframes phx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .phx-spin { animation: none; } }
.phx-total i.is-unknown { width: 35% !important; animation: phx-slide 1.4s ease-in-out infinite; }
@keyframes phx-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .phx-total i.is-unknown { animation: none; } }

/* 租用管理 › 文件: what the AI read (a suggestion to check) */
.rt-ai { flex-basis: 100%; text-align: left; margin: 6px 0 2px; padding: 8px 12px; border-left: 3px solid var(--gold, #b8893a); background: rgba(184, 137, 58, 0.07); font-size: 14px; line-height: 1.5; }
.rt-ai p { margin: 2px 0; }
.rt-ai.is-err { color: var(--muted, #6b5f55); border-left-color: #c9bfb3; }
.rt-ai-warn { color: #8a3b12; }

/* 文件智能識別: 「從帳單讀取」 above a bill form */
.hv-bill-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 12px; text-align: left; }
.hv-bill-read label { cursor: pointer; }


/* 報銷: the receipts first (step 1), then the form (step 2) */
.rb-step1 { margin: 4px 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(184, 137, 58, 0.05); }
.rb-step1 .ecc-photos-label { margin: 0; }
.rb-step1-hint { margin: 4px 0 6px; }
.rb-stepno { display: inline-block; margin-right: 6px; color: var(--primary); }
.rb-step2 { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 15px; }

/* 資源庫: an easy browser — libraries on the left (wide) or one scrolling row (narrow), folder tiles, a file list.
   The layout follows the box's own width (container queries), so it's the same embedded in 兒童主日學. */
.res-app { container-type: inline-size; }
.rx { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rx-libs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.rx-libs::-webkit-scrollbar { display: none; }
.rx-libs button { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; background: #fff; font: inherit; font-size: 16px; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; }
.rx-libs button small { font-size: 12px; color: var(--text-2); }
.rx-libs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }
.rx-libs button[aria-selected="true"] small { color: rgba(255, 255, 255, 0.75); }
.rx-main { min-width: 0; }
.rx-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.rx-up { flex: none; border: 1px solid var(--line); border-radius: 980px; background: #fff; font: inherit; font-size: 15px; padding: 6px 14px; cursor: pointer; color: var(--text); }
.rx-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; font-size: 17px; }
.rx-crumbs button { border: 0; background: none; font: inherit; color: var(--link); cursor: pointer; padding: 4px 4px; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-crumbs button:last-child { color: var(--text); font-weight: 600; }
.rx-sep { color: var(--text-2); }
.rx-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.rx-q { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 980px; background: #fff; }
.rx-sort { display: inline-flex; border: 1px solid var(--line); border-radius: 980px; overflow: hidden; background: #fff; }
.rx-sort button { border: 0; background: none; font: inherit; font-size: 14px; padding: 7px 12px; cursor: pointer; color: var(--text-2); }
.rx-sort button[aria-pressed="true"] { background: var(--gray); color: var(--text); font-weight: 600; }
.rx-upload { cursor: pointer; font-size: 16px; padding: 8px 18px; }
.rx-status { margin: 6px 0; min-height: 1em; }
.rx-status:empty { display: none; }
.rx-folders { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rx-folders:empty, .rx-files:empty { display: none; }
.rx-folder { width: 100%; height: 100%; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; color: var(--text); cursor: pointer; }
.rx-folder:hover { border-color: var(--text-2); background: #fffdf8; }
.rx-folder-ico { grid-row: 1 / 3; width: 34px; height: 28px; border-radius: 4px 8px 8px 8px; background: #f3d78a; position: relative; }
.rx-folder-ico::before { content: ""; position: absolute; left: 0; top: -5px; width: 14px; height: 7px; border-radius: 4px 4px 0 0; background: #e9c66a; }
.rx-folder-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-folder-n { font-size: 13px; color: var(--text-2); }
.rx-files { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.rx-file { display: flex; align-items: center; border-top: 1px solid #ece7df; }
.rx-file:first-child { border-top: 0; }
.rx-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; color: var(--text); text-decoration: none; }
.rx-open:hover { background: var(--gray); text-decoration: none; }
.rx-open .res-ico { grid-row: 1 / 3; }
.rx-fname { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.rx-fmeta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.rx-sp { flex: none; font-size: 13px; margin-right: 14px; color: var(--text-2); white-space: nowrap; }
.rx-more { margin-top: 6px; }
@container (min-width: 760px) {
  .rx { grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
  .rx-libs { flex-direction: column; overflow: visible; position: sticky; top: 90px; padding: 0; margin: 0; }
  .rx-libs button { white-space: normal; width: 100%; border-radius: 10px; }
  .rx-folders { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@container (max-width: 520px) {
  .rx-sp { display: none; }
  .rx-crumbs button { max-width: 9em; }
}
.container.narrow:has(> #res-app), .container.narrow:has(> .res-app) { max-width: 1100px; }

/* 誰可以使用: a small button under each tool page's title; the details on hover (computer) or tap (phone) */
.pt-perm-pop { position: relative; display: inline-block; margin-top: 10px; }
.pt-perm-btn { border: 1px solid var(--line); border-radius: 980px; background: rgba(255, 255, 255, 0.7); font: inherit; font-size: 14px; color: var(--text-2); padding: 4px 12px; cursor: pointer; }
.pt-perm-btn:hover, .pt-perm-pop.is-open .pt-perm-btn { color: var(--text); border-color: var(--text-2); }
.pt-perm-card { display: none; position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(40, 30, 20, 0.14); text-align: left; font-size: 15px; line-height: 1.5; color: var(--text); }
.pt-perm-pop.is-open .pt-perm-card { display: block; }
@media (hover: hover) { .pt-perm-pop:hover .pt-perm-card { display: block; } .pt-perm-pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } }
.pt-perm-card .pt-perm li { grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; }
.pt-perm-card .pt-perm li:first-child { border-top: 0; }
.pt-perm-card .pt-perm-what { font-size: 14px; }
.pt-perm-h { margin: 12px 0 4px; font-weight: 600; font-size: 14px; color: var(--text); }
.pt-perm-store { margin: 0 0 6px; }

/* 家人專區 › 待辦: three groups — 有期限 (red mark, when), 等您決定, 可以晚點做 (quieter; 先不提醒) — compact rows */
.ph-todo-list { background: #fff; border-color: var(--line); }
.ph-todo-list li + li { border-top: 1px solid #f0e8da; }
.ph-todo-band { padding: 10px 16px 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); background: #fbf7f0; }
.ph-todo-list li.ph-todo-band + li { border-top: 0; }
.ph-todo-band.is-due { color: #9b2c1f; }
.ph-todo-row { display: flex; align-items: center; }
.ph-todo-row > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 17px; color: var(--text); }
.ph-todo-row.is-due > a { box-shadow: inset 3px 0 0 #b3412f; }
.ph-todo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ph-todo-what { line-height: 1.35; }
.ph-todo-sub { font-size: 13.5px; color: var(--text-2); line-height: 1.4; margin-top: 1px; }
.ph-todo-row.is-due .ph-todo-sub { color: #9b2c1f; }
.ph-todo-row.is-later .ph-todo-what { color: var(--text-2); }
.ph-todo-list .ph-todo-n { min-width: 28px; height: 26px; line-height: 26px; font-size: 14px; padding: 0 8px; }
.ph-todo-row.is-later .ph-todo-n { background: #ece5d9; color: var(--text-2); }
.ph-todo-list .ph-todo-go { font-size: 20px; }
.ph-todo-snooze { flex: none; margin-right: 12px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; padding: 6px 4px; }
.ph-todo-snooze:hover { color: var(--text); text-decoration: underline; }
.ph-todo-more { text-align: center; }
.ph-todo-more button { border: 0; background: none; font: inherit; font-size: 15px; color: var(--link); cursor: pointer; padding: 10px; width: 100%; }
.ph-todo.is-clear .ph-todo-list { border-style: dashed; }
.ph-todo .ph-todo-none { font-size: 16px; padding: 10px 16px; }
@media (max-width: 560px) {
  .ph-todo-row > a { flex: 1 1 100%; padding: 10px 12px; font-size: 16px; gap: 10px; }
  .ph-todo-row { flex-wrap: wrap; }
  .ph-todo-snooze { margin: -8px 0 6px 12px; padding: 2px 0; font-size: 12.5px; }
}

/* a Microsoft 365 sign-in for another account than the website's (portal-auth.js) */
.lscc-auth-mismatch { position: relative; max-width: 960px; margin: 14px auto; padding: 12px 44px 12px 16px; border: 1px solid #e6b8a8; border-radius: 12px; background: #fdf1ec; color: #6b2a15; font-size: 15px; line-height: 1.5; }
.lscc-auth-mismatch button { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 16px; color: inherit; cursor: pointer; }


.spa-sub { font-size: 15px; color: var(--text-2); margin: 14px 0 4px; }

/* ---------- LCCD 後台 (/lccd/admin/, lccd-admin.js) ---------- */
.lc { max-width: 1040px; margin: 0 auto; padding: 24px 20px 64px; }
.lc h1 { margin: 4px 0 16px; font-size: 32px; }
.lc-top { margin: 0; color: var(--text-2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lc-top select { font: inherit; font-size: 15px; }
.lc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.lc-tabs button { font: inherit; font-size: 17px; padding: 10px 16px; border: 0; background: none; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.lc-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.lc-status { min-height: 1.4em; margin: 0 0 8px; color: var(--text-2); }
.lc-status.is-bad, .lc-dlg-status { color: #b3261e; }
.lc-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.lc-chip { font: inherit; font-size: 15px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 980px; background: #fff; cursor: pointer; display: inline-flex; gap: 6px; }
.lc-chip[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.lc-chip b { font-weight: 600; }
.lc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lc-row-main { width: 100%; display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.lc-row-main:hover { background: #f7f7f8; }
.lc-row-id { color: var(--text-2); font-size: 14px; }
.lc-row-what b { display: block; font-weight: 600; }
.lc-row-what small { color: var(--text-2); }
.lc-row-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.lc-badge { font-size: 13px; padding: 2px 10px; border-radius: 980px; background: #f0f0f2; white-space: nowrap; }
.lc-st-Submitted .lc-badge, .lc-st-Returned .lc-badge { background: #fdf0db; color: #8a4f0a; }
.lc-st-Approved .lc-badge { background: #e3effc; color: #0b4f8c; }
.lc-st-Paid .lc-badge { background: #e3f3e6; color: #1d6b31; }
.lc-st-Declined .lc-badge, .lc-st-Voided .lc-badge, .lc-st-Withdrawn .lc-badge { color: var(--text-2); }
.lc-empty { color: var(--text-2); }
.lc-dlg { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: 14px; padding: 0; }
.lc-dlg::backdrop { background: rgba(0, 0, 0, 0.35); }
.lc-dlg-form { padding: 18px 20px 20px; }
.lc-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.lc-dlg-head h2 { margin: 0; font-size: 21px; }
.lc-x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--text-2); padding: 4px 8px; }
.lc-dlg label { display: block; font-size: 15px; color: var(--text-2); margin: 0 0 10px; }
.lc-dlg input:not([type=checkbox]), .lc-dlg select, .lc-dlg textarea, .lc-settings input, .lc-settings select, .lc-settings textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 16px; color: var(--text); padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.lc-steps { list-style: none; margin: 0; padding: 0; }
.lc-steps > li { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.lc-steps h3, .lc-h3 { margin: 0 0 8px; font-size: 17px; }
.lc-hint { margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
.lc-dlg label.lc-file { display: inline-block; width: auto; margin: 0; color: var(--text); font-size: 16px; }
.lc-thumbs, .lc-receipts { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.lc-thumb, .lc-receipts a { position: relative; width: 112px; display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; }
.lc-thumb img, .lc-receipts img { width: 112px; height: 112px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.lc-thumb small, .lc-receipts small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.lc-thumb .lc-x { position: absolute; top: 2px; right: 2px; background: #fff; border-radius: 50%; padding: 0 6px; }
.lc-pdf { width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #f7f7f8; font-weight: 600; color: var(--text-2); }
.lc-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 12px; }
.lc-table th, .lc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lc-table th { font-weight: 600; font-size: 13px; color: var(--text-2); }
.lc-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-table .is-out { color: #8a2a1a; } .lc-table .is-in { color: #1d6b31; }
.lc-lines input { margin: 0; }
.lc-lines td:nth-child(1) { width: 150px; } .lc-lines td:nth-child(3) { width: 110px; } .lc-lines td:nth-child(4) { width: 32px; }
.lc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.lc-dl dt { color: var(--text-2); } .lc-dl dd { margin: 0; }
.lc-hist { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.lc-hist small { color: var(--text-2); }
.lc-act { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.lc-act legend, .lc-act summary { font-weight: 600; }
.lc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.lc-note { border: 1px solid var(--amber-soft); background: #fdf7ec; border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.lc-note p { margin: 6px 0; font-size: 15px; }
.lc-note ul { margin: 6px 0 0; padding-left: 18px; }
.lc-invites li { margin: 8px 0; }
.lc-invites [data-c-out] { display: block; }
.lc-org { margin: 0 0 20px; }
.lc-org h2 { font-size: 19px; margin: 0 0 6px; }
.lc-org h2 small { font-size: 13px; font-weight: normal; color: var(--text-2); border: 1px solid var(--line); border-radius: 980px; padding: 1px 8px; }
.lc-people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lc-people li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.lc-people li > small { grid-column: 1; color: var(--text-2); overflow-wrap: anywhere; }
.lc-people li > .link-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.lc-role { font-size: 12px; background: #f0f0f2; border-radius: 980px; padding: 1px 8px; margin-left: 4px; }
.lc-roles { border: 0; padding: 0; margin: 6px 0; }
.lc-roles label { display: inline-flex; gap: 6px; margin-right: 14px; color: var(--text); }
.lc-sums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.lc-sums div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.lc-sums small { display: block; color: var(--text-2); }
.lc-sums b { font-size: 22px; font-variant-numeric: tabular-nums; }
.lc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lc-scroll { overflow-x: auto; }
.lc-nowrap th, .lc-nowrap td { white-space: nowrap; }
.lc-sub { margin: -6px 0 16px; }
.lc-tiers { margin: 0 0 18px; }
.lc-tiers summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.lc-tiers small { color: var(--text-2, #555); }
.lc-settings-h { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .lc-blines tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .lc-blines td { border: 0; padding: 0; }
  .lc-blines td:last-child { grid-column: 1 / -1; }
}
.lc-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.lc-crumbs { margin: 0 0 12px; font-size: 16px; }
.lc-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lc-files li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.lc-file-row { flex: 1; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 4px; border: 0; background: none; font: inherit; text-align: left; color: var(--text); text-decoration: none; cursor: pointer; min-width: 0; }
.lc-file-row:hover { background: #f7f7f8; text-decoration: none; }
.lc-file-row b { font-weight: 500; overflow-wrap: anywhere; }
.lc-file-row small { color: var(--text-2); white-space: nowrap; }
.lc-folder, .lc-doc { width: 18px; height: 14px; border: 1.5px solid var(--text-2); border-radius: 2px; }
.lc-folder { border-top-width: 4px; }
.lc-doc { width: 13px; height: 16px; }
.lc-bar label.lc-file { cursor: pointer; }
.lc-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 15px; color: var(--text-2); }
.lc-dlg label.lc-check { display: flex; gap: 8px; align-items: center; color: var(--text); }
.lc-bar select { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 980px; background: #fff; }
.lcp-sponsors h3 { margin: 18px 0 6px; font-size: 17px; }
.lcp-sponsors ul { margin: 0; padding-left: 1.2em; line-height: 1.9; }
.lc-settings h2 { font-size: 19px; margin: 18px 0 8px; }
.lc-settings label { display: block; color: var(--text-2); font-size: 15px; margin: 0 0 10px; }
@media (max-width: 640px) {
  .lc-row-main { grid-template-columns: 1fr auto; }
  .lc-row-id { display: none; }
  .lc-badge { grid-column: 1 / -1; justify-self: start; }
  .lc-split { grid-template-columns: 1fr; }
  .lc-sums { gap: 6px; }
  .lc-sums div { padding: 8px 10px; }
  .lc-sums b { font-size: 17px; }
  .lc-lines thead { display: none; }
  .lc-lines tr { display: grid; grid-template-columns: 1fr 100px 32px; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .lc-lines td { border: 0; padding: 0; width: auto !important; }
  .lc-lines td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- LCCD public page (/lccd/, src/lccd.njk) ---------- */
.lcp-title { letter-spacing: 0.02em; }
.lcp { max-width: 760px; margin: 0 auto; padding: 24px 22px 72px; }
.lcp section { padding: 28px 0; border-bottom: 1px solid #e7dcc7; }
.lcp-h { margin: 0 0 14px; font-family: var(--serif); font-size: 28px; color: #231a10; }
.lcp-h3 { margin: 22px 0 10px; font-size: 19px; }
.lcp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.lcp-facts dt { color: var(--text-2); }
.lcp-facts dd { margin: 0; }
.lcp-list { margin: 0; padding-left: 1.2em; line-height: 1.9; }
.lcp-note { color: var(--text-2); margin: 14px 0 0; }
.lcp-program { list-style: none; margin: 0; padding: 0; }
.lcp-program li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid #efe7d8; }
.lcp-time { color: var(--text-2); font-variant-numeric: tabular-nums; }
.lcp-program small { display: block; color: var(--text-2); font-size: 15px; }
.lcp-orgs { margin: 10px 0 0; padding-left: 1.2em; line-height: 1.9; }
.lcp-orgs .t-zh { color: var(--text-2); margin-left: 6px; }
.lcp-table { width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 8px; }
.lcp-table th, .lcp-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #efe7d8; vertical-align: top; }
.lcp-table th { font-size: 14px; color: var(--text-2); font-weight: 600; }
.lcp-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lcp-form label { display: block; margin: 0 0 12px; font-size: 15px; color: var(--text-2); }
.lcp-form input:not([type=checkbox]), .lcp-form select, .lcp-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 17px; color: var(--text); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lcp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.lcp-form fieldset { border: 0; padding: 0; margin: 4px 0 14px; }
.lcp-form legend { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.lcp-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lcp-checks label, .lcp-form label.lcp-check { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: var(--text); font-size: 17px; }
.lcp-form label.lcp-check { margin: 0 0 12px; }
.lcp-checks small { color: var(--text-2); }
.lcp-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lcp-status { color: #b3261e; min-height: 1.4em; }
.lcp-done { font-size: 18px; color: #1d6b31; }
.lcp-admin { margin: 28px 0 0; font-size: 15px; text-align: right; }
.lcp-admin a { color: var(--text-2); }
@media (max-width: 640px) {
  .lcp-h { font-size: 24px; }
  .lcp-table thead { display: none; }
  .lcp-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid #efe7d8; }
  .lcp-table td { border: 0; padding: 0; }
  .lcp-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--text-2); font-size: 15px; }
}

/* ---------- 午餐帳戶: ordering (lunch.js), my account (/lunch/account/), finance (/portal/lunch-accounts/) ---------- */
.lu-price { color: var(--text-2); font-variant-numeric: tabular-nums; }
.lu-cost { font-weight: 600; font-variant-numeric: tabular-nums; }
.lu-acct { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lu-acct b { font-size: 19px; font-variant-numeric: tabular-nums; }
.lu-acct a { margin-left: auto; }
.lu-acct.is-low b, .lu-after.is-over { color: #b3261e; }
.lu-after { color: var(--text-2); }
.la2, .la3 { max-width: 880px; margin: 0 auto; padding: 24px 20px 64px; }
.la2 h1, .la3 h1 { margin: 6px 0 16px; font-size: 30px; }
.la2 h2, .la3-h { font-size: 20px; margin: 24px 0 8px; }
.la3-h small { font-size: 14px; color: var(--text-2); font-weight: normal; }
.la2-back a { color: var(--text-2); }
.la2-status.is-bad, .la3-status.is-bad { color: #b3261e; }
.la2-balance { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.la2-balance b { font-size: 34px; font-variant-numeric: tabular-nums; }
.la2-balance small { color: var(--text-2); }
.la2-balance.is-low b { color: #b3261e; }
.la2-top ol { padding-left: 1.3em; line-height: 1.9; }
.la2-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; }
.la2-form, .la3-direct, .la3-confirm { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.la2-form label, .la3-direct label, .la3-confirm label { display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.la3-direct select, .la2-form input, .la3-direct input, .la3-confirm input, .la3 .lc-bar input[type=search], .la3 .lc-bar input[type=date] { font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); }
.la2-form input[name=amount], .la3 input[name=amount], .la3 input[name=dAmount] { width: 110px; }
.la2-msg { flex-basis: 100%; margin: 0; color: var(--text-2); }
.la2-claims { list-style: none; padding: 0; margin: 12px 0 0; }
.la2-claims li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.la2-claims small { flex-basis: 100%; color: var(--text-2); }
.la2-tag { font-size: 13px; padding: 1px 9px; border-radius: 980px; background: #f0f0f2; }
.la2-tag.is-pending { background: #fdf0db; color: #8a4f0a; } .la2-tag.is-done { background: #e3f3e6; color: #1d6b31; } .la2-tag.is-rejected { color: #b3261e; }
.la2-table, .la3 .lc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.la2-table th, .la2-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.la2-table .n, .la3 .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.la2-table .is-out, .la3 .is-out { color: #8a2a1a; } .la2-table .is-in, .la3 .is-in { color: #1d6b31; }
.la3-claims { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.la3-claims li { display: grid; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.la3-pick { min-width: 260px; flex: 1; }
.la2-amounts { border: 0; padding: 0; margin: 0; display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.la2-amounts legend { font-size: 14px; color: var(--text-2); padding: 0; margin-bottom: 4px; }
.la2-amt { display: inline-flex !important; gap: 6px; align-items: center; font-size: 17px !important; color: var(--text) !important; }
/* 我的午餐帳戶 — three numbers, the top-up steps, progress */
.la2-sums { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.la2-sum { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.la2-sum small { color: var(--text-2); font-size: 13px; }
.la2-sum b { font-size: 22px; font-variant-numeric: tabular-nums; }
.la2-sum.is-main b { font-size: 32px; }
.la2-sum.is-low b { color: #b3261e; }
.la2-buttons { display: flex; gap: 10px; margin: 16px 0 8px; }
.la2-buttons .pill, .la2-buttons .ss-btn { font-size: 18px; padding: 10px 26px; }
.la2-zelle { margin: 6px 0 14px; color: var(--text-2); }
.la2-zelle b { color: var(--text); }
.la2-zelle .is-missing { color: #8a4f0a; }
.la2-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2, #f4f1ec); color: var(--text-2); }
.la2-panel { margin: 8px 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.la2-panel h2 { margin: 6px 0 10px; font-size: 21px; }
.la2-hint { color: var(--text-2); font-size: 15px; margin: 6px 0 12px; }
.la2-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 14px 0 0; }
.la2-steps, .la2-track { list-style: none; display: flex; gap: 0; margin: 0 0 6px; padding: 0; counter-reset: s; }
.la2-steps li, .la2-track li { flex: 1; position: relative; padding-top: 22px; font-size: 13px; color: var(--text-2); text-align: center; counter-increment: s; }
.la2-steps li::before, .la2-track li::before { content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 11px; line-height: 16px; }
.la2-steps li::after, .la2-track li::after { content: ""; position: absolute; top: 9px; left: calc(50% + 12px); right: calc(-50% + 12px); height: 1.5px; background: var(--line); }
.la2-steps li:last-child::after, .la2-track li:last-child::after { display: none; }
.la2-steps li.is-done, .la2-track li.is-done { color: #1d6b31; }
.la2-steps li.is-done::before, .la2-track li.is-done::before { content: "✓"; border-color: #1d6b31; color: #1d6b31; }
.la2-steps li.is-now, .la2-track li.is-now { color: var(--text); font-weight: 600; }
.la2-steps li.is-now::before, .la2-track li.is-now::before { border-color: var(--text); background: var(--text); color: #fff; }
.la2-track { min-width: 240px; max-width: 320px; margin: 0; }
.la2-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.la2-chip { font: inherit; font-size: 17px; padding: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.la2-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: #fff; }
.la2-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.la2-pay { display: grid; grid-template-columns: max-content 1fr; gap: 12px 18px; margin: 10px 0; align-items: baseline; }
.la2-pay dt { color: var(--text-2); }
.la2-pay dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.la2-pay dd small { display: block; color: var(--text-2); font-size: 13px; }
.la2-pay b { font-size: 19px; }
.la2-big { font-size: 26px; font-variant-numeric: tabular-nums; }
.la2-progress { list-style: none; padding: 0; margin: 0; }
.la2-progress li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.la2-progress li > span:first-child { display: grid; }
.la2-progress li small { color: var(--text-2); }
.la2-progress li.is-past { opacity: 0.7; }
.la2-tag.is-submitted { background: #eef2f7; color: #34506e; }
.la3-rows { font-size: 14px; padding-left: 18px; }
@media (max-width: 640px) {
  .la2-sums { grid-template-columns: 1fr 1fr; }
  .la2-sum.is-main { grid-column: 1 / -1; }
  .la2-chips { grid-template-columns: repeat(3, 1fr); }
  .la2-buttons .pill, .la2-buttons .ss-btn { flex: 1; }
  .la2-pay { grid-template-columns: 1fr; gap: 2px; }
  .la2-pay dt { margin-top: 8px; font-size: 14px; }
  .la2-pay b { font-size: 17px; }
  .la2-actions .pill { flex: 1 1 100%; text-align: center; }
  .la2-panel { padding: 14px; }
}
.la2-paycode { font-size: 24px !important; letter-spacing: 0.08em; background: #fdf7ec; padding: 2px 8px; border-radius: 6px; }
.la2-warn { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--amber-soft); background: #fdf7ec; border-radius: 10px; font-size: 15px; }
.la2-form label.la2-check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 16px; }
.ce-by { display: block; flex-basis: 100%; color: var(--text-2); font-size: 13px; }

/* 歌譜資料庫 (/portal/music/): one search box, theme chips, a song per row with a button per file */
.mu-search { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.mu-search input[type="search"] { flex: 1 1 320px; min-width: 0; font: inherit; font-size: 19px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); }
/* 種類: one row of four, the chosen one filled */
.mu-kinds { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #f5f2ec; }
.mu-kinds button { flex: 1 1 0; min-width: 0; font: inherit; font-size: 16px; padding: 9px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; }
.mu-kinds button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 600; }
.mu-kinds button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.mu-themes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mu-chip { font: inherit; font-size: 15px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 980px; background: #fff; color: var(--text); cursor: pointer; }
.mu-chip small { color: var(--text-2); margin-left: 2px; }
.mu-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.mu-chip[aria-pressed="true"] small { color: #d6dbe6; }
.mu-count { margin: 0 0 8px; color: var(--text-2); font-size: 15px; }
.mu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mu-song { padding: 14px 2px 16px; border-bottom: 1px solid var(--line); }
.mu-title { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.35; }
.mu-en { font-family: inherit; font-size: 15px; font-weight: 400; color: var(--text-2); margin-left: 6px; }
.mu-meta { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.mu-snip { margin: 6px 0 0; font-size: 15px; color: var(--text); background: var(--gray); border-radius: 8px; padding: 4px 10px; display: inline-block; }
.mu-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mu-tag { font: inherit; font-size: 13px; padding: 1px 9px; border: 0; border-radius: 980px; background: var(--gray); color: var(--text-2); cursor: pointer; }
.mu-tag:hover { color: var(--text); }
.mu-files { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mu-file { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 15px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--link); text-decoration: none; cursor: pointer; }
.mu-file small { font-size: 11px; color: var(--text-2); letter-spacing: 0.04em; }
.mu-file:hover { border-color: var(--link); }
.mu-file-score { border-left: 3px solid var(--gold); }
.mu-file-slides { border-left: 3px solid var(--blue); }
.mu-lyr { color: var(--text); }
.mu-lyrics { margin: 10px 0 0; padding: 12px 14px; background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 16px; line-height: 1.7; white-space: pre-wrap; max-height: 420px; overflow: auto; }
.mu-empty { padding: 20px 2px; color: var(--text-2); }
.mu-more { text-align: center; margin: 16px 0; }
.mu-note { margin-top: 18px; }
.mu-upload { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.mu-h2 { font-family: var(--serif); font-size: 22px; margin: 0 0 6px; }
.mu-up-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.mu-up-form select { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
@media (max-width: 600px) {
  .mu-title { font-size: 19px; }
  .mu-file { font-size: 14px; padding: 6px 10px; }
}

/* ---------- 首頁 · phone: the welcome, one link, the address and three buttons — few enough words to sit on the photo
   itself: the church clear in the upper part, a soft dark fade only behind the words at the foot. The computer layout
   is unchanged. ---------- */
@media (max-width: 760px) {
  .hero2.is-warm { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(78svh, 620px); background: #2a1f14; }
  .hero2.is-warm .hero2-bg { object-position: 58% 38%; }
  .hero2.is-warm::after { background: linear-gradient(180deg, rgba(20, 14, 8, 0) 0%, rgba(20, 14, 8, 0) 34%, rgba(20, 14, 8, 0.55) 62%, rgba(20, 14, 8, 0.86) 100%); }
  .hero2.is-warm .hero2-inner { width: 100%; box-sizing: border-box; padding: 0 18px 24px; }
  .hero2.is-warm .hero2-card { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
  .hero2.is-warm .hero2-title { font-size: 30px; margin-bottom: 6px; }
  .hero2.is-warm .hero2-week { margin: 0 0 6px; font-size: 16px; }
  .hero2.is-warm .hero2-week a { color: #f3c77e; text-decoration: none; font-weight: 600; }
  .hero2.is-warm .hero2-addr { font-size: 15px; color: rgba(255, 255, 255, 0.88); margin-bottom: 16px; }
  .hero2.is-warm .hero2-addr a { color: #f3c77e; }
  .hero2.is-warm .hero2-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero2.is-warm .hero2-act { min-height: 46px; font-size: 16px; color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(20, 14, 8, 0.28); text-shadow: none; }
  .hero2.is-warm .hero2-act.is-main { grid-column: 1 / -1; background: #f3c77e; border-color: #f3c77e; color: #2b2118; font-weight: 700; }
}

/* ---------- Less crowded (10/2026 review of every page on computer and phone, 中 and EN) ---------- */
/* the header in English: 「Living Stone Christian Church」 takes 400px of a bar that is never wider than ~1240px —
   「Living Stone」 in the bar (the full name is in the footer), so the menu stays on one line and a phone doesn't cut
   it to 「Living…」; the menu's English words a little smaller */
.globalnav-name-short { display: none; }
html[data-lang="en"] .globalnav-name:not(.globalnav-name-short) { display: none; }
html[data-lang="en"] .globalnav-name-short { display: inline; }
@media (min-width: 1069px) {
  html[data-lang="en"] .globalnav-inner a { font-size: 16px; padding: 10px 8px; }
  html[data-lang="en"] .globalnav-inner .nav-join { padding: 7px 12px; }
  html[data-lang="en"] .nav-big-label { display: none; }
}
/* just wide enough for the full menu (1069–1240px): a little smaller, so it stays on one line in both languages */
@media (min-width: 1069px) and (max-width: 1240px) {
  .globalnav-inner a { font-size: 16px; padding: 10px 8px; }
  .globalnav-inner .nav-account { font-size: 16px; }
  .globalnav-inner .nav-join { padding: 7px 12px; }
  .nav-big-label { display: none; }
}
/* 首頁 first screen: three buttons (觀看直播, 本週週報, 第一次來？) on one line; 禱告牆 and 主日學 are in the menu */
.hero2-act-extra { display: none !important; }
@media (min-width: 761px) {
  .hero2-acts { grid-template-columns: repeat(3, auto); }
  .hero2-act { white-space: nowrap; }
}
/* 中文事工 / English Ministry tabs on a phone: one line that scrolls sideways, not three or four lines of pills */
@media (max-width: 760px) {
  .mp-subnav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 10px 14px; }
  .mp-subnav::-webkit-scrollbar { display: none; }
  .mp-subnav a { flex: none; white-space: nowrap; padding: 6px 14px; font-size: 16px; }
  /* 代禱類別 on 禱告牆: one sideways-scrolling line too */
}
/* a Sunday School class page on a phone: 時間 and 日期 one under the other, so 「主日 11:45 am – 12:45 pm」 fits on a line */
@media (max-width: 560px) {
  .ssd-facts { grid-template-columns: 1fr; }
  .ssd-facts div + div { border-left: 0; border-top: 1px solid #ece3d2; }
  .ssd-facts div { padding: 14px 18px; }
}
@media (min-width: 1069px) and (max-width: 1240px) {
  html[data-lang="en"] .globalnav-inner a { font-size: 15px; padding: 10px 6px; }
  html[data-lang="en"] .globalnav-inner .nav-join { margin-left: 2px; padding: 6px 10px; }
  html[data-lang="en"] .globalnav-sep { margin: 0 2px; }
}
/* the narrowest computers in English (1069–1120px): the logo alone, so the menu keeps one line */
@media (min-width: 1069px) and (max-width: 1120px) {
  html[data-lang="en"] .globalnav-name-short { display: none; }
}
/* narrow phones (≤ 400px, e.g. 360px Android): the name smaller so 「立石教會」 isn't cut; in English 「Living Stone」 on two
   short lines beside the logo */
@media (max-width: 400px) {
  .globalnav-name { font-size: 18px; letter-spacing: 0.02em; }
  html[data-lang="en"] .globalnav-name-short { font-size: 15px; line-height: 1.05; white-space: normal; width: min-content; overflow: visible; letter-spacing: 0.01em; }
}
@media (min-width: 401px) and (max-width: 440px) {
  html[data-lang="en"] .globalnav-name-short { font-size: 18px; letter-spacing: 0.01em; }
}

/* ---------- 手機版更清爽 (10/2026): fewer ornaments and repeats on a phone; the computer layout is unchanged ---------- */
@media (max-width: 760px) {
  /* 中文事工 / English Ministry: no large faint 中 / EN behind the words */
  .ms-mark { display: none; }
  .ms-panel { padding-top: 26px; padding-bottom: 26px; }
  /* the footer: 常用 repeats the menu — left out; the church and the pastors' contacts with room to breathe */
  .footer-quick { display: none; }
  .footer-cols { gap: 18px 20px; padding: 18px 0 8px; }
  .footer-cols p { line-height: 1.7; }
  .footer-mission { font-size: 15px; }
}
/* the book: 回到目錄 at the foot of every chapter page (the page-turning buttons under the book are gone) */
.bp-back { margin: 10px 0 0; text-align: center; font-size: 15px; }
.bp-back a { color: #8e1a18; text-decoration: none; border-bottom: 1px solid rgba(142, 26, 24, 0.35); }
.bp-back a:hover { border-bottom-color: #8e1a18; }
/* 事工: 主日學, 禱告會, 小組團契 link straight to their 中文 / English pages (no page in between) */
.mz-direct > div { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mz-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.mz-links a { font-weight: 600; color: #8e1a18; }
.mz-areas .mz-links a, .mz-areas.is-labeled .mz-links a { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; grid-template-columns: none; font-size: 16px; font-weight: 600; color: #8e1a18; }
.mz-areas .mz-links a:hover { text-decoration: underline; background: none; }
.mz-direct small { color: var(--text-2); }
.mz-areas .mz-links a, .mz-areas.is-labeled .mz-links a { display: inline-block; height: auto; position: static; box-sizing: content-box; line-height: 1.5; }
.mz-direct > div { height: 100%; box-sizing: border-box; }
/* 歌譜資料庫: a file opens in the browser; 原檔 beside a slide deck; YouTube; the weekly song lists */
.mu-fileset { display: inline-flex; align-items: center; gap: 4px; }
.mu-orig { font-size: 13px; color: var(--text-2); padding: 2px 4px; }
.mu-yt { color: #a3221a; border-left: 3px solid #d64a3a; }
.mu-yt.is-set { font-weight: 600; }
.mu-vset, .mu-addp { margin: 6px 0 0; }
.mu-vform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
.mu-vform input { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.mu-plans { margin: 0 0 26px; padding: 18px 18px 8px; background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; }
.mu-plans-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mu-plans-top .mu-h2 { margin: 0; }
.mu-plan { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
.mu-plan header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mu-plan-h { margin: 0; font-family: var(--serif); font-size: 20px; }
.mu-now { font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #8e1a18; border-radius: 980px; padding: 2px 9px; vertical-align: middle; }
.mu-plan-note { margin: 8px 0 0; padding: 8px 12px; background: var(--gray); border-radius: 8px; white-space: pre-wrap; }
.mu-plan-by { margin: 6px 0 0; font-size: 13px; color: var(--text-2); text-align: right; }
.mu-ps-list, .mu-ed-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mu-ps { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.mu-ps-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; }
.mu-ps-t { margin: 0; font-size: 18px; }
.mu-key { font-size: 14px; font-weight: 600; color: #8e1a18; margin-left: 6px; }
.mu-ps-note { margin: 2px 0 0; font-size: 15px; color: var(--text-2); }
.mu-ps .mu-files { margin-top: 6px; }
.mu-editor { background: #fff; border: 2px solid var(--gold); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.mu-ed-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.mu-ed-row select { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; margin-left: 4px; }
.mu-ed-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.mu-ed-list b { flex: 1 1 140px; }
.mu-ed-key { width: 72px; font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.mu-ed-note { flex: 2 1 200px; min-width: 0; font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.mu-ed-btns .link-btn { font-size: 18px; padding: 2px 6px; }
.mu-ed-plannote { display: grid; gap: 4px; margin: 10px 0; font-size: 15px; color: var(--text-2); }
.mu-ed-plannote textarea { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.mu-ed-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.mu-arch { margin: 6px 0 12px; }
.mu-arch summary { cursor: pointer; color: var(--text-2); }
.mu-arch ul { margin: 8px 0; padding-left: 18px; font-size: 15px; }
.mu-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mu-more-files { flex-basis: 100%; }
.mu-more-files summary { cursor: pointer; font-size: 14px; color: var(--text-2); padding: 2px 0; }
.mu-more-files .mu-files { margin-top: 6px; }
.mu-ed-row select { min-width: 140px; }
.mu-ed-yt { flex: 2 1 220px; min-width: 0; font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.mu-ed-find { font-size: 14px; }

/* 歡迎來到立石教會: the map (pressing it opens directions), the address under it */
.tile-welcome .hw-map a { display: block; }
.tile-welcome .hw-map img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* the book (10/2026): the 目錄 lists the announcements (a line each), then 我們的信仰 and 奉獻; each announcement has a
   page — which one of how many, the title, when and where, its photo, the summary, 詳細 / 報名 */
.bk-toc .bk-toc-gap { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(160, 130, 80, 0.25); }
.bk-toc .bk-toc-more a { color: #8e1a18; }
.bk-an1 { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.bk-an1-no { margin: 4px 0 6px; text-align: center; font-size: 13px; letter-spacing: 0.14em; color: #9a7b46; }
.bk-an1-title { margin: 0 0 6px; text-align: center; font-family: var(--serif); font-size: 22px; line-height: 1.35; }
.bk-an1-title a { color: #2b2118; text-decoration: none; }
.bk-an1-when { margin: 0 0 10px; text-align: center; font-size: 15px; color: #8e1a18; }
/* a photo or poster in the book: a box of one height (so the pages are laid out before it loads), the picture whole in it */
.bk-an1-pic { display: block; margin: 0 auto 10px; width: 100%; height: 170px; }
.bk-an1-pic img { display: block; width: 100%; height: 100%; margin: 0 auto; border-radius: 4px; object-fit: contain; }
.bk-an1-sum { margin: 0; font-size: 16px; line-height: 1.75; color: #3a2e22; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.bk-an1-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: auto 0 0; padding-top: 10px; font-size: 15px; }
.bk-an1-more a { color: #8e1a18; font-weight: 600; }
@media (max-width: 760px) {
  .bk-an1-title { font-size: 20px; }
  .bk-an1-pic { height: 130px; }
  .bk-an1-sum { -webkit-line-clamp: 6; font-size: 15px; }
}
.bk-toc a span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-an1-detail { margin-top: 8px; font-size: 15px; line-height: 1.7; color: #3a2e22; overflow: hidden; flex: 0 1 auto; min-height: 0; }
.bk-an1-detail p { margin: 0 0 6px; }
@media (max-width: 760px) {
  .bk-title.has-an-many .bk-epi-title { display: none; }
  .bk-title.has-an .bk-toc { padding-top: 8px; }
  .bk-title.has-an .bk-toc a { font-size: 16px; padding: 3px 0; }
}
/* the contents with announcements is longer: tighter lines on every screen (on a phone the verse also makes room) */
.bk-title.has-an .bk-toc { padding-top: 8px; }
.bk-title.has-an .bk-toc-h { margin-bottom: 4px; }
.bk-title.has-an .bk-toc a { font-size: 16px; padding: 3px 0; }
.bk-title.has-an .bk-toc .bk-toc-gap { margin-top: 6px; padding-top: 4px; }

/* the book's announcements, laid out by size (10/2026): 目錄 — 教會公告, the announcements indented under it; a page
   holds as many whole announcements as fit, a long one has its page alone (cut short there; 詳細 has all of it) */
.bk-toc .bk-toc-main a { font-weight: 600; }
.bk-toc .bk-toc-sub a { padding-left: 1.1em; font-size: 15px; color: #4a3c2c; }
.bk-title.has-an .bk-toc .bk-toc-sub a { font-size: 14.5px; padding-top: 2px; padding-bottom: 2px; }
.bk-ans { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.bk-ans .bk-an1 { display: block; }
/* English: Church Center's slides in the book, two to a page, each whole (never cut) */
.bk-slides { gap: 12px; }
.bk-slides > a { display: flex; flex: 0 1 auto; min-height: 0; justify-content: center; }
.bk-slides > a img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.bk-ans:not(.is-solo) .bk-an1-title { font-size: 19px; margin-bottom: 2px; }
.bk-ans:not(.is-solo) .bk-an1-when { margin-bottom: 6px; }
.bk-ans:not(.is-solo) .bk-an1-sum { display: block; -webkit-line-clamp: unset; }
.bk-ans:not(.is-solo) .bk-an1-more { margin: 6px 0 0; padding-top: 0; }
.bk-ans.is-solo .bk-an1 { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.bk-ans.is-solo .bk-an1-more { margin-top: auto; }
.bk-an-sep { border: 0; border-top: 1px dotted #c9b48a; margin: 12px 8% ; }
.bk-an-all { margin: 10px 0 0; text-align: center; }
/* several on a page: each keeps its own height (nothing squeezed), so a page that's full is measured as full */
.bk-ans:not(.is-solo) > * { flex: 0 0 auto; }
/* notes without a photo (most are the 週報's 家訊): closer together; the 詳細 at the page's foot */
.bk-an1.is-brief .bk-an1-title { margin-bottom: 2px; text-align: left; font-size: 17px; line-height: 1.4; }
.bk-an1.is-brief .bk-an1-sum { font-size: 15px; line-height: 1.6; }
.bk-ans:has(.is-brief) .bk-an-sep { margin: 9px 0; }
.bk-ans .bk-an-all { margin-top: auto; padding-top: 8px; }
/* an announcement with a photo sharing the page: the photo beside its words, so two fit */
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 12px; }
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) > * { grid-column: 2; }
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) .bk-an1-pic { grid-column: 1; grid-row: 1 / span 4; width: 100%; height: 110px; margin: 0; }
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) .bk-an1-title, .bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) .bk-an1-when { text-align: left; }
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) .bk-an1-title { font-size: 17px; }
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) .bk-an1-when { margin-bottom: 2px; font-size: 14px; }
.bk-ans:not(.is-solo) .bk-an1:has(.bk-an1-pic) .bk-an1-sum { font-size: 15px; line-height: 1.6; }
/* 歡迎來到立石教會 beside 線上同步敬拜: the map in the same 16:9 frame as the live stream, so the two halves line up
   (the church marker stays in the middle of the crop) */
.tile-welcome .hw-map img { aspect-ratio: 16 / 9; object-position: 50% 52%; }
/* the logo on the first screen (back, 10/2026): a white ring so it reads on the photo */
.hero2-eyebrow { font-size: 16px; letter-spacing: 0.06em; margin-bottom: 8px; }
.hero2-eyebrow img { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.35); }
@media (max-width: 760px) {
  .hero2.is-warm .hero2-eyebrow { font-size: 14px; margin-bottom: 6px; color: #f3c77e; }
  .hero2.is-warm .hero2-eyebrow img { width: 38px; height: 38px; }
}

/* 首頁 · phone: the logo's name sits where the photo is still bright — the fade starts higher so it reads */
@media (max-width: 760px) {
  .hero2.is-warm::after { background: linear-gradient(180deg, rgba(20, 14, 8, 0) 0%, rgba(20, 14, 8, 0) 24%, rgba(20, 14, 8, 0.5) 44%, rgba(20, 14, 8, 0.84) 72%, rgba(20, 14, 8, 0.9) 100%); }
}
@media (max-width: 760px) { .hero2.is-warm .hero2-eyebrow-name { display: none; } } /* a phone: the logo alone over the photo (the title names the church) */

/* 家人專區 › 失物招領 */
.lf-actions { margin: 0 0 16px; }
.lf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; padding: 18px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lf-form .lf-h, .lf-form .lf-photo, .lf-form .lf-wide, .lf-form .lf-buttons, .lf-form [data-lf-ai], .lf-form [data-lf-status] { grid-column: 1 / -1; margin: 0; }
.lf-h { font-size: 20px; }
.lf-form label > span { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 4px; }
.lf-form input:not([type=file]), .lf-form select, .lf-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); }
/* the whole box is the button (the label's own file input is hidden, still reachable by keyboard) */
.lf-photo { position: relative; cursor: pointer; }
.lf-photo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lf-photo:focus-within .lf-photo-box { outline: 2px solid var(--navy); outline-offset: 2px; }
.lf-form .lf-photo-box { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 140px; max-width: 360px; margin: 0; padding: 0; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--navy); font-size: 17px; overflow: hidden; background: #fafafa; }
.lf-photo-box img { display: block; width: 100%; height: auto; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.lf-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lf-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.lf-card.is-done { opacity: .8; }
.lf-img { display: block; aspect-ratio: 4 / 3; background: #f3f3f3; }
.lf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-info { padding: 12px 14px 14px; }
.lf-title { font-size: 18px; margin: 0 0 4px; }
.lf-state { font-size: 14px; font-weight: 400; color: var(--text-2); }
.lf-meta { margin: 0; font-size: 15px; color: var(--text-2); }
.lf-desc { margin: 8px 0 0; font-size: 16px; }
.lf-claims { margin: 8px 0 0; font-size: 15px; color: var(--navy); }
.lf-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.lf-btns .pill { font-size: 15px; padding: 7px 14px; }
.lf-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.lf-link { font: inherit; font-size: 14px; padding: 4px 0; border: 0; background: none; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lf-empty { grid-column: 1 / -1; }
/* phones: one per row — the photo on the left, the words on the right */
@media (max-width: 600px) {
  .lf-grid { grid-template-columns: 1fr; gap: 12px; }
  .lf-card { flex-direction: row; align-items: flex-start; }
  .lf-img { flex: 0 0 112px; width: 112px; aspect-ratio: 1; }
  .lf-info { flex: 1; min-width: 0; padding: 10px 12px 12px; }
  .lf-title { font-size: 17px; }
  .lf-meta { font-size: 14px; }
  .lf-desc { font-size: 15px; margin-top: 6px; }
  .lf-btns { margin-top: 8px; }
  .lf-form { padding: 14px; }
}
/* 週報 › 歷史家訊 (members only) */
.na-search input { width: 100%; font: inherit; font-size: 17px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); box-sizing: border-box; }
.na-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.na-list { margin-top: 12px; }
.na-list li > span:first-child { min-width: 0; }
.na-sum { font-size: 15px; display: inline-block; margin-top: 2px; }
.na-old { margin-top: 32px; }
.na-h { font-size: 20px; margin: 0 0 12px; }
.na-list li > .muted:last-child { white-space: nowrap; }
/* 目錄 · 每日讀經: today's chapter after the name */
.bk-toc .bk-toc-note { margin-left: 0.6em; font-size: 0.82em; color: #7a6a52; font-weight: 400; }

/* 行事曆 on phones: one week at a time — no month grid, every day listed with all its events */
.cal.is-week .cal-head, .cal.is-week .cal-grid { display: none; }
.cal-agenda-week .cal-month-day.is-empty h4 { color: var(--ink-2); }
.cal-agenda-week .ag-empty { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }

/* 行事曆編輯: 循環活動 / 單次活動 tabs; the one-time events list; the week on phones */
.ce-tabs { margin: 8px 0 10px; }
.ce-once { margin: 22px 0 8px; }
.ce-once-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.ce-once-head h3 { margin: 0; font-size: 18px; }
.ce-once-list { list-style: none; margin: 0; padding: 0; }
.ce-once-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ce-once-list .ce-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--m); flex: none; }
.ce-once-what { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.ce-once-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ce-once-edit input { font: inherit; font-size: 15px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 8px; }
.cal-grid.ce-week { display: block; }
.ce-wday { padding: 8px 0 6px; border-top: 1px solid var(--line); }
.ce-wday h4 { margin: 0 0 6px; font-size: 16px; }
.ce-wday.is-today h4 { color: var(--primary, #8e2d27); }
.ce-wday-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; }
.ce-wday-btn span { color: var(--text-2); font-weight: 400; }
.ce-wday ul { list-style: none; margin: 0; padding: 0; }
.ce-wday li { display: flex; gap: 10px; padding: 6px 0 6px 10px; border-left: 3px solid var(--m); margin-bottom: 4px; }
.ce-wtime { flex: none; min-width: 88px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ce-wname { display: flex; flex-direction: column; font-size: 16px; min-width: 0; }
.ce-wname small { font-size: 13px; color: var(--text-2); }

/* 經書: the church logo again as a faint watermark in the middle of every page (and the turning leaves) — the
   redesign above had hidden it with the old page background (.bp-bg, which stays hidden) */
.bible-page::before { display: block; width: min(260px, 62%); opacity: 0.07; }

/* 行事曆: an event is a button that opens its details (not a link to the ministry's page) — the same look as before */
.cal-agenda li .ag-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: baseline; width: 100%; padding: 10px 0 10px 14px;
  border: 0; border-left: 4px solid var(--m); margin-bottom: 8px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(43, 33, 24, 0.04);
  font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cal-agenda li .ag-row:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.ag-place { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--text-2); }
.cal-ev { font-family: inherit; border: 0; text-align: left; cursor: pointer; width: 100%; }
.cl-day li .cl-row { display: flex; flex-direction: column; width: 100%; padding: 5px 7px; border: 0; border-radius: 8px; border-left: 3px solid var(--m);
  background: color-mix(in srgb, var(--m) 8%, #fff); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 734px) {
  .cal-agenda li .ag-row { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 11px 12px; }
  .cal-agenda li .ag-row .ag-time { grid-column: 1 / -1; font-size: 14px; }
  .cal-agenda li .ag-row .ag-title { font-size: 17px; }
  .cal-agenda li .ag-row .ag-m { padding-right: 0; font-size: 13px; }
}
.cal-dlg { width: min(460px, calc(100vw - 32px)); }
.cal-dlg h2 { display: flex; align-items: center; gap: 10px; }
.cal-dlg-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--m); }
.cal-dlg-other { margin: 0 0 12px; color: var(--text-2); }
.cal-dlg-dl { margin: 0 0 14px; }
.cal-dlg-dl div { display: grid; grid-template-columns: 4.5em 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.cal-dlg-dl dt { color: var(--text-2); }
.cal-dlg-dl dd { margin: 0; }
/* a few lines: a card in the middle, also on phones (not the full-screen sheet other dialogs use there) */
@media (max-width: 734px) {
  .ss-dialog.cal-dlg { width: calc(100vw - 32px); max-width: 460px; height: fit-content; max-height: calc(100dvh - 64px); margin: auto; border-radius: 16px; }
  .cal-dlg .ss-dialog-body { padding: 8px 16px 16px; }
}
.ss-dialog.cal-dlg[open] { display: block; }
/* 午餐帳戶 · 現金充值: the envelope — what to write on it */
.la2-howto { margin: 6px 0 8px; padding-left: 1.4em; line-height: 1.7; }
.la2-envelope { max-width: 380px; margin: 4px 0 12px; padding: 14px 18px; border: 1.5px dashed #b8a37a; border-radius: 6px; background: #fffdf6; }
.la2-env-h { margin: 0 0 8px; font-weight: 700; letter-spacing: 0.1em; }
.la2-envelope dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.la2-envelope dt { color: var(--text-2); }
.la2-envelope dd { margin: 0; }
.la2-withdraw { display: block; margin-top: 4px; font-size: 14px; }

/* 午餐帳戶（財務）: tabs with what's waiting; tables to check against envelopes and the bank */
.la4-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 18px; }
.la4-tabs button { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.la4-tabs button[aria-selected="true"] { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }
.la4-tab-name { font-weight: 600; font-size: 17px; }
.la4-tabs small { color: var(--text-2); font-size: 13px; }
.la4-badge { display: inline-block; min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: #8e2d27; color: #fff; font-size: 13px; text-align: center; }
.la4-badge.is-zero { background: #d9d6cf; color: #4a4a4a; }
.la4-sec { margin: 0 0 28px; }
.la4-sec h2 { margin: 0; font-size: 20px; }
.la4-sec h2 small { color: var(--text-2); font-weight: 400; }
.la4-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 6px; }
.la4-total { margin: 0; font-size: 16px; }
.la4-total b { font-size: 20px; }
.la4-help { margin: 0 0 10px; color: var(--text-2); font-size: 15px; }
.la4-steps { margin: 0 0 12px; padding-left: 1.3em; line-height: 1.8; font-size: 15px; }
.la4-steps .lc-file { margin-left: 6px; }
.la4-wrap { overflow-x: auto; }
.la4-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.la4-table th { text-align: left; font-weight: 600; font-size: 13px; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.la4-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.la4-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.la4-code { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: 0.06em; }
.la4-table input { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; max-width: 170px; }
.la4-table .la4-amt { width: 96px; }
.la4-btns { white-space: nowrap; }
.la4-btns .pill, .la4-btns .ss-btn { margin: 2px 4px 2px 0; }
@media (max-width: 734px) {
  .la4-tabs { grid-template-columns: 1fr 1fr; }
  .la4-table thead { display: none; }
  .la4-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .la4-table td { padding: 0; border: 0; }
  .la4-table td.la4-btns, .la4-table td:has(input) { grid-column: 1 / -1; }
}
/* 小組查經: a plan and its lessons; the pastors' forms */
.st-top { margin: 0 0 12px; }
.st-plans { margin: 0 0 16px; flex-wrap: wrap; }
.st-plan-head h2 { margin: 0 0 4px; font-size: 24px; }
.st-about { margin: 8px 0; }
.st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; }
.st-share { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafafc; font-size: 15px; }
.st-share p { margin: 4px 0; }
.st-link { display: flex; gap: 8px; }
.st-link input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.st-lessons { list-style: none; margin: 18px 0 12px; padding: 0; }
.st-lesson { padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.st-lesson.is-next { border-color: var(--navy); box-shadow: inset 4px 0 0 var(--navy); }
.st-lesson.is-past { opacity: 0.85; }
.st-date { margin: 0; font-size: 14px; color: var(--text-2); }
.st-next { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; }
.st-title { margin: 2px 0 2px; font-size: 19px; }
.st-scripture { margin: 0 0 6px; color: #8e2d27; font-weight: 600; }
.st-h { margin: 8px 0 2px; font-size: 13px; color: var(--text-2); letter-spacing: 0.05em; }
.st-questions p { margin: 0 0 6px; }
.st-files { list-style: none; margin: 8px 0 0; padding: 0; }
.st-files li { padding: 4px 0; }
.st-files small { color: var(--text-2); }
.st-x { font-size: 13px; color: var(--text-2); }
.st-up { cursor: pointer; }
.st-form label { display: block; margin: 0 0 10px; font-size: 15px; color: var(--text-2); }
.st-form input:not([type=checkbox]), .st-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 16px; color: var(--text); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.st-grid { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 0 12px; }
.st-plan-form { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.st-plan-form h2 { margin: 0 0 12px; font-size: 20px; }
.st-groups { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.st-groups legend { font-size: 14px; color: var(--text-2); padding: 0 4px; }
.st-groups label, .st-check { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: var(--text); }
.st-btns { display: flex; gap: 8px; margin: 6px 0 0; }
@media (max-width: 734px) { .st-grid { grid-template-columns: 1fr; } }

/* 活動相冊: the video with our own bar under it (the progress slider is always there, on every phone) */
.phx-player { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; min-width: 0; }
.phx-player video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 260px); object-fit: contain; border-radius: 4px; background: #000; }
.phx-bar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 900px; box-sizing: border-box; margin-top: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 248, 236, 0.1); }
.phx-pb { flex: none; min-width: 40px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #fff8ec; font: inherit; font-size: 16px; cursor: pointer; }
.phx-pb:hover { background: rgba(255, 248, 236, 0.18); }
.phx-skip { font-size: 13px; min-width: 36px; }
.phx-seek { flex: 1; min-width: 60px; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.phx-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #e8c77a var(--p), rgba(255, 248, 236, 0.3) var(--p)); }
.phx-seek::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 248, 236, 0.3); }
.phx-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: #e8c77a; }
.phx-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff8ec; border: 0; }
.phx-seek::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff8ec; border: 0; }
.phx-time { flex: none; font-size: 13px; color: #d9c6a0; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .phx-bar { gap: 2px; padding: 4px 6px; } .phx-skip { display: none; } .phx-pb { min-width: 34px; } .phx-player video { max-height: calc(100dvh - 290px); } }

/* 主日午餐 · 取餐二維碼 (the order's card) and 取餐核對 (the volunteers' page) */
.lu-qr-row { margin: 6px 0 0; }
.lu-qr-dlg { width: min(380px, calc(100vw - 32px)); height: fit-content; margin: auto; border-radius: 18px; }
.ss-dialog.lu-qr-dlg[open] { display: block; }
.lu-qr-card { position: relative; padding: 18px 18px 16px; text-align: center; border: 6px solid #fff; border-radius: 18px; background: #fff; }
.lu-qr-card.is-owes { border-color: #c0392b; }
.lu-qr-x { position: absolute; top: 8px; right: 8px; }
.lu-qr-h { margin: 0 0 6px; color: var(--text-2); font-size: 14px; }
.lu-qr-owes { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #c0392b; color: #fff; font-weight: 700; }
.lu-qr-code svg { width: min(260px, 70vw); height: auto; display: block; margin: 0 auto; }
.lu-qr-who { margin: 8px 0 2px; font-size: 18px; }
.lu-qr-items { margin: 0; color: var(--text-2); font-size: 15px; }
.lu-qr-cash { margin: 8px 0 0; font-weight: 700; color: #a0522d; }
.lu-qr-note { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.lp-scan { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.lp-find { display: flex; gap: 6px; }
.lp-find input { width: 110px; font: inherit; font-size: 17px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lp-camera { position: relative; margin: 0 0 12px; }
.lp-camera video { width: 100%; max-height: 50vh; object-fit: cover; border-radius: 14px; background: #000; }
.lp-stop { position: absolute; right: 10px; bottom: 10px; }
.lp-card { padding: 16px 18px; margin: 0 0 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; }
.lp-card.is-ok { border-color: #2e7d32; background: #f1f8f1; }
.lp-card.is-warn { border-color: #c77700; background: #fff7e8; }
.lp-card.is-bad { border-color: #c0392b; background: #fdf0ee; }
.lp-big { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.lp-who { margin: 0; font-size: 18px; }
.lp-dishes { margin: 4px 0 10px; color: var(--text-2); }
.lp-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 10px; }
.lp-check label { display: block; font-size: 14px; color: var(--text-2); }
.lp-check input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 17px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lp-skip { grid-column: 1 / -1; }
.lp-ok { font-size: 18px; padding: 12px 22px; }
.lp-list ul { list-style: none; margin: 8px 0 0; padding: 0; }
.lp-list li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.lp-list li span { margin-left: auto; color: var(--text-2); font-size: 14px; }
.lp-list li.is-done { color: var(--text-2); }

/* ---------- 週五探訪表 (visits-grid.js): 小組（牧長） › 探訪安排 and the leaders' private link /visits/ ---------- */
.vg-wrap { overflow-x: auto; margin: 10px 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.vg { border-collapse: collapse; min-width: 100%; font-size: 15px; }
.vg th, .vg td { border: 1px solid var(--line); padding: 0; text-align: center; white-space: nowrap; }
.vg thead th { position: sticky; top: 0; background: #faf3dc; font-weight: 600; padding: 6px 8px; }
.vg thead th small { display: block; font-weight: 400; font-size: 11px; color: #6b5a48; white-space: normal; max-width: 6em; margin: 0 auto; }
.vg tbody th { position: sticky; left: 0; z-index: 1; background: #f6f1e7; padding: 6px 10px; text-align: left; font-weight: 600; }
.vg td { min-width: 96px; max-width: 150px; height: 38px; white-space: normal; line-height: 1.3; }
.vg .vg-name { display: block; } /* full names, one to a line */
.vg-avail td { min-width: 72px; }
.vg td.is-off, .vg th.is-off { background: #d9d6cf; }
.vg td.is-past { background: #fbfaf7; color: #6b5a48; }
.vg th.is-today { outline: 2px solid #a31d1d; outline-offset: -2px; }
.vg .vg-cell, .vg .vg-day { display: block; width: 100%; height: 100%; min-height: 38px; padding: 4px 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.vg .vg-cell:hover, .vg .vg-day:hover { background: #fff4dc; }
.vg .vg-done { color: #2e7d32; font-weight: 700; }
.vg td.is-conflict { background: #fde2e2; color: #a31d1d; font-weight: 600; }
.vg td.is-no { background: #f1ece2; color: #8a6a3a; }
.vg-avail td { font-size: 13px; }
.vg-brush { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.vg-brush .sg-label { flex-basis: 100%; }
.vg-brush button { padding: 4px 12px; border: 1px solid #d9ccb6; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.vg-brush button[aria-pressed="true"] { background: #a31d1d; border-color: #a31d1d; color: #fff; }
.vg-notes { display: grid; gap: 8px; max-width: 640px; margin: 0 0 18px; }
.vg-notes label { display: grid; gap: 4px; }
.vg-notes textarea { width: 100%; box-sizing: border-box; }
.vg-notes button { justify-self: start; }
.vg-link { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-link input { flex: 1 1 320px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.vg-notes-view p { line-height: 1.8; }
.vg-app [data-vg-title] { font-size: clamp(24px, 5vw, 32px); }
/* the leaders' page (/visits/): your group's next visit, or the Fridays one by one */
.fv-pick { display: grid; gap: 4px; margin: 6px 0 18px; max-width: 360px; }
.fv-pick select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 17px; }
.fv-next { padding: 18px 20px; border-radius: 14px; background: #fffaf0; border: 1px solid #e3c98c; margin: 0 0 18px; }
.fv-label { margin: 0; font-size: 15px; color: #7a4a0c; }
.fv-when { margin: 4px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 700; }
.fv-who { margin: 4px 0 0; font-size: 19px; }
.fv-h { margin: 18px 0 6px; font-size: 17px; }
.fv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fv-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 17px; }
.fv-list.is-off { color: #6b5a48; }
.fv-d { font-weight: 600; }
.fv-fris { display: grid; gap: 12px; }
.fv-fri { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.fv-fri.is-today { border-color: #a31d1d; }
.fv-fri.is-off { background: #f4f1ea; color: #6b5a48; }
.fv-fri h3 { margin: 0 0 6px; font-size: 19px; }
.fv-fri ul { list-style: none; margin: 0; padding: 0; }
.fv-fri li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 17px; }
.fv-fri li:first-child { border-top: 0; }
.fv-past { margin: 20px 0 0; }
.fv-past summary { cursor: pointer; font-size: 16px; color: #6b5a48; margin-bottom: 10px; }
.fv-notes p { line-height: 1.8; }
/* ---------- 英文部小組 (en-groups.js) ---------- */
.eg-groups { display: grid; gap: 12px; margin: 12px 0; }
.eg-group { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.eg-group.is-closed { background: #f6f3ec; }
.eg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eg-head h3 { margin: 0; font-size: 20px; }
.eg-meta { margin: 4px 0; color: #4a3b2c; }
.eg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; }
.eg-members { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.eg-list { list-style: none; margin: 0 0 10px; padding: 0; }
.eg-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid #f1ece2; }
.eg-name { font-weight: 600; }
.eg-off, .eg-closed { margin-top: 10px; }
/* 禱告牆: 中文部／英文部 above the kinds (prayer-wall.js) */
.pw-mins { margin-bottom: 8px; }
.pw-mins button { font-weight: 600; }
.pw-mins small { font-weight: 400; opacity: 0.8; }
/* ---------- 兒童事工 › 簽到站 (kids-station.js): big touch targets for a classroom iPad ---------- */
.ks-app { max-width: 820px; margin: 0 auto; }
.ks-find { display: flex; gap: 8px; margin: 12px 0; }
.ks-find input { flex: 1; min-width: 0; padding: 14px 16px; font-size: 22px; border: 2px solid #d9ccb6; border-radius: 12px; }
.ks-find .pill { font-size: 20px; padding: 0 22px; }
.ks-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ks-fam, .ks-class { padding: 14px 16px; margin: 10px 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ks-fam header, .ks-class header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 20px; }
.ks-kids { list-style: none; margin: 8px 0 0; padding: 0; }
.ks-kids li { padding: 6px 0; border-bottom: 1px solid #f1ece2; font-size: 18px; }
.ks-kids li.is-gone { color: #7a6a58; }
.ks-kid { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ks-kid input { width: 28px; height: 28px; margin-top: 2px; flex: none; }
.ks-kid.is-in { opacity: 0.75; }
.ks-allergy { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 6px; background: #fde2e2; color: #a31d1d; font-weight: 700; font-size: 15px; }
.ks-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #f1ece2; font-size: 14px; }
.ks-chip.is-in { background: #e3f1e4; color: #2e7d32; }
.ks-done { text-align: center; padding: 18px; border: 2px solid #f3c77e; border-radius: 16px; background: #fffaf0; }
.ks-done-h { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.ks-code-label { margin: 8px 0 0; color: #6b5a48; }
.ks-code { margin: 4px 0 10px; font: 700 64px/1.1 ui-monospace, Menlo, monospace; letter-spacing: 0.18em; color: #a31d1d; }
.ks-done .ks-kids { text-align: left; max-width: 520px; margin: 0 auto; }
.ks-done .ks-row { justify-content: center; }
.ks-code-in { text-transform: uppercase; letter-spacing: 0.2em; font-family: ui-monospace, Menlo, monospace; }
.ks-by { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 18px; border: 1px solid #d9ccb6; border-radius: 10px; }
.ks-sum { font-size: 20px; font-weight: 600; }
.ks-warn { padding: 8px 12px; border-radius: 10px; background: #fde2e2; color: #a31d1d; }
.ks-classes { display: grid; gap: 10px; }
@media (min-width: 760px) { .ks-classes { grid-template-columns: 1fr 1fr; } }
.ks-newkid { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid #f1ece2; }
@media (min-width: 600px) { .ks-newkid { grid-template-columns: 2fr 1fr 2fr; } }
.ks-print { display: none; }
@media print {
  /* only on 簽到站 (the page that has the labels) — not every page's print (it blanked the 受洗證書, 11/13/2026) */
  body:has(.ks-print) * { visibility: hidden; }
  .ks-print, .ks-print * { visibility: visible; }
  .ks-print { display: block; position: absolute; left: 0; top: 0; }
  .ks-label { display: flex; flex-direction: column; justify-content: center; width: 3.5in; height: 1.1in; padding: 0.08in 0.12in; box-sizing: border-box; border: 1px dashed #999; page-break-inside: avoid; font: 12pt/1.25 sans-serif; position: relative; }
  .ks-label b { font-size: 18pt; }
  .ks-label-al { font-weight: 700; }
  .ks-label-code { position: absolute; right: 0.12in; top: 0.08in; font: 700 20pt ui-monospace, Menlo, monospace; }
}
/* ---------- 英文部家人名單 (en-people.js) ---------- */
.ep-sum { font-size: 17px; }
.ep-q { flex: 1; min-width: 0; padding: 10px 12px; font-size: 17px; border: 1px solid #d9ccb6; border-radius: 10px; }
.ep-person.is-gone { opacity: 0.6; }
.ep-name { font-weight: 600; font-size: 17px; }
.eg-attend { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; margin: 10px 0; }
/* ---------- 活動報名 (signup.js, signups-admin.js) ---------- */
.su-desc { margin: 0 0 12px; line-height: 1.7; }
.su-fee { padding: 10px 14px; border-radius: 10px; background: #fffaf0; border: 1px solid #f3e2bd; }
.su-closed, .su-state { padding: 10px 14px; border-radius: 10px; background: #f1ece2; font-weight: 600; }
.su-person { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.su-q { border: 0; padding: 0; margin: 10px 0; }
.su-q legend { font-weight: 600; margin-bottom: 4px; }
.sa-qrow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid #f1ece2; }
@media (min-width: 700px) { .sa-qrow { grid-template-columns: 2fr 2fr 1fr 1.4fr auto; align-items: center; } .sa-qrow textarea { grid-column: 1 / -1; } }
.sa-regs { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.sa-reg { display: block !important; }
.sa-reg.is-gone { opacity: 0.55; }
.sa-people { list-style: none; margin: 6px 0; padding: 0 0 0 8px; border-left: 3px solid #f1ece2; }
.sa-people li { padding: 3px 0; }
.sa-paid { display: inline-flex; margin-left: 8px; }
/* ---------- 兒童主日學報名 by invitation (kids-family.js; children.js › 報名邀請) ---------- */
.kf-how li { margin: 0 0 10px; line-height: 1.7; }
.kf-person { align-items: end; }
.kf-sign { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fffaf0; }
.kc-inv .eg-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
/* 老師排班: a teacher who declined (✗) */
.kr-who.is-no { color: #a31d1d; text-decoration: line-through; }
.ep-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ep-tags .ks-chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 14px; }
.ep-tags .ks-chip[aria-pressed="true"] { background: #a31d1d; color: #fff; }
/* English small groups: 「Request to join」 (en-join.js) */
.en-join-btn { margin-right: 10px; }
.en-cc { font-size: 13px; }
.eg-req { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #fffaf0; }
/* ---------- 英文部總覽 (em-overview.js) ---------- */
.emo-grid { display: grid; gap: 12px; }
@media (min-width: 800px) { .emo-grid { grid-template-columns: 1fr 1fr; } }
.emo-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.emm-form label { display: block; margin: 0 0 10px; font-size: 14px; }
.emm-form textarea, .emm-form input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.emo-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.emo-card h3 { margin: 0 0 8px; font-size: 18px; }
.emo-list { list-style: none; margin: 0; padding: 0; }
.emo-list li { padding: 4px 0; border-bottom: 1px solid #f1ece2; }
.emo-list li > span:first-child { display: inline-block; min-width: 8em; color: #6b5a48; }
.emo-big { font-size: 28px; font-weight: 700; margin: 0; }
/* 歌譜資料庫 › CCLI 使用報告 (music-ccli.js) */
.ccli-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0; }
.ccli-table th, .ccli-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ccli-table td:nth-child(n+3), .ccli-table th:nth-child(n+3) { text-align: right; }
.ccli-num { width: 7.5em; font: inherit; font-size: 16px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; }
/* 教會公告 › 每週公告投影片 (announce-deck.js) */
.am-deck { padding: 14px 16px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.am-deck .wt-h { margin-top: 0; }
.am-deck-open { margin: 6px 0; }
.am-deck details ol { margin: 6px 0; padding-left: 1.3em; line-height: 1.8; }
/* LCCD 報銷連結 (/lccd/claim/, lccd-claim.js) */
.lcp-form label.lcp-file { display: inline-block; width: auto; margin: 0; cursor: pointer; color: #fff; }
.lcp-claim .lc-lines input { padding: 6px 8px; font-size: 16px; }
.lcp-claim .lc-status.is-bad { color: #8a2a1a; }
/* on a phone each line is two rows: the date and the amount, then what it was */
@media (max-width: 600px) {
  .lcp-claim .lc-lines thead { display: none; }
  .lcp-claim .lc-lines tbody tr { display: grid; grid-template-columns: 1fr 110px 32px; grid-template-areas: "d a x" "w w w"; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .lcp-claim .lc-lines tbody td { padding: 0; border: 0; width: auto !important; }
  .lcp-claim .lc-lines tbody td:nth-child(1) { grid-area: d; } .lcp-claim .lc-lines tbody td:nth-child(2) { grid-area: w; }
  .lcp-claim .lc-lines tbody td:nth-child(3) { grid-area: a; } .lcp-claim .lc-lines tbody td:nth-child(4) { grid-area: x; }
  .lcp-claim .lc-lines tfoot tr { display: flex; align-items: center; gap: 10px; }
  .lcp-claim .lc-lines tfoot td { border: 0; padding: 8px 0; }
  .lcp-claim .lc-lines tfoot td:nth-child(2) { margin-left: auto; }
}
.lc-warn { color: #8a4a00; font-weight: 600; }
.lc-dlg input[readonly] { display: inline-block; width: calc(100% - 70px); font-size: 13px; }

/* 青少年 — vision, mission, what we do, the second verse (src/_includes/youth-more.njk) */
.ytm-more { display: grid; gap: 14px; }
.yt-vm { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; padding-bottom: 8px; }
.yt-vm p { margin: 4px 0 0; line-height: 1.7; }
.yt-big { font-family: var(--serif); font-size: 21px; color: #4a3a2a; }
.yt-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.yt-acts li { padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: 15px; }
.ytm-verse { margin: 10px 0 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; max-width: 760px; font-family: var(--serif); font-size: 18px; line-height: 1.85; color: #4a3a2a; }
.ytm-verse cite { display: block; margin-top: 4px; font-family: var(--font); font-size: 14px; font-style: normal; color: #9a7432; }
.yt-contact { margin: 6px 0 0; }
@media (max-width: 700px) { .yt-vm { grid-template-columns: 1fr; } }
.live-next { margin: 8px 0 0; font-size: 14px; color: var(--muted, #6b6b6b); }

/* 家人專區: 中文部｜English Ministry (src/portal/index.njk, portal-home.js) */
.ph-min { display: inline-flex; margin: 12px 0 0; padding: 3px; border-radius: 999px; background: #f1e7d3; border: 1px solid #e3d3b3; gap: 2px; }
.ph-min[hidden] { display: none; }
@media (max-width: 480px) { .ph-min button { font-size: 14px; padding: 7px 10px; white-space: nowrap; } }
.ph-min button { border: 0; background: none; color: #6b5a44; font: inherit; font-size: 15px; padding: 7px 18px; border-radius: 999px; cursor: pointer; }
.ph-min button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(60, 40, 10, 0.15); }

/* ---------- LCCD (/lccd/…): the festival's own look — the committee's poster red and gold, its own logo and header ---------- */
.lccd-site { --lcx-red: #9e2529; --lcx-deep: #7a181e; --lcx-gold: #e2b652; --lcx-gold-ink: #8a6416; }
.lccd-site .globalnav { background: var(--lcx-deep); box-shadow: inset 0 -1px 0 rgba(226, 182, 82, 0.5); }
.lccd-site .globalnav-bar { display: flex; flex: 1; justify-content: space-between; min-width: 0; }
.lccd-site .globalnav-tools { margin-left: auto; }
.lccd-site .globalnav-logo img { width: 40px; height: 40px; }
.lccd-site .globalnav-name { font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: 19px; letter-spacing: 0.01em; }
.lccd-site .globalnav-name:not(.globalnav-name-short) { display: inline; }
.lccd-site .globalnav-name-short { display: none; }
@media (max-width: 560px) {
  .lccd-site .globalnav-name:not(.globalnav-name-short) { display: none; }
  .lccd-site .globalnav-name-short { display: inline; font-weight: 700; letter-spacing: 0.08em; }
}
.lccd-footer { background: var(--lcx-deep); }
.lccd-foot-name { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; color: #fff; line-height: 1.5; }
.lccd-foot-name img { width: 40px; height: 40px; flex: none; }
.lccd-foot-orgs { color: rgba(255, 255, 255, 0.78); margin: 0 0 14px; line-height: 1.7; }

.lcx-hero { background: var(--lcx-red); color: #fff; padding: 48px 22px 56px; }
.lcx-hero-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 48px; align-items: center; }
.lcx-eyebrow { margin: 0 0 12px; color: var(--lcx-gold); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px; }
.lcx-title { margin: 0; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: clamp(36px, 5.4vw, 58px); line-height: 1.05; letter-spacing: -0.01em; }
.lcx-theme { margin: 14px 0 26px; font-family: var(--serif); color: var(--lcx-gold); font-size: clamp(22px, 2.8vw, 30px); letter-spacing: 0.12em; }
.lcx-date { margin: 0; font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; padding-top: 20px; border-top: 3px solid var(--lcx-gold); display: inline-block; }
.lcx-place { margin: 6px 0 16px; color: #f6e2c8; font-size: 17px; }
.lcx-place a { color: #f6e2c8; text-decoration: underline; text-decoration-color: rgba(246, 226, 200, 0.5); text-underline-offset: 3px; }
.lcx-times { list-style: none; margin: 0 0 26px; padding: 0; line-height: 1.9; font-size: 17px; color: #f6e2c8; }
.lcx-times b { color: #fff; display: inline-block; min-width: 128px; font-variant-numeric: tabular-nums; }
.lcx-free { color: var(--lcx-gold); font-weight: 600; }
.lcx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.lcx-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.7); color: #fff; font-weight: 600; font-size: 16px; }
.lcx-btn:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; color: #fff; }
.lcx-btn-gold { background: var(--lcx-gold); border-color: var(--lcx-gold); color: #3a1608; }
.lcx-btn-gold:hover { background: #ecc672; color: #3a1608; }
.lcx-poster { margin: 0; }
.lcx-poster img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 18px 40px rgba(40, 6, 8, 0.45); }

.lcx .lcp-h { position: relative; padding-bottom: 10px; }
.lcx .lcp-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--lcx-red); }
.lcx-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lcx-part { border: 1px solid #ecdcc4; border-top: 4px solid var(--lcx-red); border-radius: 10px; padding: 18px 20px; background: #fffaf2; }
.lcx-part-time { margin: 0; font-size: 22px; font-weight: 700; color: var(--lcx-red); font-variant-numeric: tabular-nums; }
.lcx-part h3 { margin: 4px 0 2px; font-size: 20px; }
.lcx-part-place { margin: 0 0 10px; color: var(--text-2); font-size: 15px; }
.lcx-part-note { margin: 0 0 2px; color: var(--text-2); font-size: 15px; }
.lcx-part ul { margin: 0; padding-left: 1.2em; line-height: 1.8; }
.lcx-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #f1e4cf; color: #6b4b1a; }
.lcx-tag.is-free { background: var(--lcx-red); color: #fff; }
.lcx-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.lcx-tier { border: 1px solid #ecdcc4; border-radius: 10px; padding: 14px 16px; background: #fff; }
.lcx-tier.is-full { opacity: 0.6; }
.lcx-tier-price { margin: 0; font-size: 24px; font-weight: 700; color: var(--lcx-gold-ink); font-variant-numeric: tabular-nums; }
.lcx-tier h3 { margin: 2px 0 6px; font-size: 17px; }
.lcx-tier-inc { margin: 0 0 4px; font-size: 15px; }
.lcx-tier-perks { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.lcx-cta { margin: 14px 0 0; }
@media (max-width: 760px) {
  .lcx-hero { padding: 30px 18px 36px; }
  .lcx-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .lcx-poster { display: none; } /* on a phone the poster only repeats the date, place and times above it (the user, 11/2026) */
  .lcx-parts { grid-template-columns: 1fr; }
  .lcx-times b { min-width: 0; margin-right: 6px; }
}
/* 贊助報名 (/lccd/sponsor/): a shorter hero; the levels are the choices */
.lcx-hero-sm { padding: 36px 22px 40px; }
.lcx-hero-one { grid-template-columns: 1fr; max-width: 760px; }
.lcx-sub { margin: 0; color: #f6e2c8; font-size: 17px; line-height: 1.7; max-width: 640px; }
.lcx-tier-pick .lcx-tier { position: relative; cursor: pointer; display: block; }
.lcx-tier-pick .lcx-tier input { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; accent-color: var(--lcx-red); }
.lcx-tier-pick .lcx-tier:has(input:checked) { border-color: var(--lcx-red); box-shadow: 0 0 0 2px var(--lcx-red); background: #fffaf2; }
.lcx-tier-pick .lcx-tier.is-full { cursor: not-allowed; }
.lcx-signup section { padding: 22px 0 6px; border-bottom: 0; }
.lcx-next { color: var(--text-2); margin: 18px 0 12px; }
.lcx-btn-big { min-height: 52px; font-size: 18px; padding: 0 28px; border: 0; cursor: pointer; font-family: inherit; }
.lcx-btn-red { background: var(--lcx-red); border-color: var(--lcx-red); color: #fff; }
.lcx-done { padding: 28px 0; }
a.lcx-tier { color: inherit; display: block; }
a.lcx-tier:hover { text-decoration: none; border-color: var(--lcx-red); }
.lcx-sp-actions { margin: 6px 0 0; }
.lcx-sp-actions .lcx-btn { border: 0; }
.lc-signups .lc-row .lc-bar { margin: 8px 0 2px; }
.lc-signups .lc-row-main { cursor: default; }
.lc-done-list { margin: 6px 0 0; padding-left: 1.2em; font-size: 14px; color: var(--text-2); line-height: 1.8; }
/* 分享連結 (/share/): one shared photo or video, on a dark page */
.shr { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; text-align: center; }
.shr-top { margin: 0 0 14px; color: var(--text-2); font-size: 15px; }
.shr-stage { display: grid; place-items: center; min-height: 240px; background: #17110c; border-radius: 12px; overflow: hidden; }
.shr-stage :is(video, img) { display: block; max-width: 100%; max-height: 78vh; max-height: 78dvh; }
.shr-stage video { width: 100%; background: #000; }
.shr-gone { color: #f4ecdf; padding: 40px 20px; }
/* 管理公告 (11/2026): a button at the top right of the cards; the panel opens under it, compact */
.an-manage { margin: 0 0 16px; text-align: right; }
.an-manage summary { display: inline-block; cursor: pointer; list-style: none; }
.an-manage summary::-webkit-details-marker { display: none; }
.an-manage[open] { padding: 14px 16px 16px; border: 1px solid #ead9bb; border-radius: 16px; background: #fffdf8; }
.an-manage .am-app { margin-top: 12px; text-align: left; }
.an-manage .am-top { margin-bottom: 2px; }
.an-manage .am-top .wt-h { margin: 0; font-size: 20px; }
.am-order-note { margin: 0 0 10px; }
.an-manage .am-list { gap: 0; border-top: 1px solid var(--rule); }
.an-manage .am-item { grid-template-columns: auto 56px minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; }
.an-manage .am-item.no-photo { grid-template-columns: auto minmax(0, 1fr); }
.an-manage .am-item img { width: 56px; height: 42px; aspect-ratio: auto; object-fit: cover; border-radius: 6px; }
.an-manage .am-item.is-editing { outline: 0; background: #f4f8ff; }
.am-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.am-item-head .am-item-meta { font-size: 15px; }
.an-manage .am-item-body { gap: 2px; }
.an-manage .am-item-body > small, .an-manage .am-item-body > p.small { font-size: 14px; }
.an-manage .am-actions { margin-top: 4px; font-size: 14px; gap: 6px; }
.an-manage .am-actions button { padding: 2px 10px; }
.am-move { display: grid; gap: 2px; min-width: 30px; }
.am-move button { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 14px; cursor: pointer; }
.am-move button:disabled { opacity: .3; cursor: default; }
.an-manage .am-deck { margin: 0 0 12px; padding: 10px 14px; }
.an-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .an-tools { margin-top: 16px; text-align: left; }
/* 管理 on a public page stands out (the user, 11/2026): the church's red, so those who look after it find it at once */
.an-manage summary, .an-links .ss-btn, .pw-admin a, .pw-review > summary, a.pub-manage, button.pub-manage, .pw-main a.pub-manage, .bx-tabs button.pub-manage { padding: 9px 20px; border: 1px solid var(--primary); border-radius: 999px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: 0 3px 10px rgba(90, 30, 20, .18); }
a.pub-manage { display: inline-flex; align-items: center; justify-content: center; }
a.pub-manage[hidden] { display: none; }
.pw-main a.pub-manage { align-self: center; margin: 0 0 6px; letter-spacing: 0; font-family: inherit; }
.an-manage summary:hover, .an-links .ss-btn:hover, .pw-admin a:hover, .pw-review > summary:hover, a.pub-manage:hover, button.pub-manage:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }
/* 特別活動 */
.sv-tools { display: flex; gap: 8px; margin-bottom: 14px; } .sv-types { margin-bottom: 16px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.sv-card { display: grid; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid #e6dcc9; border-radius: 10px; color: inherit; text-decoration: none; }
.sv-card small, .sv-kind { color: #8a6420; letter-spacing: .08em; font-size: 14px; } .sv-card b { font-family: var(--serif); font-size: 21px; } .sv-need { color: #7a2a1e; font-size: 15px; }
.sv-back { margin: 0 0 14px; } .sv-kind { margin: 0; } .sv-title { margin: 2px 0 4px; font-family: var(--serif); font-size: 30px; } .sv-when { margin: 0 0 14px; color: #6b5a48; }
.sv-about p { margin: 0 0 10px; line-height: 1.85; } .sv-acts { display: flex; gap: 8px; margin: 12px 0 22px; } .sv-h { margin: 22px 0 8px; font-family: var(--serif); font-size: 21px; }
.sv-roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ece3d2; } .sv-role { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #ece3d2; } .sv-role p { margin: 4px 0; } .sv-people { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-table { width: 100%; border-collapse: collapse; } .sv-table th, .sv-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #ece3d2; vertical-align: top; } .sv-table th { font-weight: 600; color: #6b5a48; font-size: 15px; }
.sv-job { margin: 4px 0; font-size: 15.5px; } .sv-job summary { cursor: pointer; color: #7a4e14; } .sv-job p { margin: 4px 0; line-height: 1.7; }
.sv-duties { margin-bottom: 20px; } .sv-rowacts { display: flex; gap: 10px; flex: none; } .sv-dutyform { margin-top: 12px; padding: 12px 14px; background: #fbf7ef; border-radius: 8px; } .sv-dutyform h4 { margin: 0 0 8px; }
.sv-pickline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .sv-pickline select, .sv-row select { padding: 6px 8px; font: inherit; border: 1px solid #cfc7b8; border-radius: 6px; width: auto; }
.sv-row textarea { flex: 1 1 100%; padding: 6px 8px; font: inherit; border: 1px solid #cfc7b8; border-radius: 6px; }
.sv-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; } .sv-row input { flex: 1 1 120px; min-width: 0; padding: 6px 8px; font: inherit; border: 1px solid #cfc7b8; border-radius: 6px; }
.bp-invite { margin: 10px 0 14px; } .bp-invite textarea { width: 100%; font: inherit; margin: 6px 0; }
#la-form .la-check { justify-content: flex-start; }
#la-form .la-check input { width: auto; flex: none; margin: 0; }
/* 上傳連結: the album's link in 活動相冊, and the page it opens (/album-upload/) */
.phx-link { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line, #e3dccf); border-radius: 8px; }
.phx-link-url { word-break: break-all; font-size: .9rem; margin: 6px 0; }
.alu { max-width: 640px; margin: 0 auto; padding: 32px 16px 56px; }
.alu h1 { margin: 0 0 4px; }
.alu-form { display: grid; gap: 14px; margin-top: 20px; }
.alu-form label { display: grid; gap: 4px; }
.alu-form input[type=text] { padding: 8px 10px; font: inherit; border: 1px solid #cfc7b8; border-radius: 6px; max-width: 320px; }
.alu-list { list-style: none; margin: 16px 0 0; padding: 0; }
.alu-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #eee7da; font-size: .92rem; overflow-wrap: anywhere; }
.alu-list span:last-child { flex: none; color: #6b6355; }
.shr-meta { margin: 12px 0 6px; color: var(--text-2); font-size: 15px; }
.shr-acts { margin: 0 0 18px; }
.shr-more { margin: 0; }

/* LCCD front page, traditional New Year (11/2026): 回紋 on the red, a gold frame, 燈籠 and 春聯 on wide screens, 橫批 on
   top; the five organizers with their logos. Decoration only — the season and the culture, no zodiac or luck themes. */
.lcx-hero { position: relative; overflow: hidden; padding: 28px 22px 52px;
  background-color: var(--lcx-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M4 4h40v40H4zM12 12h24v24H12zM20 20h8v8h-8z' fill='none' stroke='%23e2b652' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E"); }
.lcx-frame { position: relative; max-width: 1180px; margin: 0 auto; padding: 18px 28px 30px; border: 2px solid rgba(226, 182, 82, 0.75); outline: 1px solid rgba(226, 182, 82, 0.4); outline-offset: 6px; border-radius: 4px; }
.lcx-hengpi { margin: -36px auto 18px; width: max-content; padding: 6px 26px; background: var(--lcx-deep); border: 2px solid var(--lcx-gold); color: var(--lcx-gold); font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em; }
.lcx-hero .lcx-hero-inner:not(.lcx-hero-one) { grid-template-columns: 54px 1fr minmax(240px, 360px) 54px; gap: 36px; }
.lcx-couplet { margin: 0; align-self: stretch; writing-mode: vertical-rl; text-orientation: upright; display: flex; align-items: center; justify-content: center; padding: 18px 0; background: #b51f27; border: 2px solid var(--lcx-gold); color: var(--lcx-gold); font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 0.35em; box-shadow: 0 8px 20px rgba(40, 6, 8, 0.35); }
.lcx-sub-zh { margin: 12px 0 22px; font-family: var(--serif); color: var(--lcx-gold); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.12em; }
.lcx-lantern { position: absolute; top: -4px; width: 56px; height: 112px; z-index: 1; filter: drop-shadow(0 6px 10px rgba(40, 6, 8, 0.4)); }
.lcx-lantern-l { left: 3%; }
.lcx-lantern-r { right: 3%; }
.lcx-band { height: 14px; background: var(--lcx-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7h6V3h8v8h8V7h6' fill='none' stroke='%237a181e' stroke-width='2'/%3E%3C/svg%3E") repeat-x center; }
.lcx .lcp-h::after { background: var(--lcx-gold); height: 4px; }
.lcx .lcp-h::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: 4px; background: var(--lcx-red); transform: rotate(45deg); }
.lcx-part { background: #fff7ec; border: 1px solid #e9cfa4; border-top: 6px solid var(--lcx-red); box-shadow: inset 0 0 0 4px #fff7ec, inset 0 0 0 5px rgba(158, 37, 41, 0.18); }
.lcx-orgs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lcx-org { display: flex; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 14px; border: 1px solid #e9cfa4; border-radius: 10px; background: #fff; color: inherit; }
a.lcx-org:hover { border-color: var(--lcx-red); text-decoration: none; }
.lcx-org-logo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.lcx-org-logo img { max-width: 56px; max-height: 56px; object-fit: contain; border-radius: 6px; }
.lcx-seal { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; background: var(--lcx-red); color: #fff4dc; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; box-shadow: inset 0 0 0 2px var(--lcx-red), inset 0 0 0 4px #fff4dc; }
.lcx-org-name { display: flex; flex-direction: column; line-height: 1.35; }
.lcx-org-name small { color: var(--text-2); font-size: 14px; }
@media (max-width: 960px) {
  .lcx-hero .lcx-hero-inner:not(.lcx-hero-one) { grid-template-columns: 1fr minmax(220px, 320px); gap: 28px; }
  .lcx-couplet, .lcx-lantern { display: none; }
}
@media (max-width: 760px) {
  .lcx-hero { padding: 30px 12px 30px; }
  .lcx-frame { padding: 14px 16px 22px; }
  .lcx-hengpi { font-size: 21px; margin-top: -30px; }
  .lcx-hero .lcx-hero-inner:not(.lcx-hero-one) { grid-template-columns: 1fr; }
  .lcx-hero .lcx-actions .lcx-btn { padding: 0 16px; }
}
/* 禱告牆 類別: a button each, always shown (11/2026) */
.pw-cats { flex: 1 1 100%; order: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.pw-cats button { font: inherit; font-size: 15px; padding: 6px 14px; border-radius: 999px; border: 1px solid #d9ccb6; background: #fff; color: #5a4a3a; cursor: pointer; }
.pw-cats button:hover { border-color: #a31d1d; }
.pw-cats button[aria-pressed="true"] { background: #a31d1d; border-color: #a31d1d; color: #fff; }
/* 感謝去年的贊助商: the names, side by side */
.lcx-thanks { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lcx-thanks li { padding: 7px 14px; border-radius: 999px; background: #fff7ec; border: 1px solid #e9cfa4; font-size: 15px; }
.lcx-thanks a { color: inherit; }
.lcx-thanks a:hover { color: var(--lcx-red); }
/* 招募今年的贊助商: a red card after last year's thanks */
.lcx-invite { margin: 24px 0 0; padding: 22px 24px; border-radius: 12px; color: #fff; background: var(--lcx-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M4 4h40v40H4zM12 12h24v24H12zM20 20h8v8h-8z' fill='none' stroke='%23e2b652' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E"); border: 2px solid var(--lcx-gold); }
.lcx-invite p { margin: 0 0 12px; color: #f6e2c8; }
.lcx-invite .lcx-invite-h { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--lcx-gold); }
.lcx-invite .lcx-actions { margin: 4px 0 0; }
.lcx-invite .lcx-btn-line { color: #fff; }
.lcx-part-tix { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 0; }
.lcx-part-tix .lcx-btn { border: 0; }
.lcx-part-tix small { color: var(--text-2); font-size: 14px; }
/* 聚會人數 › 私人連結 */
.hc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.hc-link { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hc-link h3 { margin: 0 0 4px; font-size: 18px; }
.hc-link-url { padding: 8px 10px; border-radius: 8px; background: #f6f1e7; font-size: 14px; word-break: break-all; -webkit-user-select: all; user-select: all; }
.hc-link-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hc-welcome summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.hc-welcome-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
/* /count/ (the private link): the reminder, then the numbers */
.cnt { max-width: 640px; margin: 0 auto; padding: 24px 16px 56px; }
.cnt-text { white-space: pre-wrap; line-height: 1.8; font-size: 17px; padding: 16px 18px; border-radius: 12px; background: #fffaf2; border: 1px solid #ecdcc4; margin: 0 0 22px; }
.cnt-row { padding: 12px 0; border-top: 1px solid var(--line); }
.cnt-row b { display: block; margin-bottom: 6px; }
.cnt-ins { display: flex; flex-wrap: wrap; gap: 10px; }
.cnt-ins label { display: flex; flex-direction: column; font-size: 14px; color: var(--text-2); }
.cnt-ins input { width: 130px; font: inherit; font-size: 20px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.cnt-sum { font-size: 18px; margin: 8px 0 0; }
.cnt-done { font-size: 18px; color: #1d6b31; }
.cnt-name { display: block; margin: 16px 0 12px; font-size: 14px; color: var(--text-2); }
.cnt-name input { display: block; width: 100%; max-width: 280px; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 17px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
/* 我負責 › 聚會: the coming Sunday's 週報 first, above the tiles; not on the other 部's side */
.ph-sunday.is-other { display: none !important; }
.ph-category-tiles > .ph-sunday { grid-column: 1 / -1; margin: 0 0 4px; }
/* 主日午餐: a combo box's dishes */
.lu-parts { display: block; color: #6b4b1a; }
/* 中文事工: the 小組家譜 in the header (in place of the sanctuary photo) — the whole picture, a caption under it */
.mz-hero-tree { display: block; aspect-ratio: auto; box-shadow: none; border-radius: 0; color: var(--ink); text-decoration: none; }
.mz-hero-tree img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(70, 45, 20, 0.16); }
.mz-hero-tree span { display: block; margin-top: 10px; font-size: 15px; color: #6b5a48; }
.mz-hero-tree:hover { text-decoration: none; }
.mz-hero-tree:hover span { color: #a36312; }

/* 中文事工 / English Ministry as one story (11/2026): a bar to jump to each part, sticking under the menu; each part
   opens with its number, name, line and verse beside its photo */
.zs-jump { position: sticky; top: 68px; z-index: 50; background: rgba(251, 247, 239, 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid #ece3d2; }
.zs-jump-in { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.zs-jump-in::-webkit-scrollbar { display: none; }
.zs-jump a { flex: none; padding: 7px 14px; border-radius: 999px; color: #4a4036; font-size: 15px; white-space: nowrap; border: 1px solid transparent; }
.zs-jump a:hover { text-decoration: none; border-color: #d9c7a6; background: #fff; }
.zs-jump a.is-here { background: var(--wine, #7a2e2a); color: #fff; }
.zs-toc { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.zs-toc a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fffaf1; border: 1px solid #ece3d2; color: inherit; }
.zs-toc a:hover { text-decoration: none; border-color: #c99a5b; }
.zs-toc .mz-num { grid-row: span 2; align-self: center; }
.zs-toc small { color: #6b5a48; font-size: 14px; }
.zs { padding: 36px 0 8px; border-top: 1px solid #ece3d2; }
.zs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 8px; }
.zs-num { margin: 0; color: #a36312; font-size: 14px; letter-spacing: 0.12em; font-weight: 600; }
.zs-title { margin: 4px 0 6px; font-family: var(--serif); font-size: clamp(28px, 3.4vw, 38px); color: #231a10; }
.zs-tag { margin: 0 0 10px; font-size: 18px; color: #4a4036; }
.zs-head .mz-verse { color: #5a4a3a; }
.zs-img { width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: 14px; }
.zs .mz-sec { padding-top: 18px; padding-bottom: 18px; }
.zs-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; }
.zs-top { max-width: 1120px; margin: 0 auto; padding: 0 24px 12px; text-align: right; font-size: 14px; }
.zs-top a { color: #8a7a68; }
@media (max-width: 760px) {
  .zs-head { grid-template-columns: 1fr; gap: 14px; }
  .zs-jump { top: 60px; }
}
.zs-head { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
@media (max-width: 760px) { .zs-head { padding-left: 18px; padding-right: 18px; } }

/* 事工 (/ministries/): the two congregations with their Sunday times, Sunday School, the week — plain sections */
.mh-ctas { justify-content: center; margin-top: 18px; }
.mh-congs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mh-cong { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border: 1px solid #e5d9c5; border-top: 4px solid #7a2420; border-radius: 14px; background: #fffdf9; color: var(--ink); }
.mh-cong-en { border-top-color: #5b4636; }
.mh-cong:hover { text-decoration: none; border-color: #c99a5b; }
.mh-kicker { color: #8d6a32; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }
.mh-cong-name { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); }
.mh-cong-intro { color: var(--ink-2); line-height: 1.7; }
.mh-times, .mh-day ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.mh-times li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; background: #f5efe5; }
.mh-times span, .mh-day span { color: #6c5c48; font-size: 14px; font-variant-numeric: tabular-nums; }
.mh-go { margin-top: auto; padding-top: 10px; color: #7a2420; font-weight: 700; }
.mh-where { margin: 16px 0 0; text-align: center; color: var(--ink-2); font-size: 15px; }
.mh-ss { padding: 28px 22px; background: var(--linen); border-top: 1px solid #e6d8bf; border-bottom: 1px solid #e6d8bf; }
.mh-ss-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mh-ss .mz-h { margin: 0 0 6px; }
.mh-ss p { margin: 0; color: var(--ink-2); }
.mh-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 12px; }
.mh-day { padding: 16px 18px; border: 1px solid #e5d9c5; border-radius: 12px; background: #fff; }
.mh-day h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 20px; }
.mh-day li { display: grid; gap: 2px; }
@media (max-width: 700px) {
  .mh-congs { grid-template-columns: 1fr; }
  .mh-ss-in { flex-direction: column; align-items: flex-start; }
  .mh-times li { flex-direction: column; gap: 2px; }
}

/* 中文事工, the seven ministries (11/2026): words beside the photo, alternating sides; each photo at its own shape
   (width set, height follows — never stretched, squashed or cropped); a part without a photo is one calm column */
.zm { max-width: 1120px; margin: 0 auto; padding: 8px 24px 24px; }
.zm-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; align-items: center; padding: 48px 0; border-top: 1px solid #ece3d2; }
.zm-item:first-child { border-top: 0; }
.zm-item.has-photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
/* the hero's photo is on the right, so the first part's goes on the left, then they alternate */
.zm-item.has-photo:nth-child(odd) .zm-photo { order: -1; }
.zm-item:not(.has-photo) .zm-text { max-width: 760px; }
.zm-photo { margin: 0; }
.zm-photo img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 34px rgba(70, 45, 20, 0.14); }
.zm-num { margin: 0; color: #a36312; font-size: 14px; font-weight: 600; letter-spacing: 0.14em; }
.zm-title { margin: 4px 0 4px; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 38px); color: #231a10; }
.zm-tag { margin: 0 0 14px; font-size: 18px; color: #7a2e2a; }
.zm-body { margin: 0 0 16px; font-size: 18px; line-height: 1.85; color: #3b3027; }
.zm-times { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.zm-times li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 9px 14px; border-radius: 10px; background: #f6efe3; }
.zm-times b { font-weight: 600; color: #2b2118; }
.zm-times span { color: #6b5a48; font-variant-numeric: tabular-nums; }
.zm-points { margin: 0 0 16px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.zm-points dt { font-weight: 600; color: #2b2118; }
.zm-points dd { margin: 0; color: #4a4036; line-height: 1.7; }
.zm-note { margin: 0 0 16px; color: #4a4036; }
.zm-verse { margin: 0 0 14px; padding: 0 0 0 14px; border-left: 3px solid #e2c48d; color: #6b5a48; }
.zm-verse p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.7; }
.zm-verse cite { font-style: normal; font-size: 13px; color: #a36312; }
.zm-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.zm-links a { font-weight: 600; }
.zm-tree { grid-column: 1 / -1; }
.zm-intro { margin: 0 0 12px; font-size: 19px; line-height: 1.8; color: #3b3027; }
@media (max-width: 820px) {
  .zm { padding: 0 18px 16px; }
  .zm-item, .zm-item.has-photo { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 36px 0; }
  .zm-item.has-photo .zm-photo, .zm-item.has-photo:nth-child(even) .zm-photo { order: -1; }
  /* right under the hero's photo: the first part's words come before its photo, so two photos never meet */
  .zm-item.has-photo:first-child .zm-photo { order: 1; }
  .zm-points { grid-template-columns: 1fr; gap: 2px; }
  .zm-points dd { margin-bottom: 8px; }
}
/* English Ministry, one page like 中文事工: the real photos at their own shape (no forced ratio) */
.en-hero-img.en-hero-real { aspect-ratio: auto; height: auto; object-fit: initial; }
.en-card-img.zm-keep { aspect-ratio: auto; height: auto; object-fit: initial; }
.zm-wide { grid-column: 1 / -1; }
.zm-sub { margin: 4px 0 6px; font-weight: 600; color: #2b2118; }
@media (max-width: 820px) { .en-hero-img.en-hero-real { aspect-ratio: auto; } }
/* home page › 中文事工 | English Ministry: each one's week (day · time · gathering) instead of a line of words — in the
   panel's own text colour (light on the dark phone panels, dark on the paper ones) */
.ms-sched { display: grid; margin: 14px 0 4px; width: 100%; max-width: 460px; }
.ms-sched { grid-template-columns: max-content max-content 1fr; column-gap: 14px; }
.ms-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 0 14px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 15px; text-align: left; }
.ms-day, .ms-t { opacity: 0.78; font-variant-numeric: tabular-nums; }
.ms-n { font-weight: 600; }
.ms-t { white-space: nowrap; }
@media (max-width: 560px) {
  .ms-sched { column-gap: 9px; }
  .ms-row { font-size: 13.5px; gap: 0 9px; }
}
/* home page › 兒童事工 | 特別事工: one warm parchment band between the dark 中/EN panels and the cream below, thin gold rules */
.ms-kids { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; padding: 28px max(24px, calc((100% - 1120px) / 2)); background: #efe4cf; color: #2b2118; }
.ms-kids:hover { text-decoration: none; color: #2b2118; }
.ms-kids-head { display: flex; flex-direction: column; gap: 2px; }
.ms-kids .ms-kicker { color: #80602a; font-size: 13px; letter-spacing: 0.1em; }
.ms-kids-name { font-family: var(--serif); font-size: 30px; font-weight: 700; }
.ms-kids-sched { flex: 1 1 340px; margin: 0; }
.ms-kids .ms-go { margin: 0; color: #7a2e2a; }
/* 兒童事工: the season's classes under 兒童主日學 without repeating its name and time */
.zm .ssc-head h2, .zm .ssc-head > p { display: none; }
.zm .ssc-head { justify-content: flex-start; }
.mz-who a, .zm-note a { overflow-wrap: anywhere; }
/* home page › 兒童事工 | 特別事工 side by side (stacked on a phone) */
.ms-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); background: #efe4cf; border-top: 1px solid #c9a868; border-bottom: 1px solid #c9a868; }
.ms-pair .ms-kids { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 28px 32px; }
.ms-pair .ms-kids-sched { flex: none; width: 100%; max-width: none; }
.ms-pair .ms-special { border-top: 1px solid #dcc9a3; }
@media (min-width: 921px) { .ms-pair .ms-special { border-top: 0; border-left: 1px solid #dcc9a3; } }
.zm-soon { color: var(--text-2); font-size: 15px; }
/* 認識我們 (/about/), one page like the ministry pages: the hero photo at its own shape; plain lists, no cards */
.au2-hero figure.mz-hero-tree { margin: 0; }
.zm-item .zm-text.au2-wide { max-width: 940px; }
.au2-cares { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 40px; }
.au2-cares li { padding: 14px 0; border-bottom: 1px solid #ece3d2; }
.au2-cares b { display: block; margin-bottom: 4px; font-size: 18px; color: #231a10; }
.au2-cares span { color: #4a4036; line-height: 1.75; }
.au2-cares a, .au2-people a { color: #7a2e2a; overflow-wrap: anywhere; }
.au2-strives { margin: 0 0 18px; padding-left: 1.2em; color: #3b3027; font-size: 17px; line-height: 1.9; }
.au2-strives li::marker { color: #b8914a; }
.au2-people dt small { margin-left: 6px; font-weight: 400; color: #8a6a3a; }
.au2-cap { margin-top: 10px; font-size: 14px; color: #6b5a48; }
.au2-years { list-style: none; margin: 8px 0 24px; padding: 0; }
.au2-years li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #ece3d2; }
.au2-years span { font-family: var(--serif); font-size: 20px; font-weight: 700; color: #a36312; }
.au2-years b { display: block; color: #231a10; font-size: 17px; }
.au2-years small { display: block; margin-top: 2px; color: #6b5a48; font-size: 15px; line-height: 1.6; }
.mz-who.au2-invite { font-family: inherit; font-size: 17px; line-height: 1.8; color: #4a4036; }
/* 認識我們 › 信仰告白: plain lines, not boxes */
#faith .au-believe { gap: 0; max-width: 720px; margin-left: auto; margin-right: auto; }
#faith .au-believe li { padding: 14px 0; border: 0; border-bottom: 1px solid #ece3d2; border-radius: 0; background: none; }
#faith .au-believe li::before { content: none; }
/* 相片輪播 (slideshow.njk): each photo whole, at its own shape, on a warm ground; swipe or ‹ › */
.sw { position: relative; }
.sw-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 14px; background: #f6efe3; box-shadow: 0 14px 34px rgba(70, 45, 20, 0.14); outline-offset: 4px; }
.sw-track::-webkit-scrollbar { display: none; }
.sw-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sw .sw-slide img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(68vh, 560px); border-radius: 0; box-shadow: none; }
.sw-cap { padding: 8px 14px 10px; font-size: 14px; color: #6b5a48; text-align: center; }
.sw-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.sw-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d9c7a6; background: #fff; color: #4a4036; font-size: 22px; line-height: 1; cursor: pointer; }
.sw-btn:hover { border-color: #b8914a; }
.sw-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sw-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d9c7a6; cursor: pointer; }
.sw-dot[aria-current="true"] { background: #7a2e2a; }
/* 網頁相片輪播 (/portal/galleries/) */
.ga-warn { padding: 12px 14px; border-left: 3px solid #b8914a; background: #f6efe3; color: #4a4036; }
.ga-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0; }
.ga-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ga-upload { cursor: pointer; }
.ga-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 14px; }
.ga-list > li[data-f] { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid #ece3d2; }
.ga-list img { display: block; width: 100%; height: auto; border-radius: 8px; background: #f6efe3; }
.ga-fields { display: grid; gap: 8px; }
.ga-fields label { display: grid; gap: 2px; }
.ga-fields input { width: 100%; }
.ga-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ga-del { color: #7a2e2a; }
@media (max-width: 560px) { .ga-list > li[data-f] { grid-template-columns: 1fr; } }
/* 事工 hub: 兒童事工 and 特別事工 beside the two congregations */
.mh-cong-children { border-top-color: #b8914a; }
.mh-cong-special { border-top-color: #8a6a3a; }
/* 教會成長 (/history/), told like 認識我們 */
.hi2-title { font-size: clamp(32px, 4.6vw, 50px); }
.hi2-closing { margin: 8px 0 18px; font-size: 17px; line-height: 1.9; color: #3b3027; }
.hi2-poem { margin: 18px 0; padding: 4px 0 4px 16px; border-left: 3px solid #e2c48d; font-family: var(--serif); font-size: 19px; color: #231a10; }
/* 小組 (leaders): the public card isn't filled in yet */
.sg-card-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid #b8914a; background: #f6efe3; color: #4a4036; }
.sg-card-nudge[hidden] { display: none; }
/* English Ministry: the small groups are for young adults (20–35) — said on the home panel, the hero and each group */
.en-chips > .en-chip-ya { padding: 6px 14px; border-radius: 980px; background: var(--en-ink, #2b2118); border: 1px solid var(--en-ink, #2b2118); color: #fff; font-size: 15px; font-weight: 600; }
.en-chips > .en-chip-ya:hover { text-decoration: none; opacity: 0.9; }
/* 活動報名 › rules to agree to: the whole text in a box that scrolls, then the tick and the signature */
.su-agree { margin: 18px 0; padding: 14px 16px; border: 1px solid #e3d4b4; border-radius: 12px; background: #fffdf8; }
.su-agree-text { max-height: 320px; overflow-y: auto; margin: 6px 0 12px; padding: 12px 14px; border-radius: 8px; background: #f6efe3; color: #3b3027; line-height: 1.8; }
.su-signed { color: #4f6b2f; }
/* 家人資料連結 (/portal/family-links/): the two sides of one family, side by side */
.fl-counts { font-weight: 600; }
.fl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 14px 0; border-bottom: 1px solid #ece3d2; }
.fl-pair > div { display: flex; flex-direction: column; gap: 2px; }
.fl-pair small { color: #6b5a48; }
.fl-k { margin: 0; color: #8a6a3a; font-size: 13px; font-weight: 600; }
.fl-why { grid-column: 1 / -1; margin: 0; color: #6b5a48; font-size: 14px; }
.fl-acts { grid-column: 1 / -1; display: flex; gap: 10px; margin: 4px 0 0; }
@media (max-width: 560px) { .fl-pair { grid-template-columns: 1fr; } }
.sg-cdiff { color: #9a5a12; }
.kr-tag.is-in { background: #eef3e6; color: #3f5a24; border-color: #d5e0c4; }
/* 主日接待與飯食's share link: the Sunday count, then 各項須知 */
.rs-count, .rs-notes { margin-top: 28px; }
.rs-job { padding: 12px 0; border-top: 1px solid var(--line); }
.rs-job h3 { margin: 0 0 4px; font-size: 17px; }
.rs-job p { margin: 0; white-space: pre-wrap; line-height: 1.7; }
/* 家人總覽 (/portal/family-overview/): one row per family — adults, then children with their age and class */
.fo-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 6px; }
.fo-bar input[type="search"] { flex: 1 1 200px; min-width: 0; }
.fo-bar select { max-width: 100%; }
.fo-fam { padding: 12px 0; border-bottom: 1px solid #ece3d2; }
.fo-fam h3 { margin: 0 0 4px; font-size: 17px; }
.fo-fam h3 small { margin-left: 8px; color: #8a6a3a; font-size: 14px; font-weight: 600; }
.fo-ppl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0; color: #3b3027; }
.fo-ppl small { color: #6b5a48; }
.fo-kid { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fo-none { color: #9a5a12; font-size: 14px; }
/* home 事工: 「了解更多」 at the foot of each card, so the four line up however long each schedule is */
.ministry-split .ms-panel .ms-go, .ms-pair .ms-kids .ms-go { margin-top: auto; padding-top: 18px; }
.ms-pair .ms-kids { flex-wrap: nowrap; }
/* a narrow card (the two side by side on a tablet): the name goes under the time instead of breaking mid-word */
.ms-panel, .ms-pair .ms-kids { container-type: inline-size; }
@container (max-width: 400px) {
  .ms-sched { grid-template-columns: max-content 1fr; }
  .ms-n { grid-column: 2; padding-bottom: 2px; }
}
/* home 事工: the weekday gatherings by name, under the Sunday's rows */
.ms-week { display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; margin: 12px 0 0; max-width: 460px; width: 100%; font-size: 15px; line-height: 1.7; text-align: left; }
.ms-week-k { opacity: 0.78; }
.ms-week-n { white-space: nowrap; }
.ms-week-sep { opacity: 0.6; }
/* home 兒童事工 | 特別事工 in deep colours like the two above (the user, 11/2026): forest green and slate blue, a large
   童 / 特 behind, gold kicker and link; the same hover (warmer, a gold line along the bottom, the character forward) */
.ms-pair { background: #1f2a24; border-top: 0; border-bottom: 0; }
.ms-pair .ms-kids { position: relative; overflow: hidden; padding: 40px 48px 40px; color: #fbf3e2; background: linear-gradient(150deg, #2f4a37 0%, #1d3326 100%); transition: background 0.3s; }
.ms-pair .ms-special { background: linear-gradient(150deg, #2e3c52 0%, #1c2638 100%); }
.ms-pair .ms-kids:hover, .ms-pair .ms-kids:focus-visible { color: #fbf3e2; background: linear-gradient(150deg, #36553f 0%, #223b2c 100%); }
.ms-pair .ms-special:hover, .ms-pair .ms-special:focus-visible { background: linear-gradient(150deg, #36465e 0%, #212d42 100%); }
.ms-pair .ms-kids > :not(.ms-mark) { position: relative; z-index: 1; }
.ms-pair .ms-mark { font-size: 200px; bottom: -34px; }
.ms-pair .ms-kids:hover .ms-mark, .ms-pair .ms-kids:focus-visible .ms-mark { color: rgba(243, 199, 126, 0.18); transform: translateY(-6px); }
.ms-pair .ms-kids::after { content: ""; position: absolute; left: 48px; right: 48px; bottom: 0; height: 3px; z-index: 1; background: #f3c77e; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.ms-pair .ms-kids:hover::after, .ms-pair .ms-kids:focus-visible::after { transform: scaleX(1); }
.ms-pair .ms-kids .ms-kicker { color: #f3c77e; }
.ms-pair .ms-kids-name { color: #fff8ec; }
.ms-pair .ms-kids .ms-go { color: #f3c77e; }
.ms-pair .ms-kids:hover .ms-go { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ms-pair .ms-special { border-top: 0; }
@media (min-width: 921px) { .ms-pair .ms-special { border-left: 0; } }
@media (max-width: 734px) {
  .ms-pair .ms-kids { padding: 32px 24px 30px; }
  .ms-pair .ms-kids::after { left: 24px; right: 24px; }
  .ms-pair .ms-mark { font-size: 150px; bottom: -26px; }
}
@media (prefers-reduced-motion: reduce) { .ms-pair .ms-kids, .ms-pair .ms-kids::after { transition: none; } }
.zm-signup { margin: 14px 0 0; }
/* 中文事工 / English Ministry pages are one language: no 中 / EN switch; a line for the other congregation */
html[data-lang-fixed] .nav-lang { display: none; }
.mz-other, .en-other { margin: 6px 0 0; font-size: 15px; opacity: 0.9; }
.mz-other a, .en-other a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 直播: the stream's own thumbnail behind the play button (darkened for the label); a link when there's no player */
.yt-facade[style*="background-image"] { background-size: cover; background-position: center; box-shadow: inset 0 0 0 2000px rgba(20, 14, 8, 0.35); }
a.yt-facade, a.yt-facade:hover { text-decoration: none; color: #fff; }
.live-now { margin-left: 6px; font-weight: 600; }
/* home: the English Ministry card opens Church Center (another site) */
.ms-go-out::after { content: " ↗"; }
/* 週報 editor: 家訊's first items, filled in by the website (read-only) */
.ble-annhead { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #f6f1e7; }
.ble-head { margin: 0 0 4px; padding-left: 1.4em; color: #3b3027; }
.ble-head li { margin: 2px 0; }

/* 週報 editor: 本週經文 is kept in 家訊 now — its card hidden while it comes from there; a synced 家訊's print ticks can't change */
.ble-card.is-synced:has([data-verse-card]) { display: none; }
.ble-card.is-synced .ble-print { pointer-events: none; opacity: 0.6; }
/* 家訊與代禱 (/portal/notices/) */
.nt-verse { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; background: #fff; }
.nt-verse legend { font-weight: 700; padding: 0 4px; }
.nt-verse textarea, .nt-verse input, .nt-item textarea { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; box-sizing: border-box; }
.nt-auto { margin: 0 0 8px; padding: 8px 12px 8px 2.2em; border-radius: 10px; background: #f6f1e7; color: #3b3027; }
.nt-auto li { margin: 4px 0; }
.nt-h { font-size: 17px; margin: 14px 0 6px; }
.nt-items { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.nt-item { display: grid; grid-template-columns: 2em 1fr; gap: 4px 6px; }
.nt-num { font-weight: 700; color: #8a6a3a; padding-top: 8px; text-align: right; }
.nt-item .nt-tools { grid-column: 2; }
.nt-link { grid-column: 2; display: flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; } .nt-link input { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.nt-tools { display: flex; margin-top: 4px; gap: 10px; align-items: center; justify-content: flex-end; font-size: 14px; }
.nt-print { display: inline-flex; gap: 4px; align-items: center; color: var(--text-2); }
.nt-now { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: #f6f1e7; color: #3b3027; }
.nt-copybar { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f0d9a8; }
/* 週報's steps: the bar at the top of each step's page, and the list on /portal/weekly/ */
.bls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; padding: 8px 10px; border-radius: 12px; background: #f6f1e7; font-size: 15px; }
.bls a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 980px; color: #5b4630; text-decoration: none; }
.bls a:hover { background: #fff; }
.bls .bls-home { font-weight: 700; color: #8a2a24; }
.bls a[aria-current="page"] { background: #a35d0f; color: #fff; }
.bls-n { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(0, 0, 0, 0.08); font-size: 0.85em; font-weight: 700; }
.bls a[aria-current="page"] .bls-n { background: rgba(255, 255, 255, 0.25); }
.blw { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; padding: 0; margin: 0 0 12px; list-style: none; }
.bwk-app { margin-top: 22px; width: 100%; } .bwk-list { list-style: none; margin: 8px 0; padding: 0; border-top: 1px solid var(--line); }
.bwk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.bwk-state { grid-row: 1; grid-column: 1; } .bwk-what { grid-row: 1; grid-column: 2; } .bwk-do { grid-row: 1; grid-column: 3; display: flex; gap: 14px; white-space: nowrap; }
.bwk-who { grid-row: 2; grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .bwk-pick { grid-row: 3; grid-column: 2 / -1; }
[data-ph-open], .ph-open-title { display: none; }
.ph-open-view [data-ph-open] { display: block; } .ph-open-view .ph-open-title { display: inline; }
.ph-todo[hidden] { display: none; }
.ph-open-view [data-ph-group], .ph-open-view [data-ph-min-title] { display: none !important; }
/* 中文部｜English Ministry: each side its own tiles (portal-home.js › setMin) */
[data-ph-open-en] { display: none; } .ph-open-view.ph-side-en [data-ph-open-en] { display: block; } .ph-open-view.ph-side-en [data-ph-open] { display: none; }
[data-ph-open-kids] { display: none; } .ph-open-view.ph-side-kids [data-ph-open-kids] { display: block; } .ph-open-view.ph-side-kids [data-ph-open] { display: none; }
.ph-en-tools { margin-top: 26px; } .ph-en-tools h2 { margin: 0 0 12px; } .ph-en-tools:not(:has(.pt-tile:not([hidden]))) { display: none; }
.blw .ph-tile-head { display: flex; align-items: center; gap: 8px; }
/* /gospel/ — the 福音班's weekly notice (private link) */
.gsp-f { display: block; margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.gsp-f input, .gsp-f textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 17px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.gsp-f textarea { line-height: 1.6; resize: vertical; }
.gsp-prev { display: grid; grid-template-columns: 2em 1fr; padding: 14px 16px; border-radius: 12px; background: #fffaf2; border: 1px solid #ecdcc4; line-height: 1.8; font-size: 16px; }
.gsp-prev .muted { grid-column: 1 / -1; margin: 0; }
.nt-gsp { margin: 0 0 18px; }
/* 週報使用說明 (/portal/guide/, /guide/?k=) */
.gd-wrap { max-width: 760px; }
.gd { max-width: 760px; }
.gd-intro { font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
.gd-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.gd-toc a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text); font-size: 14px; background: #fff; }
.gd-toc a span { font-size: 12px; color: var(--text-2); }
.gd-sec { padding: 20px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.gd-h { margin: 0 0 8px; font-size: 22px; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
.gd-meta b { margin-right: 6px; color: var(--text); }
.gd-steps { margin: 0 0 12px; padding-left: 1.6em; line-height: 1.8; font-size: 16px; }
.gd-steps li { margin: 0 0 8px; }
.gd-steps img { display: block; max-width: min(100%, 560px); margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 10px; }
.gd-tips { background: #fffaf2; border: 1px solid #ecdcc4; border-radius: 12px; padding: 10px 16px; margin: 0 0 12px; }
.gd-tips-h { margin: 0 0 4px; font-weight: 700; font-size: 14px; }
.gd-tips ul { margin: 0; padding-left: 1.2em; line-height: 1.7; font-size: 15px; }
.gd-go { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-upd { margin-top: 24px; }
.bls-help { margin-left: auto; font-size: 14px; white-space: nowrap; }
/* 「怎麼用？」 / 「帶我走一遍」 (tour.js) */
.tour-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; font-size: 14px; }
.tour-go { font: inherit; font-size: 14px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.tour-ring { position: absolute; z-index: 9998; border: 3px solid #b5522f; border-radius: 10px; pointer-events: none; transition: all .25s ease; box-shadow: 0 0 0 4px rgba(181, 82, 47, .18); }
.tour-card { position: absolute; z-index: 9999; background: #fff; color: #222; border: 1px solid #d9cbb5; border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); font-size: 15px; line-height: 1.6; }
.tour-n { margin: 0 0 2px; font-size: 12px; color: #777; }
.tour-t { margin: 0 0 10px; }
.tour-acts { display: flex; gap: 10px; align-items: center; margin: 0; }
.gd-pick-h { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.gd-pick-sub { margin-top: 14px; color: var(--text-2); font-weight: 400; font-size: 14px; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.gd-chip { font: inherit; font-size: 15px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.gd-chip[aria-pressed="true"] { background: #8a4b16; border-color: #8a4b16; color: #fff; }
.gd-body { margin-top: 18px; scroll-margin-top: 80px; }
.gd-body .gd-sec:first-child { border-top: 0; }
/* 使用說明: the guides by area, one guide's title, who fills each part */
.gd-area { margin: 22px 0 10px; font-size: 16px; color: var(--text-2); font-weight: 600; }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gd-card { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); cursor: pointer; }
.gd-card b { font-size: 18px; }
.gd-card-d { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.gd-mine { align-self: flex-start; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #f3e6d6; color: #7a3f0f; }
.gd-crumb { margin: 0 0 6px; font-size: 14px; }
.gd-title { margin: 0 0 14px; font-size: 26px; }
.gd-h3 { margin: 18px 0 8px; font-size: 18px; }
.gd-scroll { overflow-x: auto; margin: 0 0 14px; }
.gd-parts { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.gd-parts th, .gd-parts td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.gd-parts th { font-size: 13px; color: var(--text-2); font-weight: 600; background: #faf6ef; white-space: nowrap; }
.gd-parts td:first-child { font-weight: 600; min-width: 7em; }
.gd-parts td:last-child { white-space: nowrap; }
.gd-sec .gd-go { margin: 0 0 12px; }
/* /ss-count/ — 主日學出席人數 (private link) */
.ssc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ssc-row b { margin: 0; }
.ssc-row input { width: 110px; font: inherit; font-size: 20px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ssc-total { font-weight: 700; }
/* 特別事工 › a book club's books (specialMinistries.json › books) */
.bk-k { margin: 18px 0 8px; font-size: 13px; letter-spacing: .08em; color: var(--text-2); font-weight: 600; }
.bk-now { margin-top: 14px; }
.bk-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #fffaf2; border: 1px solid #ecdcc4; }
.bk-row img { width: 72px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.bk-t { margin: 0; font-weight: 700; font-size: 17px; }
.bk-s { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.bk-a { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.bk-list img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); margin-bottom: 6px; } /* each cover as it is — not cut */
.bk-list li { display: flex; flex-direction: column; justify-content: flex-start; }
.bk-list .bk-t { font-size: 14px; }
.bk-list .bk-s, .bk-list .bk-a { font-size: 12px; }
/* 福音班's lesson rows: that Sunday's words for the 週報, on a line of their own */
.ss-lesson-notice { flex: 1 0 100%; grid-column: 1 / -1; width: 100%; box-sizing: border-box; font: inherit; margin-top: 4px; }

/* ---------- 週報 on the website (11/2026, after ChatGPT's dark version): plain, like the rest of the site ---------- */
/* /news/: the issues as lines, this week's first; 列印存檔 beside each for the family; the 2011–2026 archive under them */
.news-hub-inner { max-width: 760px; }
.news-hub-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.news-hub-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #e3d3b3; border-radius: 999px; background: #f1e7d3; }
.news-hub-tabs button { padding: 7px 18px; border: 0; border-radius: 999px; background: none; color: #6b5a44; font: inherit; font-size: 15px; cursor: pointer; }
.news-hub-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(60, 40, 10, .15); }
.news-hub-tabs button[hidden] { display: none; }
.news-hub-sermon { font-weight: 600; }
.news-hub-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.news-hub-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 4px; border-bottom: 1px solid var(--rule); }
.news-hub-list > li > a:first-child { margin-right: auto; color: var(--ink); font-family: var(--serif); font-size: 19px; font-weight: 600; text-decoration: none; }
.news-hub-list > li > a:first-child:hover { color: var(--primary); }
.news-hub-list > li[data-date] > .muted { display: none; }
.news-hub-list > li[data-date]:first-child > a:first-child::after { content: "最新"; margin-left: 10px; padding: 1px 9px; border-radius: 999px; background: #f6e7cf; color: #8a5a14; font-family: var(--font); font-size: 13px; font-weight: 600; vertical-align: middle; }
.news-hub-list[data-list="en"] > li[data-date]:first-child > a:first-child::after { content: "Latest"; }
.news-hub-list .na-print { font-size: 15px; }
.news-hub-list > li:not([data-date]) { display: block; color: var(--ink-2); }
.news-hub-old { margin-top: 34px; }
.news-hub-old .na-h { margin: 0 0 12px; font: 600 21px/1.4 var(--serif); }
/* one 週報: its Sunday under the title; the 週報 in one column with a row of jump links */
.bl-hero .ab-eyebrow a { color: inherit; text-decoration: none; }
.bl-hero .ab-eyebrow a:hover { text-decoration: underline; }
.bl-hero-date { margin: 8px 0 0; color: var(--ink-2); font-size: 18px; }
.bl-reader-paper { box-sizing: border-box; max-width: 780px; margin: 0 auto; padding: 28px 20px 64px; }
.bl-reader-content .bl { font-size: 18px; line-height: 1.8; }
.bl-reader-content h2 { scroll-margin-top: 84px; }
.bl-jump { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 24px; padding: 0 0 16px; border-bottom: 1px solid var(--rule); }
.bl-jump a { padding: 4px 12px; border: 1px solid #e3d3b3; border-radius: 999px; background: #fffdf8; color: var(--ink-2); font-size: 15px; text-decoration: none; white-space: nowrap; }
.bl-jump a:hover { border-color: var(--primary); color: var(--primary); }
.bl-reader-verse { margin: 0 0 22px; padding: 18px 22px; border-left: 3px solid #c9a86a; background: #fbf6ec; }
.bl-reader-verse p { margin: 0; font: 500 20px/1.8 var(--serif); }
.bl-reader-verse cite { display: block; margin-top: 6px; color: #8d6124; font-size: 15px; font-style: normal; text-align: right; }
.bl-reader-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.blp-banner { width: min(100% - 32px, 940px); margin: 18px auto; padding: 12px 16px; border: 1px solid #e5d4a9; border-radius: 14px; background: #fff8e8; color: #624a20; font-size: 15px; }
@media (max-width: 560px) { .bl-reader-paper { padding: 20px 14px 48px; } .bl-reader-content .bl { font-size: 17px; } .news-hub-list > li > a:first-child { font-size: 17px; } }

/* 週報 › 小組 on the website: its line, and the way to 小組家譜 (bulletin-render.js) */
.bl-groups-when { margin: 0 0 6px; }
.bl-groups-link { margin: 0; }
.bl-groups-link a { font-weight: 600; }

/* 家人專區 header (11/2026): the 部 switch and 待辦 on one row; the account under it, quietly */
.ph-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 14px auto 4px; }
.ph-bar .ph-min { margin: 0; }
.ph-todo-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 18px; border: 1px solid var(--primary); border-radius: 999px; background: #fffdf8; color: var(--primary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ph-todo-btn[hidden] { display: none; }
.ph-todo-btn:hover { background: #fff; }
.ph-todo-btn .ph-todo-count { min-width: 26px; height: 26px; padding: 0 8px; font-size: 15px; line-height: 26px; }
.ph-todo-btn[aria-expanded="true"] { background: var(--primary); color: #fff; }
.ph-todo-btn[aria-expanded="true"] .ph-todo-count { background: #fff; color: var(--primary); }
.ph-acct { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 8px 0 0; font-size: 14px; }
.ph-acct .ph-who { margin: 0; font-size: 14px; }
.ph-acct .ph-signout { margin: 0; padding: 2px 10px; font-size: 13px; }
/* each tile with its 使用說明 under it */
.ph-tile-wrap { display: grid; grid-template-rows: 1fr auto; gap: 4px; min-width: 0; }
.ph-tile-wrap:has(> .pt-tile[hidden]) { display: none; }
.ph-tile-wrap > .ph-tile { height: 100%; }
.ph-tile-guide { justify-self: start; padding: 0 4px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.ph-tile-guide:hover { color: var(--primary); text-decoration: underline; }
/* 測試中: greyed for everyone but those who run it */
.ph-test-badge { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: #fff1d6; color: #9a5b00; font-family: var(--sans, inherit); font-size: 12px; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.ph-tile.is-testing .ph-tile-name::after { content: none; }
.ph-tile:has(.ph-test-badge) { position: relative; padding-right: 64px; }
.ph-tile .ph-test-badge { position: absolute; top: 12px; right: 12px; margin: 0; }
.bl-preview-title { margin: 6px 0 0; font: 700 34px/1.3 var(--serif); }
.bl-reader-preview .ab-eyebrow a { color: var(--primary); text-decoration: none; }

/* 週報怎麼用 (/howto/bulletin/, 11/2026): 彼此擔當重擔 first — the verse and the church in the sun; then and now; the
   letter; email 李濤 if not ready; then the tasks and the short videos (our own play button, no grey bar until it plays) */
/* 週報怎麼用 (/howto/bulletin/), look v2 (the user, 11/2026): filled surfaces, type for hierarchy, no lines or gradients */
.hw-hero { background: #f5f4f1; }
.hw-hero-in { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1080px; margin: 0 auto; padding: 48px 22px; }
.hw-eyebrow { margin: 0 0 10px; color: #6e6e73; font-size: 15px; font-weight: 600; }
.hw-title { margin: 0; font: 700 clamp(44px, 7vw, 72px)/1.1 var(--serif); color: #1d1d1f; letter-spacing: .04em; }
.hw-title span { color: var(--primary); }
.hw-hero-verse { margin: 22px 0 0; }
.hw-hero-verse p { margin: 0; font: 500 clamp(19px, 2.4vw, 23px)/1.75 var(--serif); color: #1d1d1f; }
.hw-hero-verse cite { display: block; margin-top: 6px; color: #6e6e73; font-size: 15px; font-style: normal; }
.hw-hero-sub { margin: 18px 0 0; font-size: 17px; line-height: 1.75; color: #424245; }
.hw-hero-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; }
.hw { box-sizing: border-box; max-width: 1040px; margin: 0 auto; padding: 36px 20px 64px; }
.hw-letter { max-width: 720px; margin: 0 auto 44px; font-size: 17px; line-height: 1.85; color: #1d1d1f; }
.hw-letter p { margin: 0 0 12px; }
.hw-sign { margin: 18px 0 0 !important; text-align: right; color: #6e6e73; }
/* the whole: the parts as rows on grey, the week's rhythm, then each part */
.hw-overview { max-width: 820px; margin: 0 auto 52px; }
.hw-h { margin: 0 0 10px; font: 700 clamp(26px, 3.4vw, 32px)/1.3 var(--serif); color: #1d1d1f; }
.hw-h3 { margin: 30px 0 10px; font: 700 20px/1.4 var(--serif); color: #1d1d1f; }
.hw-lead { margin: 0 0 18px; font-size: 17px; line-height: 1.8; color: #424245; }
.hw-note { margin: 16px 0 0; color: #6e6e73; font-size: 15px; }
/* each part: the video beside its steps (stacked on a phone) */
.hw-sec { max-width: 920px; margin: 0 auto 26px; padding: 28px; border-radius: 22px; background: #f5f4f1; scroll-margin-top: 80px; }
.hw-sec-head { margin: 0 0 18px; }
.hw-sec-n { margin: 0; color: var(--primary); font-size: 14px; font-weight: 700; }
.hw-sec-head h3 { margin: 4px 0 0; font: 700 clamp(24px, 3vw, 28px)/1.3 var(--serif); color: #1d1d1f; }
.hw-who { margin: 6px 0 0; color: #424245; font-size: 15px; font-weight: 600; }
.hw-desc { margin: 6px 0 0; color: #424245; font-size: 16px; line-height: 1.7; }
.hw-sec-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.hw-text { min-width: 0; }
.hw-meta { display: grid; gap: 6px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: #fff; }
.hw-meta > div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 8px; }
.hw-meta dt { color: #6e6e73; font-size: 14px; }
.hw-meta dd { margin: 0; color: #1d1d1f; font-size: 15px; font-weight: 600; }
.hw-steps { margin: 0; padding: 0; list-style: none; counter-reset: hw; }
.hw-steps li { position: relative; margin: 0 0 12px; padding-left: 34px; font-size: 16px; line-height: 1.75; color: #1d1d1f; counter-increment: hw; }
.hw-steps li::before { content: counter(hw); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #1d1d1f; font-size: 13px; font-weight: 700; }
.hw-tip { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff; color: #424245; font-size: 15px; line-height: 1.7; }
.hw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.hw-status { font-size: 13px; color: #6e6e73; word-break: break-all; }
.hw-help { max-width: 720px; margin: 44px auto 30px; padding: 26px; border-radius: 22px; background: #f5f4f1; text-align: center; }
.hw-help h2 { margin: 0 0 6px; font: 700 22px/1.4 var(--serif); }
.hw-help p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #424245; }
.hw-help p:last-child { margin: 0; }
.hw-help a { text-decoration: none; }
.hw-foot { margin: 10px 0 0; text-align: center; font-weight: 600; }
/* the video: a phone screen with our play button */
.hw-vbox { position: relative; }
.hw-vbox .hw-video { cursor: pointer; }
.hw-video { display: block; width: 100%; aspect-ratio: 390 / 760; border-radius: 18px; background: #fff; }
.hw-video:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; object-fit: contain; }
.hw-video:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; object-fit: contain; }
.hw-play { position: absolute; left: 50%; top: 74%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 0; border-radius: 50%; background: rgba(29, 29, 31, .78); cursor: pointer; transition: transform .2s; }
.hw-play::after { content: ""; position: absolute; left: 28px; top: 21px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #fff; }
.hw-play:hover { transform: scale(1.06); }
.hw-vbox.is-on .hw-play { display: none; }
/* a shared link: that video first, then 如何註冊 */
.hw-shared { margin: 0 0 40px; }
.hw-shared[hidden] { display: none; }
.hw-more { grid-column: 1 / -1; margin: 0; text-align: center; font-weight: 600; }
/* 管理：私人連結 */
.hw-link { margin: 0 0 20px; }
.hw-link-in { text-align: left; margin-top: 12px; }
.hw-link-in h2 { margin: 0 0 4px; font-size: 18px; }
.hw-link-url { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #f5f4f1; font-size: 14px; overflow-wrap: anywhere; }
.hw-link-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .hw-hero-in { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 16px 30px; }
  .hw-hero-pic { order: -1; aspect-ratio: 16 / 9; border-radius: 14px; }
  .hw { padding: 26px 16px 50px; }
  .hw-sec { padding: 20px 16px; border-radius: 18px; }
  .hw-sec-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hw-vbox { max-width: 300px; margin: 0 auto; width: 100%; }
}
.hw-gate, .hw-load { max-width: 640px; margin: 32px auto; text-align: center; font-size: 17px; }
/* LCCD: online tickets not open yet — the buttons stay, greyed out (lccd.json › next.ticketsOpen) */
.lcx-btn.is-off { opacity: .45; filter: grayscale(.6); cursor: default; pointer-events: none; box-shadow: none; }
/* LCCD header: 登入 (the committee's back office) */
.lccd-login { text-decoration: none; font-weight: 600; white-space: nowrap; }
/* LCCD sponsorship, as on the poster: the four packages, then Other Sponsorship Options (lccd-tiers.js) */
.lcx-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 8px; border: 1px solid #ecdcc4; border-radius: 12px; background: #fff; }
.lcx-cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 680px; font-size: 15px; line-height: 1.45; }
.lcx-cmp th, .lcx-cmp td { padding: 10px 12px; border-bottom: 1px solid #f1e6d3; text-align: left; vertical-align: top; }
.lcx-cmp tbody tr:last-child th, .lcx-cmp tbody tr:last-child td { border-bottom: 0; }
.lcx-cmp-k { position: sticky; left: 0; z-index: 1; width: 128px; min-width: 112px; background: #fbf6ec; color: var(--lcx-gold-ink); font-weight: 700; font-size: 14px; border-right: 1px solid #ecdcc4; }
.lcx-cmp thead th { background: #fffaf2; border-bottom: 2px solid var(--lcx-red); vertical-align: bottom; }
.lcx-cmp thead .lcx-cmp-k { background: #fbf6ec; }
.lcx-cmp-lv { min-width: 136px; }
.lcx-cmp-lv .lcx-pkg-name, .lcx-cmp-lv .lcx-tier-price { display: block; }
.lcx-pkg-name { font-family: "Noto Serif TC", serif; font-size: 19px; font-weight: 700; color: var(--lcx-red); }
.lcx-cmp-lv .lcx-tier-price { margin: 2px 0 8px; font-size: 22px; }
.lcx-cmp-lv.is-full { opacity: .6; }
.lcx-cmp-go { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--lcx-red); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lcx-cmp-go:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.lcx-cmp-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lcx-cmp-pick input { width: 18px; height: 18px; accent-color: var(--lcx-red); }
.lcx-cmp-no { color: #c9b89a; }
.lcx-cmp-hint { display: none; font-weight: 500; font-size: 13px; color: var(--text-2); }
@media (max-width: 760px) { .lcx-cmp-hint { display: inline; } }
.lcx-opts-h { margin: 22px 0 8px; font-size: 18px; }
.lcx-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 8px; }
.lcx-opt { text-align: center; }
.lcx-opt-name { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.lcx-cmp-lv:has(input:checked) { background: #fdecea; box-shadow: inset 0 3px 0 var(--lcx-red); }
@media (max-width: 520px) { .lcx-cmp-k { width: 96px; min-width: 92px; font-size: 13px; padding: 10px 8px; } .lcx-cmp { font-size: 14px; min-width: 620px; } .lcx-cmp th, .lcx-cmp td { padding: 9px 10px; } }

/* 事工: the four doors, each in its own ministry's colour */
.mh-cong-zh { --c: var(--c-zh); }
.mh-cong-en { --c: var(--c-en); }
.mh-cong-children { --c: var(--c-kids); }
.mh-cong-special { --c: var(--c-special); }
.mh-cong { border-top: 4px solid var(--c, #6e1f1c); background: #fff; }
.mh-cong:hover { border-color: #d9c9ad; border-top-color: var(--c, #6e1f1c); box-shadow: 0 10px 26px rgba(35, 26, 16, 0.08); }
.mh-kicker, .mh-go { color: var(--c, #6e1f1c); }
.mh-times li { background: color-mix(in srgb, var(--c, #6e1f1c) 5%, #faf6ef); border-left: 2px solid var(--c, #6e1f1c); border-radius: 4px 9px 9px 4px; }
.mh-band { padding: 44px 22px; background: #4a1715; color: #f6ece0; text-align: center; }
.mh-band-k { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(24px, 3vw, 30px); font-weight: 700; color: #f6ece0; }
.mh-band-t { margin: 0 0 18px; font-size: 18px; color: #e3cfc0; }
.mh-band-btn { display: inline-block; padding: 10px 26px; border-radius: 999px; border: 1px solid #d9b98a; color: #f6ece0; font-weight: 600; }
.mh-band-btn:hover { text-decoration: none; background: rgba(255, 255, 255, 0.08); color: #fff; }

/* 主日學: 華語 wine, 英文 navy, 兒童 forest; each ministry's classes on a faint panel, each card with its edge;
   the generated covers in the same deep tones (no pinks or purples) */
.m-zh { --mc: var(--c-zh); --mc-soft: #f6efea; }
.m-en { --mc: var(--c-en); --mc-soft: #eef1f4; }
.m-kids { --mc: var(--c-kids); --mc-soft: #eff2ec; }
.ssc-wrap .ssc-block { padding: 22px 22px 26px; border-radius: 14px; background: var(--mc-soft); }
.ssc-wrap .ssc-block .ssc-head { border-bottom-color: rgba(0, 0, 0, 0.08); }
.ssc-wrap .ssc-block .ssc-card { border-top: 3px solid var(--mc); }
.ssc-wrap .ssc-upcoming { background: #fff; border: 1px solid var(--rule); }
.ssc-tone-0 { background: #243b57; } .ssc-tone-1 { background: #6e4a22; } .ssc-tone-2 { background: #3f5a3c; }
.ssc-tone-3 { background: #5b3a3a; } .ssc-tone-4 { background: #3f5550; } .ssc-tone-5 { background: #6e1f1c; }
.ssc-gen::after { background: none; }
.ssc-mark { color: rgba(255, 248, 236, 0.9); text-shadow: none; }
@media (max-width: 640px) { .ssc-wrap .ssc-block { padding: 16px 12px 18px; margin-left: -4px; margin-right: -4px; } }

/* 建議加照片 — seen only by the website administrators */
.photo-note { max-width: 980px; margin: 14px auto; padding: 10px 14px; border: 1px dashed #b3261e; border-radius: 10px; background: #fff7f5; color: #5a1a14; font-size: 16px; }
.photo-note b { display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 13px; }
@media (max-width: 1020px) { .photo-note { margin-left: 16px; margin-right: 16px; } }

/* ==========================================================================================================
   Look v2 (the user, 11/2026: "colour, but in harmony; taste, not AI; think apple.com on a phone"), tried on
   事工 and 主日學 first (front matter look: v2 → <body class="v2">). The rules:
   - Colour as calm surfaces, never as lines: each ministry is a filled tile of its own soft colour, its words in
     the deep shade of the same colour. Four colours of one lightness and softness, so they sit together:
     brick (中文), slate blue (English), sage (兒童), ochre (特別).
   - Hierarchy by type alone: a big headline, one grey line under it, a link with ›. No eyebrows, gold rules,
     borders, shadows or numbers. White and a warm light grey alternate as whole-width sections.
   ========================================================================================================== */
.v2 { --v-ink: #1d1d1f; --v-grey: #6e6e73; --v-surface: #f5f4f1;
  --v-zh: #8c3a2e; --v-zh-bg: #f4e9e5; --v-en: #2f5476; --v-en-bg: #e7edf3; --v-kids: #46683f; --v-kids-bg: #e8efe4; --v-sp: #86652e; --v-sp-bg: #f3ecdf;
  background: #fff; }
.v2 main, .v2 .ab-section, .v2 .mz-sec { background: transparent; }
/* the header: white, big type, one grey line */
.v2 .ab-hero { background: #fff; border: 0; padding: 56px 22px 28px; }
.v2 .ab-eyebrow:not(:has(a)), .v2 .ab-rule { display: none; }
.v2 .ab-eyebrow a { color: var(--v-grey); letter-spacing: 0; font-size: 16px; }
.v2 .ab-title { font-size: clamp(34px, 7vw, 56px); font-weight: 700; line-height: 1.15; letter-spacing: 0; color: var(--v-ink); }
.v2 .ab-sub { max-width: 640px; margin: 14px auto 0; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.55; color: var(--v-grey); }
.v2 .mz-h { font-size: clamp(28px, 5vw, 40px); font-weight: 700; color: var(--v-ink); margin-bottom: 22px; }

/* every page: the page's colour (its ministry's, else the church's brick) for small labels, the current tab and,
   on a ministry's pages, the soft fill of its cards; elsewhere cards are warm grey */
.v2 { --acc: var(--m, #8c3a2e); --acc-bg: var(--v-surface); --amber: #86652e; }
.v2[class*="mc-"] { --acc-bg: color-mix(in srgb, var(--acc) 9%, #fff); }
/* headers: white, big type, no gold */
.v2 :is(.mp-hero, .pt-hero, .en-hero) { background: #fff; border: 0; }
.v2 .mz-hero { background: #fff; box-shadow: 0 0 0 100vmax #fff; }
.v2 :is(.mz-eyebrow, .en-eyebrow, .mp-hero .kicker, .mp-hero .kicker a, .pt-hero .kicker, .pt-hero .kicker a) { color: var(--acc); letter-spacing: 0; font-size: 15px; font-weight: 600; text-transform: none; }
.v2 :is(.mz-title, .en-title, .mp-hero .headline, .pt-hero .headline) { color: var(--v-ink); font-weight: 700; letter-spacing: 0; }
.v2 :is(.za-tag, .en-tag) { color: var(--v-grey); font-family: var(--font); font-weight: 400; }
.v2 :is(.mz-verse, .ph-verse, .zm-verse p, .en-verse p) { font-family: var(--serif); color: #3a3a3c; }
.v2 :is(.mz-verse > small, .ph-verse cite, .zm-verse cite, .en-verse cite) { color: var(--v-grey); }
.v2 :is(.en-verse, .zm-verse) { border-left: 0; padding-left: 0; }
.v2 .mz-chips span { border: 0; background: var(--v-surface); }
/* section headings and labels */
.v2 :is(.mz-h, .en-h, .au-h) { color: var(--v-ink); font-weight: 700; letter-spacing: 0; }
.v2 :is(.mz-num, .mz-k, .en-k, .zm-num, .zm-tag, .mx-kicker) { color: var(--acc); letter-spacing: 0; }
.v2 .zm-title { color: var(--v-ink); }
/* sub-menus and jump bars: grey pills, the current one filled in the page's colour */
.v2 :is(.mp-subnav, .ab-subnav, .zs-jump) { background: rgba(255, 255, 255, 0.94); border: 0; }
.v2 :is(.mp-subnav, .ab-subnav, .zs-jump) a { border: 0; background: var(--v-surface); color: var(--v-ink); }
.v2 :is(.mp-subnav, .ab-subnav) a[aria-current="page"], .v2 .zs-jump a.is-here { background: var(--acc); color: #fff; }
/* cards: filled, borderless, round; no shadows, no lifting */
.v2 :is(.mz-areas a, .ds-card, .mz-card, .kreg-steps > li, .en-ask, .vt-service, .pr-card, .rt-card, .wt-choice, .anc, .tile, .cw-facts div) { border: 0; border-radius: 22px; box-shadow: none; background: var(--acc-bg); }
.v2 :is(.mz-areas a, .vt-service, .wt-choice, .anc, .tile):hover { border: 0; box-shadow: none; transform: none; filter: brightness(0.98); }
.v2 .kreg-steps > li::before { color: var(--acc); }
.v2 :is(.zm-times li, .mz-times li, .mh-times li) { border: 0; }
.v2 .zm-times li { background: var(--acc-bg); border-radius: 12px; }
.v2 .news-link { border: 0; border-radius: 18px; background: var(--v-surface); }
.v2 .news-link::after { color: var(--v-grey); }
.v2 .anc-date { background: var(--acc); }
.v2 .anc-meta { color: var(--acc); }
.v2 .mp-list li, .v2 .mx-list li { border-left: 0; padding-left: 0; background: none; }
/* whole-width grey sections where a page has a closing or a second part */
.v2 :is(.mz-closing, .en-own, .en-next, .ss-more) { background: var(--v-surface); border: 0; box-shadow: 0 0 0 100vmax var(--v-surface); clip-path: inset(0 -100vmax); }
.v2 :is(.mz-closing, .en-own, .en-next) :is(.mz-card, .ds-card, .en-ask, .news-link) { background: #fff; }
.v2 .zm-item { border-top-color: #eeece8; }

/* 事工: four filled tiles */
.v2 .mh-sec { padding-top: 8px; }
.v2 .mh-sec .mz-h { display: none; }
.v2 .mh-congs { gap: 14px; }
.v2 .mh-cong { gap: 6px; padding: 30px 28px 26px; border: 0; border-radius: 26px; box-shadow: none; background: var(--bg); }
.v2 .mh-cong:hover { box-shadow: none; transform: none; filter: brightness(0.985); }
.v2 .mh-cong-zh { --fg: var(--v-zh); --bg: var(--v-zh-bg); }
.v2 .mh-cong-en { --fg: var(--v-en); --bg: var(--v-en-bg); }
.v2 .mh-cong-children { --fg: var(--v-kids); --bg: var(--v-kids-bg); }
.v2 .mh-cong-special { --fg: var(--v-sp); --bg: var(--v-sp-bg); }
.v2 .mh-kicker { color: var(--fg); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.v2 .mh-cong-name { color: var(--fg); font-size: clamp(30px, 5vw, 38px); font-weight: 700; }
.v2 .mh-cong-intro { color: #3a3a3c; font-size: 18px; line-height: 1.6; }
.v2 .mh-times { gap: 0; margin-top: 10px; }
.v2 .mh-times li { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 7px 0; border: 0; border-radius: 0; background: none; }
.v2 .mh-times li + li { border-top: 1px solid rgba(0, 0, 0, 0.06); }
.v2 .mh-times span { order: 2; color: var(--v-grey); font-size: 16px; }
.v2 .mh-times b { order: 1; min-width: 7.5em; color: var(--v-ink); font-weight: 600; font-size: 16px; }
.v2 .mh-go { color: var(--fg); font-weight: 600; padding-top: 14px; }
/* the closing invitation: a whole-width light grey section, centred */
.v2 .mh-band { margin-top: 48px; padding: 56px 22px 60px; background: var(--v-surface); color: var(--v-ink); }
.v2 .mh-band-k { color: var(--v-ink); font-size: clamp(30px, 6vw, 44px); }
.v2 .mh-band-t { color: var(--v-grey); font-size: 19px; }
.v2 .mh-band-btn { border: 0; background: var(--primary); color: #fff; padding: 12px 28px; font-size: 17px; }
.v2 .mh-band-btn:hover { background: var(--primary-hover); color: #fff; }

/* 主日學: the season and the three doors on white; each ministry a whole-width section of its soft colour,
   white class cards on it without borders; the covers in the deep shades */
.v2 .ssc-wrap { max-width: none; padding: 0 0 48px; }
.v2 .ssc-intro { max-width: 1080px; margin: 0 auto 40px; padding: 0 22px; }
.v2 .ssc-season-card { background: var(--v-surface); color: var(--v-ink); box-shadow: none; border-radius: 26px; }
.v2 .ssc-season-name { letter-spacing: 0; }
.v2 :is(.ssc-season-dates, .ssc-season-week) { color: var(--v-grey); }
.v2 .ssc-season-bar { background: rgba(0, 0, 0, 0.08); }
.v2 .ssc-season-bar i { background: var(--v-ink); }
.v2 .ssc-min { border: 0; border-radius: 22px; box-shadow: none; background: var(--mc-soft); }
.v2 .ssc-min:hover { transform: none; box-shadow: none; filter: brightness(0.985); }
.v2 .ssc-min-name { color: var(--mc); }
.v2 .m-zh { --mc: var(--v-zh); --mc-soft: var(--v-zh-bg); }
.v2 .m-en { --mc: var(--v-en); --mc-soft: var(--v-en-bg); }
.v2 .m-kids { --mc: var(--v-kids); --mc-soft: var(--v-kids-bg); }
.v2 .ssc-wrap .ssc-block { margin: 0; padding: 48px max(22px, calc((100% - 1036px) / 2)) 52px; border-radius: 0; background: var(--mc-soft); }
.v2 .ssc-wrap .ssc-block .ssc-head { border: 0; padding: 0; margin-bottom: 22px; }
.v2 .ssc-head h2 { color: var(--mc); font-size: clamp(28px, 5vw, 40px); }
.v2 .ssc-head h2::before { content: none; }
.v2 .ssc-head p { color: var(--v-grey); }
.v2 .ssc-wrap .ssc-block .ssc-card { border: 0; border-radius: 20px; box-shadow: none; }
.v2 .ssc-card:hover { transform: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.v2 .ssc-name { color: var(--v-ink); }
.v2 .ssc-room, .v2 .ssc-next { background: var(--v-surface); }
.v2 .ssc-next b { color: var(--mc); }
.v2 .ssc-tone-0 { background: var(--v-en); } .v2 .ssc-tone-1 { background: var(--v-sp); } .v2 .ssc-tone-2 { background: var(--v-kids); }
.v2 .ssc-tone-3 { background: var(--v-zh); } .v2 .ssc-tone-4 { background: #4d5a6a; } .v2 .ssc-tone-5 { background: #6b4a3a; }
.v2 .ssc-wrap .ssc-upcoming { margin: 0; padding: 48px max(22px, calc((100% - 1036px) / 2)); border: 0; border-radius: 0; background: #fff; }
.v2 .ssc-all { margin-top: 28px; }
.v2 .ss-more { background: var(--v-surface); padding: 48px 0; }
.v2 .news-link { border: 0; border-radius: 18px; background: #fff; }
.v2 .news-link::after { color: var(--v-grey); }
.v2 .photo-note { margin-top: 0; }
@media (max-width: 640px) {
  .v2 .ab-hero { padding: 36px 20px 20px; }
  .v2 .mh-cong { padding: 26px 22px 22px; border-radius: 22px; }
  .v2 .ssc-intro { padding: 0 16px; }
  .v2 .ssc-wrap .ssc-block { padding: 36px 16px 40px; }
}
/* inside a ministry's section every cover is that ministry's colour (two shades), so nothing clashes */
.v2 .ssc-block .ssc-gen { background: var(--mc); }
.v2 .ssc-block .ssc-card:nth-child(even) .ssc-gen { background: color-mix(in srgb, var(--mc) 78%, #1d1d1f); }
.v2 .ssc-empty { border: 0; border-radius: 20px; background: #fff; color: var(--v-grey); }

/* 週報 in look v2: each part of the bulletin a whole-width section, the column stays 780px. Colour by meaning,
   from the same four soft shades: the verse dark (like Apple's black sections), 聚會程序 and 更多資訊 grey,
   代禱 sage, 宣教代禱 slate blue, 小組 ochre; the rest white. Headings plain and big, no bars. */
.v2 .bl-hero { padding-bottom: 20px; }
.v2 .bl-hero .ab-eyebrow { display: block; margin-bottom: 10px; letter-spacing: 0; font-size: 16px; }
.v2 .bl-hero .ab-eyebrow a { color: var(--v-grey); }
.v2 .bl-hero-date { margin: 8px 0 0; font-size: 19px; color: var(--v-grey); }
.v2 .bl-reader-paper { padding-top: 0; }
.v2 .bl-jump { position: sticky; top: 60px; z-index: 5; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 10px 0 12px; border: 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.94); clip-path: inset(0 -100vmax); }
.v2 .bl-jump::-webkit-scrollbar { display: none; }
.v2 .bl-jump a { border: 0; background: var(--v-surface); color: var(--v-ink); font-size: 15px; padding: 7px 14px; }
.v2 .bl-jump a:hover { background: #ebe9e4; color: var(--v-ink); }
.v2 .bl { margin-top: 0; color: var(--v-ink); }
.v2 .bl-vol { margin: 18px 0 0; color: var(--v-grey); letter-spacing: 0; }
.v2 .bl > .bl-block { --band: #fff; --hd: var(--v-ink); margin: 0; padding: 44px 0 40px; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.v2 .bl-h { font-size: clamp(26px, 5vw, 32px); color: var(--hd); margin-bottom: 18px; }
.v2 .bl-h::before { content: none; }
/* the verse: dark, big, quiet */
.v2 .bl > .bl-verse { --band: #1f2933; --hd: #c9cdd2; padding: 52px 0 50px; }
.v2 .bl-verse .bl-h { font-size: 16px; font-family: var(--font); font-weight: 600; color: #9aa3ad; }
.v2 .bl-verse blockquote { padding: 0; border: 0; background: none; color: #f5f5f7; font-size: clamp(24px, 4.6vw, 30px); line-height: 1.7; }
.v2 .bl-verse cite { margin-top: 18px; text-align: left; color: #9aa3ad; font-size: 17px; }
.v2 .bl-title { font-size: clamp(24px, 4.4vw, 28px); color: var(--v-ink); }
.v2 .bl-meta dt, .v2 .bl-sub { color: var(--v-grey); }
/* 聚會程序: grey section, the order on one white card */
.v2 .bl > .bl-order, .v2 .bl > .bl-more { --band: var(--v-surface); }
.v2 .bl-order .bl-table { border: 0; border-radius: 20px; background: #fff; }
.v2 .bl-table th, .v2 .bl-table td { border-bottom-color: #eeece8; padding: 13px 16px; }
.v2 .bl-table th { color: var(--v-grey); }
.v2 .bl-songs a { border-bottom: 0; color: var(--v-ink); }
.v2 .bl-songs a:hover { color: var(--v-zh); }
.v2 .bl-play { width: 20px; height: 20px; background: var(--v-zh); font-size: 10px; }
/* 家訊: white, the numbers in brick */
.v2 .bl-list li::marker { color: var(--v-zh); }
.v2 .bl-list li { margin-bottom: 16px; }
/* 代禱 sage, 宣教代禱 slate blue, 小組 ochre */
.v2 .bl > .bl-prayer { --band: var(--v-kids-bg); --hd: var(--v-kids); }
.v2 .bl-prayer .bl-list li::marker { color: var(--v-kids); }
.v2 .bl > .bl-mission { --band: var(--v-sp-bg); --hd: var(--v-sp); border-radius: 0; }
.v2 .bl > .bl-groups { --band: #fff; --hd: var(--v-ink); }
.v2 .bl-groups a { color: var(--v-sp); font-weight: 600; }
/* 更多資訊: white tiles on grey; the fold plain */
.v2 .bl-more .news-link { border: 0; border-radius: 18px; background: #fff; }
.v2 .bl-more .news-link::after { color: var(--v-grey); }
.v2 .bl-fold { margin-top: 16px; border: 0; border-radius: 18px; background: #fff; padding: 14px 18px; }
.v2 .bl-fold .bl-block { margin: 18px 0 0; padding: 0; background: none; box-shadow: none; clip-path: none; }
.v2 .bl-fold .bl-h { font-size: 22px; }
.v2 .bl-serve-list { border: 0; background: var(--v-surface); border-radius: 16px; }
.v2 .bl-serve-list li { border-bottom-color: #e9e6e0; }
@media (max-width: 560px) { .v2 .bl > .bl-block { padding: 36px 0 32px; } .v2 .bl-jump { top: 56px; } }
/* 家訊 and 代禱 without numbers (the user, 11/2026): each item its own paragraph, a hairline between them */
.v2 .bl-list { list-style: none; padding-left: 0; }
.v2 .bl-list li { margin: 0; padding: 16px 0; padding-left: 0; }
.v2 .bl-list li + li { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.v2 .bl-list li:first-child { padding-top: 0; }
.v2 .bl-list li:last-child { padding-bottom: 0; }

/* 週報 "this week" design (the user, 11/2026 — design C): 今天的敬拜 as one list, 接下來 as dated items. These hold
   everywhere the renderer is shown (the site, the editor's preview, the archive). */
.bl-today-title { display: block; font-weight: 700; }
.bl-today-by { display: block; margin-top: 2px; font-size: 0.85em; color: var(--text-2); }
.bl-outline { margin-top: 12px; }
.bl-outline > summary { cursor: pointer; font-weight: 600; color: var(--link); }
.bl-outline[open] > summary { margin-bottom: 8px; }
.bl-events { list-style: none; margin: 0; padding: 0; }
.bl-ev { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0 0 18px; }
.bl-ev-date { display: flex; flex-direction: column; align-items: center; padding: 8px 0 9px; border-radius: 14px; line-height: 1.1; background: #f4e9e5; color: #8c3a2e; }
.bl-ev-m1 .bl-ev-date { background: #e7edf3; color: #2f5476; } .bl-ev-m2 .bl-ev-date { background: #e8efe4; color: #46683f; } .bl-ev-m3 .bl-ev-date { background: #f3ecdf; color: #86652e; }
.bl-ev-date small { font-size: 13px; }
.bl-ev-date b { font-size: 26px; font-weight: 700; }
.bl-ev-h { margin: 2px 0 4px; font-size: 1.05em; font-weight: 700; line-height: 1.45; }
.bl-ev-text p { margin: 0 0 6px; }

/* look v2: the verse first and big on white; 今天的敬拜 on white; 接下來 on warm grey; 家訊 white; 代禱 sage, 宣教 slate */
.v2 .bl > .bl-verse { --band: #fff; --hd: var(--v-grey); padding: 36px 0 36px; }
.v2 .bl-verse .bl-h { color: var(--v-grey); font-size: 15px; }
.v2 .bl-verse blockquote { color: var(--v-ink); font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 5.4vw, 36px); line-height: 1.55; }
.v2 .bl-verse cite { color: var(--v-grey); font-family: var(--font); font-weight: 400; }
.v2 .bl > .bl-today { --band: #fff; border-top: 1px solid #eeece8; }
.v2 .bl-today-list { border: 0; background: none; font-size: 17px; }
.v2 .bl-today-list th { width: 5.5em; padding-left: 0; font-size: 15px; font-weight: 400; color: var(--v-grey); }
.v2 .bl-today-list td { padding-right: 0; }
.v2 .bl-today-list tr + tr :is(th, td) { border-top: 1px solid #eeece8; }
.v2 .bl-today-list :is(th, td) { border-bottom: 0; }
.v2 .bl-today-title { font-size: 18px; }
.v2 .bl-today-by { color: var(--v-grey); font-size: 15px; }
.v2 .bl-outline { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--v-surface); }
.v2 .bl-outline > summary { color: var(--v-ink); }
.v2 .bl > .bl-upcoming { --band: var(--v-surface); }
.v2 .bl-ev { gap: 16px; padding: 0 0 22px; font-size: 17px; }
.v2 .bl-ev-text p { color: #55555a; line-height: 1.65; }
.v2 .bl-ev-h { color: var(--v-ink); font-size: 18px; }
.v2 .bl-ev-text a { color: var(--v-en); }
.v2 .bl > .bl-announcements:not(.bl-upcoming) { --band: #fff; }
/* 週報's cover photo and 福音班 */
.bl-cover { margin: 0; }
.bl-cover img { display: block; width: 100%; height: clamp(220px, 42vw, 420px); object-fit: cover; }
@media (min-width: 840px) { .bl-cover { max-width: 1080px; margin: 24px auto 0; padding: 0 22px; } .bl-cover img { border-radius: 24px; } }
.v2 .bl-cover + .bl-hero { padding-top: 28px; }
.v2 .bl > .bl-gospel { --band: var(--v-en-bg); --hd: var(--v-en); }
.v2 .bl-gospel .bl-title { color: var(--v-ink); font-size: clamp(22px, 4.4vw, 26px); }
.v2 .bl-gospel p { color: #3a3a3c; }
/* 證道大綱 as notes: a bold line per main point (its number in the brick colour), the sub-points as one sentence under
   it; the conclusion after a hairline, in the serif */
.bl-notes { font-size: 1em; }
.bl-note { margin: 0 0 16px; line-height: 1.75; }
.bl-note-h { font-family: var(--serif); font-weight: 700; font-size: 1.05em; }
.bl-note-h i { font-style: normal; color: #8c3a2e; margin-right: 8px; }
.bl-note-end { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid #eeece8; font-family: var(--serif); line-height: 1.75; }
.v2 .bl > .bl-outline { --band: #fff; padding-top: 8px; }
.v2 .bl-outline .bl-h { font-size: 20px; color: var(--v-grey); font-family: var(--font); font-weight: 600; }
.v2 .bl-note { font-size: 17px; color: #3a3a3c; }
.v2 .bl-note-h { color: var(--v-ink); font-size: 18px; }
.v2 .bl-note-end { color: var(--v-ink); font-size: 17px; }
.v2 .bl-mission .bl-list li + li { border-top-color: rgba(0, 0, 0, 0.08); }

/* look v2 everywhere: the warm paper and cream tokens become white and the light grey, so the older pages' cream
   sections, cards and headers follow without a rule each */
.v2 { --paper: #fff; --linen: var(--v-surface); --ivory: #fff; --cream: var(--v-surface); --gray: var(--v-surface); --rule: #eeece8; }
.v2 .au-hero.is-paper { background: #fff; }
.v2 .au-hero.is-paper .au-eyebrow { color: var(--acc); letter-spacing: 0; font-weight: 600; }
.v2 .au-hero.is-paper .au-title { color: var(--v-ink); text-shadow: none; }
.v2 .au-hero.is-paper :is(.cl-jump a) { background: var(--v-surface); border: 0; color: var(--v-ink); }
.v2 .gv-h { border-bottom: 0; padding-bottom: 0; color: var(--v-ink); }
.v2 .gv-way { border-bottom-color: #eeece8; }
.v2 :is(.gv-way h3, .vt-service h3) { color: var(--v-ink); }
.v2 .ab-eyebrow { color: var(--v-grey); letter-spacing: 0; font-size: 16px; }
/* 行事曆: each event a soft tile of its ministry's colour, no stripe */
.v2 .cal-ev, .v2 .ag-ev { border-left: 0; border-radius: 14px; background: color-mix(in srgb, var(--m) 9%, #fff); }
.v2 .cal-ev:hover { background: color-mix(in srgb, var(--m) 15%, #fff); }
/* no coloured stripes on the public pages: list rows and cards become soft tiles, quotes plain serif. (Back-office
   status stripes — urgent, reported, pinned — stay: there the colour is a signal.) */
.v2 :is(.pair-strip li, .mp-list li, .mx-list li, .cw-facts div, .sg-list a, .cal-agenda li a, .cl-day li a, .cl-day li .cl-row, .ce-daylist li, .ce-wday li, .yt-list li, .pw .pw-card, .pw .pw-praise, .pr-replies, .ma-terms div, .hi-toc, .gv-addr, .give-address) { border-left: 0; border-radius: 14px; }
.v2 :is(.mp-list li, .mx-list li, .yt-list li, .sg-list a, .cl-day li a, .cal-agenda li a) { background: var(--acc-bg); padding-left: 14px; }
.v2 :is(.give-address, .gv-addr) { background: var(--v-surface); }
.v2 :is(.fb-quote, .pw-r-verse blockquote, .hi2-poem, .bl-reader-verse, .hw-hero-verse) { border-left: 0; padding-left: 0; background: none; font-family: var(--serif); }
.v2 .cal-agenda li .ag-row { border-left: 0; border-radius: 14px; background: color-mix(in srgb, var(--m) 8%, #fff); }
.v2 .cal-agenda li .ag-row:hover { box-shadow: none; background: color-mix(in srgb, var(--m) 14%, #fff); }
.v2 :is(.lx-menu, .lx-manage) { background: var(--v-surface); }
.v2 :is(.lx-grace-card, .lx-manage-in) { border: 0; box-shadow: none; background: #fff; }

/* 受洗 and 教會歷史 in look v2 (the user, 11/2026): the steps and the years as filled tiles, no connecting line */
.v2 .bj-path { counter-reset: bj; gap: 10px; }
.v2 .bj-path::before { content: none; }
.v2 .bj-path li { counter-increment: bj; justify-items: start; text-align: left; padding: 18px 18px 16px; border-radius: 20px; background: var(--v-surface); }
.v2 .bj-path li::before { content: counter(bj); position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1; color: var(--acc); margin-bottom: 6px; }
.v2 .bj-path li.is-done::before { background: none; color: var(--v-grey); }
.v2 .bj-path li.is-now { background: color-mix(in srgb, var(--acc) 10%, #fff); }
.v2 .bj-path li.is-now::before { background: none; box-shadow: none; }
.v2 .bj-path strong { color: var(--v-ink); }
.v2 .bj-path span { color: var(--v-grey); }
@media (max-width: 640px) { .v2 .bj-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2 .bj-path li { padding: 16px 14px 14px; } }
.v2 .au2-years { display: grid; gap: 8px; }
.v2 .au2-years li { border: 0; padding: 14px 16px; border-radius: 16px; background: var(--v-surface); grid-template-columns: 58px 1fr; }
.v2 .au2-years li > span { color: var(--acc); }
.v2 .au2-years li > div span { font: inherit; color: inherit; }
.v2 .au2-years b { color: var(--v-ink); }
.v2 .au2-years small { color: var(--v-grey); }
.v2 .zm-points dt { color: var(--v-ink); }
.v2 .zm-points dd, .v2 .hi2-closing { color: #3a3a3c; }
.v2 .hi2-poem { color: var(--v-ink); }

/* 週報家訊 on an event (the user, 11/2026): the rule said plainly, how it prints */
.sv-bulletin { margin: 18px 0; padding: 18px 20px 16px; border: 0; border-radius: 18px; background: #f5f4f1; }
.sv-bulletin legend { padding: 0; font-family: var(--serif); font-size: 20px; font-weight: 700; }
.sv-bulletin-rule { margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #3a3a3c; font-size: 16px; line-height: 1.6; }
.sv-bulletin-preview { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; }
.sv-bulletin-preview small { display: block; color: #6e6e73; font-size: 14px; margin-bottom: 4px; }
.sv-bulletin-preview p { margin: 0; line-height: 1.7; }
.sv-kind-pick { border: 0; padding: 0; margin: 0 0 12px; }
.sv-kind-pick legend { font-weight: 600; margin-bottom: 4px; }
.nt-ev { align-items: start; }
.nt-ev-body p { margin: 0 0 4px; line-height: 1.6; }
.an-manage-note { padding: 14px 16px; border-radius: 16px; background: #f5f4f1; }
.an-manage-note p { margin: 0 0 10px; line-height: 1.65; }
.an-manage-note .an-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

/* 特別活動 redesigned (the user, 11/2026; look v2): filters, tiles with a date block, the past by year; an event's parts
   as soft panels; 報名 with its QR code; 小組分工 as a plain table */
.sv-filters { display: grid; gap: 8px; margin: 0 0 18px; }
.sv-chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv-chip { padding: 7px 14px; border: 0; border-radius: 999px; background: #f5f4f1; color: #1d1d1f; font: inherit; font-size: 15px; cursor: pointer; }
.sv-chip[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.sv-year select { padding: 7px 12px; border: 0; border-radius: 999px; background: #f5f4f1; font: inherit; font-size: 15px; min-height: 0; }
.sv-sec { margin: 22px 0 10px; font-size: 17px; font-weight: 600; color: #6e6e73; font-family: var(--font); }
.sv-egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.sv-ecard { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: #f5f4f1; color: #1d1d1f; }
.sv-ecard:hover { text-decoration: none; filter: brightness(0.98); }
.sv-date { display: flex; flex-direction: column; align-items: center; padding: 7px 0 8px; border-radius: 14px; line-height: 1.1; background: #fff; }
.sv-date small { font-size: 12px; } .sv-date b { font-size: 24px; }
.sv-ecard-in { display: grid; gap: 2px; min-width: 0; }
.sv-ecard-in > b { font-size: 17px; line-height: 1.4; }
.sv-ecard-in > small { color: #6e6e73; font-size: 14px; }
.sv-ecard-pic { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.sv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.sv-tag { padding: 2px 9px; border-radius: 999px; background: #fff; font-size: 12.5px; color: #3a3a3c; }
.sv-yr { margin: 0 0 8px; border-radius: 18px; background: #f5f4f1; padding: 4px 16px; }
.sv-yr > summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.sv-yr > summary small { color: #6e6e73; font-weight: 400; margin-left: 6px; }
.sv-yr ul { list-style: none; margin: 0 0 8px; padding: 0; }
.sv-yr li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #e8e5df; color: #1d1d1f; }
.sv-yr li a span { color: #6e6e73; font-size: 14px; white-space: nowrap; }
.sv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; margin: 0 0 16px; }
.sv-head .sv-kind { color: #8c3a2e; font-weight: 600; font-size: 15px; }
.sv-head .sv-kind.is-pastoral { color: #2f5476; }
.sv-head .sv-title { font-size: clamp(26px, 5vw, 36px); line-height: 1.3; }
.sv-head .sv-when { color: #6e6e73; margin: 4px 0 0; }
.sv-verse { margin: 12px 0 0; font-family: var(--serif); color: #3a3a3c; line-height: 1.7; }
.sv-verse small { display: block; font-family: var(--font); color: #6e6e73; font-size: 14px; }
.sv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.sv-head-pic { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.sv-blk { margin: 0 0 12px; padding: 16px 18px; border-radius: 20px; background: #f5f4f1; }
.sv-blk > h3 { margin: 0 0 10px; font-size: 17px; font-family: var(--font); font-weight: 600; }
.sv-blk .sv-about p { margin: 0 0 8px; line-height: 1.75; }
.sv-blk .sv-plan { border: 0; }
.sv-blk .sv-roles { border: 0; }
.sv-qrrow { display: flex; gap: 16px; align-items: center; }
.sv-qr { flex: none; width: 112px; height: 112px; padding: 8px; border-radius: 12px; background: #fff; }
.sv-qr svg { display: block; width: 100%; height: 100%; }
.sv-qrrow p { margin: 0; line-height: 1.7; }
.sv-tasks { width: 100%; border-collapse: collapse; }
.sv-tasks td { padding: 9px 0; border-top: 1px solid #e8e5df; vertical-align: top; }
.sv-tasks tr:first-child td { border-top: 0; }
.sv-tasks td:last-child { text-align: right; color: #46683f; font-weight: 600; padding-left: 12px; }
.sv-tasks small { display: block; color: #6e6e73; font-weight: 400; }
.sv-none { color: #8c3a2e; }
.sv-task input[data-k="item"] { flex: 2 1 180px; } .sv-task input[data-k="groups"] { flex: 1 1 140px; }
@media (max-width: 640px) { .sv-head { grid-template-columns: minmax(0, 1fr); } .sv-head-pic { width: 88px; height: 88px; grid-row: 1; } .sv-qr { width: 96px; height: 96px; } }
.sv-blk .sv-plan li { display: grid; grid-template-columns: minmax(7em, auto) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid #e8e5df; border-bottom: 0; }
.sv-blk .sv-plan li:first-child { border-top: 0; }
.sv-blk .sv-plan li > b { color: #1d1d1f; font-weight: 600; white-space: nowrap; }

/* 聚會人數 / 填人數: the rows in tabs (主日學, 兒童主日學, 敬拜, 其他) — filled chips, look v2 (the user, 11/2026) */
.hc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
/* 聚會人數 and its link: one page, a filled section under each heading */
.hc-sec { margin: 10px 0; padding: 6px 16px 8px; border-radius: 14px; background: #f5f4f1; }
.hc-sec .hc-sec-h { margin: 8px 0 4px; padding: 0; border: 0; font: 700 22px/1.4 var(--serif); color: #8c3a2e; }
.hc-sec .hc-row, .hc-sec .cnt-row { border: 0; }
.hc-sec .hc-item b, .hc-sec .cnt-row > b { font-size: 16px; }
.hc-tabs button { padding: 7px 14px; border: 0; border-radius: 999px; background: #f5f4f1; color: #1d1d1f; font: inherit; font-size: 15px; cursor: pointer; }
.hc-tabs button[aria-selected="true"] { background: #1d1d1f; color: #fff; }

/* 特別活動, second pass (the user, 11/2026: 整體布局的美觀和易用) — look v2. The list: one bar (a segmented control for
   the kind, two small menus, 活動設定), a big ＋ tile, each event's tile with 編輯／複製／刪除; the editor in tabs. */
.svx-page, .svx-editor { padding-top: 26px; }
.svx-status:empty { display: none; }
.an-page-hero[hidden] { display: none; }
.svx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 8px; }
/* 特別活動's year tabs: 即將舉行, then each year — big type, the chosen one filled; they scroll sideways on a phone */
.svx-years { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.svx-years::-webkit-scrollbar { display: none; }
.svx-years button { flex: none; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: #6e6e73; font: 600 18px/1.3 var(--font); cursor: pointer; }
.svx-years button[aria-selected="true"] { background: #1d1d1f0d; color: #1d1d1f; }
.svx-tile.is-past { opacity: .72; }
.svx-tile.is-past:hover { opacity: 1; }
.svx-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #f5f4f1; }
.svx-seg button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: #424245; font: inherit; font-size: 15px; cursor: pointer; }
.svx-seg button[aria-pressed="true"] { background: #fff; color: #1d1d1f; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.svx-menus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svx-menu select { appearance: none; -webkit-appearance: none; min-height: 0; padding: 8px 32px 8px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; color: #1d1d1f; cursor: pointer;
  background: #f5f4f1 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='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
.svx-menu.is-on select { background-color: #1d1d1f; color: #fff; background-image: 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='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.svx-gear { padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: #6e6e73; font: inherit; font-size: 15px; cursor: pointer; }
.svx-gear::before { content: "⚙"; margin-right: 5px; }
.svx-gear:hover { background: #f5f4f1; color: #1d1d1f; }
.svx-sec { margin: 26px 0 12px; font: 700 21px/1.3 var(--font); color: #1d1d1f; }
.svx-sec small { margin-left: 4px; color: #86868b; font-weight: 400; font-size: 17px; }
.svx-empty { margin: 4px 0 0; color: #6e6e73; }
.svx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
/* a tile: the day on top, the name, when and where, tags; its own buttons at the foot */
.svx-tile { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #f5f4f1; color: #1d1d1f; overflow: hidden; }
.svx-tile-main { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; color: inherit; text-decoration: none; }
.svx-tile-main:hover { text-decoration: none; }
.svx-tile:hover { background: #efeeea; }
.svx-tile-top { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13.5px; }
.svx-day { color: #86652e; font-weight: 700; }
.svx-tile.is-pastoral .svx-day { color: #2f5476; }
.svx-type { color: #6e6e73; }
.svx-name { margin: 2px 0 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.svx-tile:has(.svx-pic) .svx-tile-top, .svx-tile:has(.svx-pic) .svx-name { padding-right: 62px; }
.svx-where { color: #424245; font-size: 15px; line-height: 1.5; }
.svx-pic { position: absolute; top: 16px; right: 16px; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.svx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.svx-tag { padding: 3px 10px; border-radius: 999px; background: #fff; color: #424245; font-size: 13px; }
.svx-tag.is-draft { background: #1d1d1f; color: #fff; }
.svx-tile.is-draft { background: #fbfbfa; box-shadow: inset 0 0 0 1.5px #e3e1dc; }
.svx-acts { display: flex; gap: 2px; padding: 0 12px 12px; }
.svx-acts button { padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: #424245; font: inherit; font-size: 14px; cursor: pointer; }
.svx-acts button:hover { background: #fff; color: #1d1d1f; }
.svx-acts .is-del { margin-left: auto; color: #8c3a2e; }
/* ＋ 新增活動: the first tile */
.svx-add { align-items: center; justify-content: center; gap: 6px; min-height: 168px; padding: 20px; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px #e3e1dc; font: inherit; cursor: pointer; }
.svx-add:hover { background: #f5f4f1; box-shadow: none; }
.svx-plus { position: relative; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; background: #1d1d1f; }
.svx-plus::before, .svx-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px; margin: -1.25px 0 0 -11px; border-radius: 2px; background: #fff; }
.svx-plus::after { transform: rotate(90deg); }
.svx-add b { font-size: 17px; }
.svx-add small { color: #6e6e73; font-size: 14px; }
/* 過去的活動 */
.svx-copy { flex: none; padding: 5px 10px; border: 0; border-radius: 10px; background: #fff; color: #424245; font: inherit; font-size: 13.5px; cursor: pointer; }
/* 活動設定 */
.svx-h2 { margin: 0 0 6px; font: 700 clamp(26px, 4vw, 32px)/1.3 var(--serif); color: #1d1d1f; }
.svx-h3 { margin: 0 0 8px; font: 700 18px/1.4 var(--font); color: #1d1d1f; }
.svx-settings .svx-panel { margin: 14px 0; padding: 18px 20px; border-radius: 20px; background: #f5f4f1; }
.svx-settings[hidden], .svx-page [data-sv-main][hidden] { display: none; }
.svx-settings .sv-type-list li { border-bottom: 0; box-shadow: 0 1px 0 #e8e6e1; }
/* the editor: tabs under the site bar, one pane at a time, 儲存 always at hand */
.svx-kindnote { margin: 0 0 4px; color: #6e6e73; font-size: 15px; }
.svx-tabs { position: sticky; top: 64px; z-index: 6; display: flex; gap: 4px; margin: 14px -4px 18px; padding: 8px 4px; overflow-x: auto; scrollbar-width: none; background: #fff; }
.svx-tabs::-webkit-scrollbar { display: none; }
.svx-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 0; border-radius: 999px; background: #f5f4f1; color: #424245; font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.svx-tabs button[aria-selected="true"] { background: #1d1d1f; color: #fff; font-weight: 600; }
.svx-count:empty { display: none; }
.svx-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: #1d1d1f; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.svx-tabs button[aria-selected="true"] .svx-count { background: rgba(255, 255, 255, .22); color: #fff; }
.svx-pane[hidden] { display: none; }
.svx-form:not([data-tab="look"]) [data-sv-preview] { display: none; }
.svx-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .svx-form select, .svx-form textarea { border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; }
.svx-form input:focus, .svx-form select:focus, .svx-form textarea:focus { border-color: #1d1d1f; outline: 0; box-shadow: 0 0 0 3px rgba(29, 29, 31, .08); }
.svx-pane { min-height: 46vh; }
.svx-help { margin: 0 0 14px; color: #6e6e73; font-size: 15px; line-height: 1.65; }
.svx-form .sv-bulletin { margin: 0 0 14px; }
.svx-form .sv-bulletin > label { display: grid; gap: 4px; margin-bottom: 10px; }
.svx-wide { display: grid; gap: 4px; margin: 4px 0 14px; }
.svx-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.svx-kind legend { margin-bottom: 8px; font-weight: 600; }
.svx-kind label { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #f5f4f1; cursor: pointer; font-weight: 400; }
.svx-kind label:has(input:checked) { background: #1d1d1f; color: #fff; }
.svx-kind label:has(input:checked) small { color: rgba(255, 255, 255, .75); }
.svx-kind input { flex: none; width: auto !important; min-height: 0; margin: 4px 0 0; padding: 0; accent-color: #fff; } /* the form's inputs are full width; a radio here isn't (it pushed the words out of the card) */
.svx-kind label > span { flex: 1; min-width: 0; }
.svx-kind b { display: block; font-size: 16px; } .svx-kind small { display: block; margin-top: 2px; color: #6e6e73; font-size: 13.5px; line-height: 1.5; }
.svx-switch { display: flex !important; gap: 10px; align-items: flex-start; margin: 6px 0 0; padding: 14px 16px; border-radius: 16px; background: #f5f4f1; font-weight: 400 !important; cursor: pointer; }
.svx-switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: #1d1d1f; flex: none; }
.svx-switch b { display: block; color: #1d1d1f; } .svx-switch small { display: block; color: #6e6e73; font-size: 14px; line-height: 1.5; }
.svx-form .sv-row { padding: 12px; border-radius: 14px; background: #f5f4f1; margin: 0 0 8px; }
.svx-form .sv-row input, .svx-form .sv-row select, .svx-form .sv-row textarea { border-color: #e3e1dc; background: #fff; }
/* each row a small card with its fields in order: 招募 (job, how many, unit, arrive by, ✕ / groups / what it involves),
   小組分工 (item, groups, ✕ / note), 流程 (date, time, ✕ / what / in English, who) */
.svx-form .sv-row[data-sv-r], .svx-form .sv-row[data-sv-t], .svx-form .sv-row[data-sv-s] { display: grid; gap: 8px; align-items: center; }
.svx-form .sv-row [data-sv-del-row] { grid-area: del; justify-self: end; width: 32px; height: 32px; border-radius: 50%; color: #8c3a2e; }
.svx-form .sv-row [data-sv-del-row]:hover { background: #fff; }
.svx-form .sv-row[data-sv-r] { grid-template-columns: minmax(0, 2fr) 88px 76px minmax(0, 1.3fr) 32px; grid-template-areas: "name need unit arrive del" "groups groups groups groups groups" "about about about about about"; }
.svx-form .sv-row[data-sv-r] [data-k="name"] { grid-area: name; font-weight: 600; } .svx-form .sv-row[data-sv-r] [data-k="need"] { grid-area: need; }
.svx-form .sv-row[data-sv-r] [data-k="unit"] { grid-area: unit; } .svx-form .sv-row[data-sv-r] [data-k="arrive"] { grid-area: arrive; }
.svx-form .sv-row[data-sv-r] [data-k="groups"] { grid-area: groups; } .svx-form .sv-row[data-sv-r] [data-k="about"] { grid-area: about; }
.svx-form .sv-row[data-sv-t] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 32px; grid-template-areas: "item groups del" "note note note"; }
.svx-form .sv-row[data-sv-t] [data-k="item"] { grid-area: item; font-weight: 600; } .svx-form .sv-row[data-sv-t] [data-k="groups"] { grid-area: groups; } .svx-form .sv-row[data-sv-t] [data-k="note"] { grid-area: note; }
.svx-form .sv-row[data-sv-s] { grid-template-columns: 170px minmax(0, 1fr) 32px; grid-template-areas: "date time del" "what what what" "whatEn who who"; }
.svx-form .sv-row[data-sv-s] [data-k="date"] { grid-area: date; } .svx-form .sv-row[data-sv-s] [data-k="time"] { grid-area: time; } .svx-form .sv-row[data-sv-s] [data-k="what"] { grid-area: what; font-weight: 600; }
.svx-form .sv-row[data-sv-s] [data-k="whatEn"] { grid-area: whatEn; } .svx-form .sv-row[data-sv-s] [data-k="who"] { grid-area: who; }
.svx-form .sv-row input, .svx-form .sv-row select, .svx-form .sv-row textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 12px; font-size: 15px; }
.svx-form .sv-pics { margin: 6px 0 12px; padding: 14px 16px; border: 0; border-radius: 16px; background: #f5f4f1; }
.svx-form .sv-pics legend { padding: 0; font-weight: 600; }
.svx-form .sv-pics-grid { margin-top: 8px; }
.svx-form .sv-pic img, .svx-form .sv-pic-none { box-shadow: none; }
.svx-form .sv-pickline { margin: 0 0 12px; }
.svx-form .sv-pickline select { padding: 8px 12px; border-radius: 12px; }
.svx-foot { z-index: 6; margin: 22px 0 0; padding: 12px 0; border-top: 0; background: rgba(255, 255, 255, .94); box-shadow: 0 -1px 0 #ecebe7; }
@media (max-width: 640px) {
  .svx-bar { align-items: stretch; }
  .svx-seg { width: 100%; } .svx-seg button { flex: 1; padding: 8px 6px; }
  .svx-menus { width: 100%; } .svx-gear { margin-left: auto; }
  .svx-grid { gap: 10px; }
  .svx-add { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; column-gap: 14px; row-gap: 0; min-height: 0; padding: 16px 20px; text-align: left; }
  .svx-add .svx-plus { width: 40px; height: 40px; margin: 0; } .svx-add .svx-plus::before, .svx-add .svx-plus::after { width: 18px; margin-left: -9px; }
  .svx-add small { flex-basis: 100%; padding-left: 54px; margin-top: -10px; }
  .svx-tabs { top: 56px; }
  .svx-form .sv-row[data-sv-r] { grid-template-columns: minmax(0, 1fr) 72px 64px 32px; grid-template-areas: "name name name del" "need unit arrive arrive" "groups groups groups groups" "about about about about"; }
  .svx-form .sv-row[data-sv-t] { grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "item del" "groups groups" "note note"; }
  .svx-form .sv-row[data-sv-s] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "date time del" "what what what" "whatEn whatEn whatEn" "who who who"; }
}
/* 輪值排班 › 主日接待與飯食 (the user, 11/2026): the share link as a card plain to see, and one round at a time */
.ro-share { margin: 14px 0 18px; padding: 18px 20px; border-radius: 20px; background: #1d1d1f; color: #fff; }
.ro-share[hidden] { display: none; }
.ro-share .ro-link { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
.ro-share .ro-link p { margin: 0; }
.ro-share-text { display: grid; gap: 4px; }
.ro-share-text b { font-size: 18px; }
.ro-share-text span { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6; }
.ro-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ro-share-row input { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 15px; }
.ro-share-copy { flex: none; padding: 11px 22px; border: 0; border-radius: 999px; background: #fff; color: #1d1d1f; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ro-share-copy:hover { background: #f5f4f1; }
.ro-share-more { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 14px; }
.ro-share-more a, .ro-share-more button { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .78); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ro-share-more a:hover, .ro-share-more button:hover { color: #fff; }
.ro-tools.is-rounds [data-ro-move] { display: none; }
.ro-rounds { display: flex; gap: 8px; margin: 6px 0 12px; overflow-x: auto; scrollbar-width: none; }
.ro-rounds::-webkit-scrollbar { display: none; }
.ro-rounds[hidden] { display: none; }
.ro-rounds button { flex: none; display: grid; gap: 2px; padding: 10px 16px; border: 0; border-radius: 16px; background: #f5f4f1; color: #1d1d1f; font: inherit; text-align: left; cursor: pointer; }
.ro-rounds button b { font-size: 16px; }
.ro-rounds button small { color: #6e6e73; font-size: 13px; white-space: nowrap; }
.ro-rounds button[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
.ro-rounds button[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.ro-round.is-check { border: 0; border-radius: 16px; padding: 14px 16px; }
.ro-round.is-check.is-bad { background: #fbf1ee; } .ro-round.is-check.is-ok { background: #eef5ec; }
.ro-twice { margin: 6px 0 0 !important; color: #8c3a2e; font-size: 15px; line-height: 1.7; }
.ro-pastbtn { display: block; width: 100%; margin: 0 0 8px; padding: 10px 14px; border: 0; border-radius: 14px; background: #f5f4f1; color: #424245; font: inherit; font-size: 15px; cursor: pointer; }
.ro-pastbtn:hover { background: #ecebe7; }
/* 接待須知 on the share page (the user, 11/2026: tidy, no emoji, a web page) — a lead, a heading, cards, quiet thanks */
.rsn { display: grid; gap: 4px; }
.rsn[hidden] { display: none; }
.rsn p { margin: 0; line-height: 1.8; }
.rsn ol { margin: 6px 0 0; padding-left: 1.4em; line-height: 1.75; }
.rsn ol li + li { margin-top: 4px; }
.rsn strong { color: #8c3a2e; font-weight: 700; }
.rsn-kicker { color: #6e6e73; font-size: 14px; font-weight: 600; }
.rsn-lead { font-size: 17px; color: #1d1d1f; }
.rsn-lead p + p { margin-top: 8px; }
.rsn-h { margin: 22px 0 8px; font: 700 18px/1.4 var(--font); color: #1d1d1f; }
.rsn-cards { display: grid; gap: 8px; }
.rsn-card { padding: 14px 16px; border-radius: 16px; background: #f5f4f1; font-size: 16px; color: #1d1d1f; }
.rsn-card h4 { margin: 0 0 4px; font-size: 16px; }
.rsn-card ol { margin-top: 4px; }
.rsn-thanks { margin: 18px 0 0 !important; color: #6e6e73; text-align: center; font-size: 15px; }
.rs-notes [data-rs-jobs] .rsn-h { margin-top: 26px; }
.rsn-card.rs-job { padding: 14px 16px; border-top: 0; } .rsn-card.rs-job p { white-space: normal; }
/* 接待須知 on 主日接待與飯食 (moved from 聚會人數, the user 11/2026): folded under the share card */
.ro-wl { margin: -6px 0 18px; border-radius: 18px; background: #f5f4f1; }
.ro-wl[hidden] { display: none; }
.ro-wl > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.ro-wl > summary::-webkit-details-marker { display: none; }
.ro-wl > summary::after { content: "›"; margin-left: auto; color: #6e6e73; transition: transform .2s; }
.ro-wl[open] > summary::after { transform: rotate(90deg); }
.ro-wl > summary b { font-size: 16px; } .ro-wl > summary span { color: #6e6e73; font-size: 14px; }
.ro-wl-in { padding: 0 18px 16px; }
.ro-wl-text { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; line-height: 1.7; }
.ro-wl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
/* 週報的填寫連結 (/fill/<kind>/?k=, the user 11/2026): the part's form for the coming Sunday */
.fil-when { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #f5f4f1; color: #1d1d1f; font-weight: 600; }
.fil-note { margin: 0 0 12px; color: #6e6e73; }
.fil-items { display: grid; gap: 8px; margin: 0 0 8px; }
.fil-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; gap: 6px; align-items: start; }
.fil-item textarea { width: 100%; box-sizing: border-box; }
.fil-n { padding-top: 10px; font-weight: 700; color: #6e6e73; }
.fil-row { display: grid; gap: 6px; margin: 0 0 14px; }
.fil-row textarea, .fil-row input { width: 100%; box-sizing: border-box; }
.wl-card { margin-top: 18px; }
.fil-row textarea, .fil-row input, .fil-item textarea { padding: 10px 12px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; line-height: 1.6; color: #1d1d1f; }
.fil-row > b { font-size: 16px; }
/* 週報怎麼用: the Thursday deadline and the three ways to give one's part (the user, 11/2026) */
.hw-deadline { margin: 0 0 22px; padding: 18px 20px; border-radius: 18px; background: #fbf3e6; color: #424245; }
.hw-deadline p { margin: 0; line-height: 1.7; color: #424245; }
.hw-deadline strong { color: #1d1d1f; }
.hw-deadline .hw-deadline-big { margin: 0 0 4px; font: 700 clamp(22px, 3vw, 26px)/1.3 var(--serif); color: #8c3a2e; }
/* the week, Sunday to Friday: a filled surface a day, who does what */
.hw-flow { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hw-day { padding: 18px 20px; border-radius: 18px; background: #f5f4f1; }
.hw-day-h { margin: 0; font: 700 20px/1.4 var(--serif); color: #1d1d1f; }
.hw-day-n { margin: 2px 0 10px; color: #6e6e73; font-size: 15px; line-height: 1.6; }
.hw-day-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hw-day-list li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 16px; line-height: 1.65; }
.hw-day-list b { color: #1d1d1f; }
.hw-day-list span, .hw-day-list a { color: #424245; }
.hw-day-list a { text-decoration: none; } .hw-day-list a:hover { color: var(--primary); }
@media (max-width: 640px) { .hw-day-list li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 7px 0; } }
/* each part: 首選, 變通辦法, 找同工 — the first one darker */
.hw-ways { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.hw-ways li { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 8px; padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.7; color: #424245; }
.hw-ways b { color: #6e6e73; font-weight: 600; }
.hw-ways li:first-child b { color: var(--primary); font-weight: 700; }
/* 小組認領 (/special/join/?k=, 大掃除, the user 11/2026): the numbered list — a number, the job and its tools, the group */
.sj-task { display: grid !important; grid-template-columns: 22px 32px minmax(0, 1fr); align-items: start; gap: 2px 10px; }
.sj-task > input { width: auto !important; height: auto; margin: 7px 0 0 !important; padding: 0; justify-self: center; }
.sj-task > .sj-task-no { grid-column: 2; grid-row: 1 / span 2; }
.sj-task > .sj-role-in { grid-column: 3; min-width: 0; }
.sj-task > .sj-task-who { grid-column: 3; text-align: left !important; }
.sj-task-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1d1d1f; color: #fff; font-weight: 700; font-size: 14px; }
.sj-task.is-full .sj-task-no { background: #c7c7cc; }
.sj-task-dot { width: 0; }
.sj-task-who { font-size: 14px; font-weight: 700; color: #46683f; text-align: right; white-space: nowrap; }
.sj-task:not(.is-full) .sj-task-who { color: #86868b; font-weight: 400; }
.sj-claim-sum { margin: 0 0 8px; color: #6e6e73; font-size: 14px; }
/* 小組選號: what and when at the top; the confirm at the foot of the screen when a number is tapped */
.sj-brief { max-width: 560px; margin: 12px auto 0; font-size: 17px; line-height: 1.7; color: #424245; }
.sj-confirm { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; max-width: 560px; margin: 0 auto; display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: #fbf3e6; box-shadow: 0 10px 30px rgba(60, 40, 10, .18); }
.sj-confirm[hidden] { display: none; }
.sj-confirm p { margin: 0; font-size: 18px; font-weight: 600; color: #1d1d1f; }
.sj-confirm .sj-confirm-st { font-size: 14px; font-weight: 400; color: #8f2d1f; }
.sj-confirm .sj-confirm-st:empty { display: none; }
.sj-confirm-acts { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.sj-form:has(.sj-confirm:not([hidden])) { margin-bottom: 120px; }
.sv-copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; }
.sj-task input:checked ~ .sj-role-in { border-color: #1d1d1f; box-shadow: 0 0 0 2px #1d1d1f; }
.sj-task input:checked ~ .sj-task-no { background: #8c3a2e; }
.sj-task input:focus-visible ~ .sj-role-in { outline: 2px solid #1d1d1f; outline-offset: 2px; }
/* 小組選號 (the user, 11/2026): the numbers as a grid — a free one to pick, a taken one with its group; 分工結果 a list */
.sj-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sj-num { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #d2d2d7; cursor: pointer; text-align: center; }
.sj-num input { position: absolute; opacity: 0; }
.sj-num b { font-size: 24px; line-height: 1.1; color: #1d1d1f; }
.sj-num small { font-size: 12px; color: #6e6e73; line-height: 1.3; }
.sj-num:has(input:checked) { background: #8c3a2e; box-shadow: none; } .sj-num:has(input:checked) b, .sj-num:has(input:checked) small { color: #fff; }
.has-look .sj-num:has(input:checked) { background: var(--sj-btn); } .has-look .sj-num:has(input:checked) b, .has-look .sj-num:has(input:checked) small { color: var(--sj-btn-ink); } /* the look's own button colour */
.sj-num:has(input:focus-visible) { outline: 2px solid #1d1d1f; outline-offset: 2px; }
.sj-num.is-taken { background: #f5f4f1; box-shadow: none; cursor: default; } .sj-num.is-taken b { color: #aeaeb2; } .sj-num.is-taken small { color: #46683f; font-weight: 600; }
.sj-results[hidden] { display: none; }
.sj-result { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.sj-result li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e3e1dc; }
.sj-result .sj-task-no { grid-row: 1 / span 2; }
.sj-result-in { display: grid; gap: 2px; } .sj-result-in b { font-size: 16px; color: #1d1d1f; } .sj-result-in small { color: #6e6e73; font-size: 14px; }
.sj-result-who { grid-column: 2; font-weight: 700; color: #46683f; } .sj-result-who.is-open { color: #aeaeb2; font-weight: 400; }
/* 小組選號: the group list first, big enough to tap (the user, 11/2026) */
[data-sj-claimgroup] { display: grid; gap: 6px; margin: 4px 0 14px; font-weight: 600; }
[data-sj-claimgroup][hidden] { display: none; }
[data-sj-claimgroup] select { width: 100%; padding: 12px 14px; border: 1px solid #d2d2d7; border-radius: 14px; background: #fff; font: inherit; font-size: 17px; font-weight: 400; color: #1d1d1f; }
/* a part that can't be filled in by a shared link (主日學／福音班, 特別活動 — the user, 11/2026): marked plainly */
.gd-note, .hw-nolink { display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: #f7ecd9; color: #5c3f12; font-size: 15px; line-height: 1.7; }
.gd-note b, .hw-nolink b { color: #86652e; font-size: 14px; }

/* 奉獻 (/portal/offering/): a kind and its amount per line */
.of-rows { display: grid; gap: 8px; margin: 12px 0 4px; }
.of-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.of-row input { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 17px; background: #fff; }
.of-amount { font-variant-numeric: tabular-nums; }
.of-row .of-item[readonly] { background: #f5f4f1; border-color: transparent; font-weight: 600; }
.of-recent { display: flex; flex-wrap: wrap; gap: 6px; }

/* 週報 首頁: the parts with no tile of their own, then under each tile what it lacks — red for what's lacking, green for what's done */
.bwk-top { margin: 0 0 18px; padding: 18px 20px; border-radius: 18px; background: #fbf3e6; }
.bwk-top-h { margin: 0; font: 700 22px/1.3 var(--serif); color: #1d1d1f; }
.bwk-top-sub { margin: 2px 0 12px; color: #6e6e73; font-size: 14px; }
.bwk-facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 16px; color: #424245; }
.bwk-fact b { margin-right: 4px; color: #1d1d1f; }
.bwk-top .is-miss { color: #8f2d1f; font-weight: 600; }
.bwk-note { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; color: #6e6e73; }
.bwk-note.is-miss { color: #8f2d1f; font-weight: 600; }
.bwk-note.is-ok, .bwk-top .is-ok { color: #2e6b3f; font-weight: 600; }
/* 代禱, 宣教, 家訊 unchanged this week: not a problem — a calm blue, not red (the user, 11/2026) */
.bwk-note.is-same, .bwk-top .is-same { color: #2f5d8a; font-weight: 600; }

/* 校對 · 本期 and 歷史週報 (the user, 11/2026) */
.ble-recent .ble-now { display: flex; flex-wrap: wrap; gap: 8px; }
.ble-recent button.is-cur { background: #fbf3e6; }
.ble-cur-tag { display: block; font-size: 12px; letter-spacing: 0.06em; color: #8a5a1f; }
.ble-hist { margin-top: 10px; }
.ble-hist > summary { cursor: pointer; font-weight: 600; color: #424245; padding: 6px 0; }
.ble-hist-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ble-recent { display: block; }
.ble-recent button.is-cur.is-on { border-color: var(--blue); }

/* 事工 page (/ministries/): the home page's ministry block, with a line about each ministry (the user, 11/2026) */
.ms-intro { display: block; max-width: 30em; margin: 8px 0 2px; font-size: 16px; line-height: 1.55; color: inherit; opacity: 0.86; }
.ms-kids-head .ms-intro { margin-top: 6px; }
.mh-sec-split { padding-bottom: 20px; }
/* signed in: 後台 and 登出 (on a phone, 登出 alone — the header is narrow) */
@media (max-width: 480px) { .lccd-admin-link { display: none !important; } }
.lcx-opt-incl { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2, #6b5a4a); }
/* LCCD sponsor form: 聯絡的委員 is whoever added the sponsor — shown, not typed */
.lc-dlg input.lc-ro { width: 100%; box-sizing: border-box; background: #f5f1ea; color: #5b4a3a; border-color: transparent; }

/* 特別活動 模板 (the user, 11/2026): a new event chooses its kind first; the options as cards (.svx-kind) */
.svx-form[data-picking] .svx-tabs, .svx-form[data-picking] .sv-form-body, .svx-form[data-picking] .svx-foot { display: none; }
.svx-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 12px 0 8px; }
.svx-tpl { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border: 0; border-radius: 18px; background: #f5f4f1; color: #1d1d1f; text-align: left; font: inherit; cursor: pointer; }
.svx-tpl:hover, .svx-tpl:focus-visible { background: #1d1d1f; color: #fff; }
.svx-tpl b { font-size: 18px; }
.svx-tpl small { color: inherit; opacity: .7; font-size: 14px; }
.svx-tpl span { margin-top: 6px; font-size: 14px; line-height: 1.5; }
.svx-blbox { margin-top: 4px; padding: 16px 18px; border-radius: 16px; background: #fbf3e2; }
.svx-opt { margin-bottom: 18px; }
.sj-kid { position: relative; margin: 0 0 10px; padding: 10px 12px 2px; border-radius: 14px; background: rgba(0, 0, 0, .035); }
.sj-kid-x { position: absolute; top: 6px; right: 8px; padding: 4px 8px; }

/* 主日學 中文部 in 聚會人數: from 主日學 — amber while classes are coming in, green when all are (the user, 11/2026) */
.hc-ssnum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.hc-ssnum b { font-size: 22px; }
.hc-ssnum small { font-size: 13px; font-weight: 600; }
.hc-ssnum.is-progress, .hc-ssnum.is-progress small { color: #9a5b00; }
.hc-ssnum.is-done, .hc-ssnum.is-done small { color: #2e6b3f; }
.bwk-note.is-progress, .bwk-top .is-progress { color: #9a5b00; font-weight: 600; }
/* LCCD 主辦團體: this year’s host (lccd.json › organizers › host) */
.lcx-host { align-self: flex-start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: #8e1a18; color: #fff; font-size: 12px; font-weight: 600; }
/* LCCD 使用情況: 30 days of visits as small bars */
.lc-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; height: 96px; margin: 8px 0 18px; }
.lc-bar-day { position: relative; display: flex; align-items: flex-end; height: 100%; }
.lc-bar-day i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #8e1a18; }
.lc-bar-day small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-size: 10px; color: #6e6e73; white-space: nowrap; }

/* 敬拜歌曲 (worship-songs.js; the user, 11/2026): each Sunday a card; one Sunday's list as filled song cards */
.ws-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ws-card { display: block; padding: 14px 16px; border-radius: 16px; background: var(--surface-2, #f4f1ea); color: inherit; text-decoration: none; }
.ws-card.is-mine { background: #eaf1e6; }
.ws-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ws-card p { margin: 4px 0; }
.ws-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #ece8df; color: #5d5547; }
.ws-chip.is-draft { background: #fff1d6; color: #8a5a00; }
.ws-chip.is-review { background: #e3ecf8; color: #1d4f86; }
.ws-chip.is-final { background: #e2f0e4; color: #2e6b3f; }
.ws-team { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ws-role small { color: var(--ink-2, #6e6e73); margin-right: 4px; }
.ws-head { padding: 16px 18px; border-radius: 18px; background: var(--surface-2, #f4f1ea); margin: 8px 0 14px; }
.ws-head h2 { margin: 0 0 6px; font-size: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-say { color: var(--ink-2, #6e6e73); font-size: 14px; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-note { display: block; margin: 0 0 12px; } .ws-note textarea { width: 100%; }
.ws-songs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ws-song { padding: 14px 16px; border-radius: 16px; background: #faf8f4; }
.ws-song header { display: flex; align-items: center; gap: 10px; }
.ws-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ece8df; font-weight: 700; }
.ws-title { flex: 1; min-width: 0; }
.ws-song .ws-tools { display: flex; gap: 4px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.ws-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.ws-grid label > span { color: var(--ink-2, #6e6e73); font-size: 13px; }
.ws-grid .ws-wide { grid-column: 1 / -1; }
.ws-files { margin-top: 8px; font-size: 14px; }
.ws-com { margin-top: 8px; }
.ws-thread { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: #f1eee7; }
.ws-c { margin: 0 0 8px; font-size: 14px; }
.ws-ref { display: inline-block; padding: 0 8px; border-radius: 999px; background: #e3ecf8; color: #1d4f86; font-size: 12px; }
.ws-cform { display: grid; gap: 6px; margin-top: 6px; } .ws-cform textarea { width: 100%; }
.ws-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.ws-newform { display: grid; gap: 10px; padding: 16px 18px; margin: 0 0 16px; border-radius: 18px; background: #f3f0e8; }
.ws-newform label { display: grid; gap: 4px; }
.ws-lib { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); padding: 16px 16px 24px; overflow-y: auto; background: #f3f0e8; box-shadow: -12px 0 32px rgba(40, 30, 10, .16); }
.ws-lib[hidden] { display: none; }
.ws-lib header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.ws-lib h3 { margin: 0; font-size: 20px; }
.ws-lib input[type=search] { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 0; background: #fff; }
.ws-lib ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.ws-lib li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; }
.ws-lib li .ss-btn { white-space: nowrap; flex-shrink: 0; }
.ws-lib-on { color: #3d6b3a; font-size: 14px; white-space: nowrap; }
@media (min-width: 1100px) { body.ws-lib-open { padding-right: 380px; } }
.ws-add { margin: 14px 0; } .ws-add input { width: 100%; }
.ws-hits { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.ws-general { margin-top: 18px; }
.ws-log { margin-top: 14px; font-size: 14px; }
.ws-import, .pu-import { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: #f1eee7; overflow-x: auto; }
.ws-imp, .pu-rota { border-collapse: collapse; width: 100%; font-size: 14px; }
.ws-imp th, .ws-imp td, .pu-rota th, .pu-rota td { text-align: left; vertical-align: top; padding: 6px 8px; }
.ws-imp tbody tr:nth-child(odd), .pu-rota tbody tr:nth-child(odd) { background: rgba(0,0,0,.03); }
.pu-rota-wrap { overflow-x: auto; }
.pu-rota tr.is-mine { background: #eaf1e6 !important; }
.pu-plan { margin: 4px 0; font-size: 14px; color: #1d4f86; }
.pu-map { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; } .pu-map label { display: flex; align-items: center; gap: 6px; }
.pu-import-btn { cursor: pointer; }

/* 特別活動 一步步設定 (special-events.js; the user, 11/2026): one question at a time, then a summary to confirm */
.svx-wiz { padding: 16px 18px; border-radius: 18px; background: #f4f1ea; }
.svx-wiz h3 { margin: 4px 0; font-size: 19px; }
.svx-wiz-step { margin: 0; font-size: 13px; font-weight: 600; color: #8a5a00; }
.svx-wiz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.svx-tpl.is-on { background: #e3ecf8; }
.svx-tpl-wiz { background: #fff1d6; }
.svx-wiz-sum { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.svx-wiz-sum li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #fff; }
.svx-wiz-sum span { color: var(--ink-2, #6e6e73); }
.svx-wiz-nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* 事工負責人 (leaders.js; the user, 11/2026) */
.ld-area { margin: 18px 0; } .ld-area h2 { font-size: 19px; margin: 0 0 8px; }
.ld-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ld-pos { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #f4f1ea; }
.ld-who { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ld-who small { color: var(--ink-2, #6e6e73); }

/* 申請成為家人: 已經有帳號就直接登入 (the user, 11/2026) */
.join-have { margin: 0 0 22px; padding: 16px 18px; border-radius: 18px; background: #e3ecf8; }
.join-have h2 { margin: 0 0 6px; font-size: 19px; }
.join-have p { margin: 6px 0; }
/* 敬拜歌曲, 講道計畫 import: the plain boxes look like the dropdowns and note boxes beside them */
.ws-app input:not([type=file]):not([type=checkbox]):not([type=radio]), .pu-import select { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid #ddd3c2; background: #fff; color: inherit; min-height: 44px; box-sizing: border-box; width: 100%; }
.ws-grid label > a, .ws-grid label > span + select + a { font-size: 13px; }
.ws-actions [disabled] { opacity: .45; }
/* 講台輪值 (/portal/preaching/, pulpit.js rota mode): 節期 grey-green, 活動 in six calm fills, the 週報 state as small filled chips — no lines */
.pu-app-rota .pu-rota { font-size: 14px; min-width: 860px; }
.pu-rota tr.pu-month th { background: #f5f4f1; font-weight: 700; padding-top: 12px; color: #5c554b; }
.pu-rota tbody tr.pu-month:nth-child(odd) { background: #f5f4f1; }
.pu-rota tr.is-pick { background: #f6ead2 !important; }
.pu-day { font: inherit; font-weight: 700; background: none; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; cursor: pointer; color: inherit; }
.pu-day:hover, .pu-day:focus-visible { background: #efe6d6; }
.pu-tags { min-width: 110px; }
.pu-hol, .pu-evt { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 999px; font-size: 13px; line-height: 1.5; border: 0; font-family: inherit; }
.pu-hol { background: #e4ece1; color: #33502d; }
.pu-evt-plan { background: #ece9e2; color: #4c463d; }
button.pu-evt { cursor: pointer; }
.pu-ev-c0 { background: #f3e1dc; color: #7a3326; } .pu-ev-c1 { background: #dfe7f0; color: #2a4a69; } .pu-ev-c2 { background: #f1e8d6; color: #6e5321; }
.pu-ev-c3 { background: #e7e0ec; color: #523f63; } .pu-ev-c4 { background: #dceae8; color: #2f5755; } .pu-ev-c5 { background: #efe2e5; color: #6c3f48; }
.pu-theme { max-width: 260px; }
.pu-edit { margin-top: 6px; }
.pu-sermon { text-align: left; font-weight: 600; }
.pu-bl { white-space: nowrap; }
.pu-ok { display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px; border-radius: 999px; font-size: 12.5px; }
.pu-ok.is-ok { background: #e2eedf; color: #2e6b3f; } .pu-ok.is-miss { background: #f6e0da; color: #8f2d1f; font-weight: 600; }
.pu-ok.is-later { background: #f1efeb; color: #8a8378; } .pu-ok.is-progress { background: #f6ead2; color: #9a5b00; }
.pu-events { margin: 12px 0 16px; padding: 14px 16px; border-radius: 16px; background: #f5f4f1; }
.pu-events .mp-h2 { margin-top: 0; }
.pu-ev-list { list-style: none; margin: 0 0 8px; padding: 0; }
.pu-ev-list li { margin: 4px 0; }
.pu-pickbar { margin: 8px 0; }
.pu-ev-dates { display: flex; gap: 12px; flex-wrap: wrap; }
.pu-ev-dates label { flex: 1 1 140px; }
.pu-sv-points { white-space: pre-wrap; font: inherit; background: #f5f4f1; padding: 12px 14px; border-radius: 12px; margin: 8px 0; }
.pu-sv-verse { background: #f1e8d6; padding: 10px 14px; border-radius: 12px; }
.pu-rota td:nth-child(3), .pu-rota td:nth-child(4) { white-space: nowrap; }
.pu-events .mp-h2 { border: 0; padding-bottom: 0; }
.pu-edit { white-space: nowrap; }
.pu-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pu-ev-fs { border: 0; padding: 12px 14px; margin: 8px 0 0; border-radius: 12px; background: #f5f4f1; }
.pu-ev-fs legend { font-weight: 700; padding: 0; float: left; width: 100%; margin-bottom: 6px; }
/* 講台輪值 月／年 (pulpit.js): a quiet bar — ‹ title › 今天 on the left, 月｜年 on the right; the year as twelve filled cards */
.pu-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.pu-nav-step { display: flex; align-items: center; gap: 6px; }
.pu-nav-title { margin: 0 6px; font-size: 1.35rem; min-width: 7.5em; text-align: center; }
.pu-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #efece6; }
.pu-seg button { font: inherit; border: 0; background: none; padding: 6px 18px; border-radius: 999px; cursor: pointer; color: #5c554b; min-height: 36px; }
.pu-seg button[aria-pressed="true"] { background: #fff; color: #1d1d1f; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pu-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pu-ym { padding: 12px 14px; border-radius: 16px; background: #f5f4f1; }
.pu-ym.is-now { background: #f6ead2; }
.pu-ym.is-past { opacity: .72; }
.pu-ym-h { font: inherit; font-weight: 700; font-size: 1.1rem; border: 0; background: none; padding: 2px 0 6px; cursor: pointer; color: inherit; }
.pu-ym-h:hover span, .pu-ym-h:focus-visible span { color: #8c3a2e; }
.pu-ym ul { list-style: none; margin: 0; padding: 0; }
.pu-ym li { display: grid; grid-template-columns: 3.2em 1fr; column-gap: 8px; padding: 5px 0; font-size: 14px; }
.pu-ym li.is-today b { color: #8c3a2e; }
.pu-ym-tags { grid-column: 2; }
.pu-ym-tags .pu-hol, .pu-ym-tags .pu-evt { font-size: 12px; padding: 1px 7px; margin: 3px 4px 0 0; }
.pu-ym-com { color: #6e5321; background: #f1e8d6; padding: 0 6px; border-radius: 999px; font-size: 11.5px; }
@media (max-width: 600px) { .pu-nav-title { font-size: 1.15rem; min-width: 0; } .pu-nav { justify-content: center; } }
.pu-hol, .pu-evt, .pu-rota [data-pu-write] { white-space: nowrap; }
/* 受洗管理 (baptism-admin.js, redesigned 11/13/2026): filled cards, no lines; a status as a soft pill */
.bx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.bx-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-stat { padding: 6px 14px; border-radius: 999px; background: #f5f4f1; color: #5c554b; font-size: 15px; }
.bx-stat b { color: #1d1d1f; font-size: 17px; }
.bx-stat.is-alert { background: #f6ead2; color: #7a4b00; }
.bx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.bx-search { max-width: 320px; flex: 1 1 220px; margin: 0; }
.bx-card { margin: 0 0 14px; padding: 16px 18px; border-radius: 18px; background: #f5f4f1; }
.bx-card.is-past { background: #f1efeb; }
.bx-card-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bx-card-h h3 { margin: 0 0 2px; font-size: 1.2rem; }
.bx-card-h p { margin: 0; }
.bx-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill-sm { padding: 6px 14px; min-height: 36px; font-size: 14px; }
.bx-people { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bx-person { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who pill" "acts acts"; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: #fff; }
@media (min-width: 760px) { .bx-person { grid-template-columns: 1fr auto auto; grid-template-areas: "who pill acts"; } }
.bx-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: inherit; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
span.bx-who { cursor: default; }
.bx-who small { flex-basis: 100%; }
.bx-gap { color: #8f2d1f; font-weight: 600; }
.bx-pill { grid-area: pill; padding: 3px 10px; border-radius: 999px; font-size: 13px; white-space: nowrap; background: #ece9e2; color: #4c463d; }
.bx-pill-applied, .bx-pill-interviewed { background: #f6ead2; color: #7a4b00; }
.bx-pill-scheduled { background: #e2eedf; color: #2e6b3f; }
.bx-pill-baptized { background: #dfe7f0; color: #2a4a69; }
.bx-pill-declined, .bx-pill-withdrawn { background: #f3e1dc; color: #7a3326; }
.bx-pill-old { background: #ece9e2; color: #5c554b; }
.bx-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.bx-batch { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.bx-empty { margin: 10px 0 0; }
.bx-none { padding: 28px 18px; border-radius: 18px; background: #f5f4f1; text-align: center; }
.bx-more { margin-top: 4px; }
.bx-years { margin: 0 0 8px; }
.bx-qs { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.bx-qs legend { font-weight: 700; margin-bottom: 4px; }
.bx-wide { grid-column: 1 / -1; }
.bx-del { color: #8f2d1f; margin-right: auto; }
/* 牧養's own pages (sg-pastoral.js, one view each — 11/13/2026): filled cards, chips, no lines */
.spa-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.spa-intro p { flex: 1 1 360px; margin: 0; }
.spa-search { max-width: 300px; margin: 0; flex: 0 1 260px; }
.spa-empty { padding: 26px 18px; border-radius: 18px; background: #f5f4f1; text-align: center; }
.spa-flag { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: #f6e0da; color: #8f2d1f; font-weight: 600; font-size: 14px; }
.spa-leads, .spa-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0 0 18px; }
.spa-lead, .spa-plan { padding: 14px 16px; border-radius: 16px; background: #f5f4f1; }
.spa-lead.is-none { background: #faf0ec; }
.spa-lead.is-here { box-shadow: 0 0 0 3px #e9c46a; }
.spa-lead header { font-size: 1.05rem; margin-bottom: 6px; }
.spa-lead p { margin: 6px 0 0; }
.spa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spa-chip { padding: 3px 10px; border-radius: 999px; background: #fff; font-size: 14px; }
.spa-plan.is-proposed { background: #f6ead2; }
.spa-plan.is-cancelled { opacity: .7; }
.spa-plan-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 1.02rem; }
.spa-plan-from, .spa-plan-to { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.spa-arrow { color: #8c3a2e; font-weight: 700; }
.spa-plan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.spa-plan-meta .ss-btn { margin-left: auto; }
.spa-one .spa-team { list-style: none; padding: 0; display: grid; gap: 8px; }
.spa-one .spa-team > li { padding: 12px 14px; border-radius: 14px; background: #f5f4f1; border: 0; }
.spa-one .spa-team { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.spa-one .spa-team > li.spa-person { display: flex; flex-direction: column; gap: 2px; }
.spa-one .spa-team > li.spa-person.is-none { background: #faf0ec; }
.spa-person p { margin: 0; }
.spa-person-h { font-size: 1.05rem; }
.spa-person-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px !important; }
.spa-person-acts .vg-link { width: 100%; }
.spa-roles { margin: 0 0 12px; }
.spa-roles summary { cursor: pointer; color: #5c554b; }
.spa-dupe { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: #f6ead2; color: #7a4b00; }
.ld-groups { display: block; margin-top: 4px; color: #6e675d; font-size: 13px; }
/* 小組 hub (11/2026): each of my groups, its own tiles */
.gh-group { margin: 0 0 22px; }
.gh-h { font-size: 1.25rem; margin: 0 0 10px; }
.gh-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: #f6ead2; }
@media (max-width: 600px) { .gh-tiles { grid-template-columns: 1fr 1fr; } .gh-tiles .ph-tile-desc { font-size: 13px; } }
.pu-guest { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #dfe7f0; color: #2a4a69; font-size: 12px; }
.pu-away { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #f6e0da; color: #8f2d1f; font-size: 12px; font-weight: 600; }
.pu-away-box { background: #faf0ec; }
.pu-check { display: flex; align-items: center; gap: 8px; }
/* 敬拜團排班 (worship-rota.js): a table on wide screens, a card per Sunday on a phone; names as soft chips */
.wr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.wr-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.wr-chips { margin: 0 0 12px; }
.wr-team { display: grid; gap: 14px; }
.wr-team-card { padding: 16px 18px; border-radius: 18px; background: #f3f0e8; }
.wr-team-card h2 { margin: 0 0 10px; }
.wr-members { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wr-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; }
.wr-member b { margin-right: auto; }
.wr-member.is-none { background: #faf0ec; }
.wr-member-add { display: flex; gap: 8px; }
.wr-member-add input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 12px; border: 0; background: #fff; }
.wr-pracs { display: grid; gap: 4px; text-align: left; }
.wr-prac { display: block; } .wr-prac small { display: block; }
.wr-prac-row { border: 0; padding: 12px 14px; margin: 0 0 10px; border-radius: 14px; background: #f3f0e8; display: grid; gap: 8px; }
.wr-prac-row legend { font-weight: 600; padding: 0; }
.spa-invites { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: #faf0ec; font-size: 14px; }
.wr-away { margin: 0 0 10px; padding: 8px 14px; border-radius: 14px; background: #faf0ec; font-size: 14px; }
.wr-table-wrap { overflow-x: auto; }
.wr-table { border-collapse: separate; border-spacing: 0 6px; width: 100%; font-size: 14px; }
.wr-table th, .wr-table td { text-align: left; vertical-align: top; padding: 8px 8px; background: #f5f4f1; }
.wr-table thead th { background: none; color: #5c554b; font-weight: 600; }
.wr-table tbody th { border-radius: 12px 0 0 12px; white-space: nowrap; }
.wr-table tbody td:last-child { border-radius: 0 12px 12px 0; }
.wr-table tr.is-next th, .wr-table tr.is-next td { background: #f6ead2; }
.wr-tags { min-width: 110px; }
.wr-speaker, .wr-awaynote { display: block; color: #6e675d; margin-top: 2px; }
.wr-awaynote { color: #8f2d1f; }
.wr-cell { font: inherit; text-align: left; background: none; border: 0; padding: 2px 0; color: inherit; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; align-items: center; }
span.wr-cell { cursor: default; }
button.wr-cell:hover .wr-name, button.wr-cell:focus-visible .wr-name { background: #efe6d6; }
.wr-name { padding: 2px 8px; border-radius: 999px; background: #fff; white-space: nowrap; }
.wr-cards { display: none; }
.wr-card { margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: #f5f4f1; }
.wr-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 6px; }
.wr-card dl { margin: 0; display: grid; gap: 4px; }
.wr-card dl div { display: grid; grid-template-columns: 4.2em 1fr; gap: 8px; align-items: center; }
.wr-card dt { color: #6e675d; font-size: 13px; }
.wr-card dd { margin: 0; }
.wr-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.wr-pick { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #f5f4f1; }
.wr-pick.is-off { opacity: .6; }
@media (max-width: 760px) { .wr-table-wrap { display: none; } .wr-cards { display: block; } }
/* 敬拜歌單 分享連結 (/worship/) and 敬拜歌曲's share/seen lines */
.wsh-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.wsh-song { padding: 16px 18px; border-radius: 18px; background: #f5f4f1; }
.wsh-song h2 { margin: 2px 0; font-size: 1.3rem; }
.wsh-part { margin: 0; color: #8c3a2e; font-size: 13px; font-weight: 600; }
.wsh-key { padding: 1px 8px; border-radius: 999px; background: #fff; font-size: 14px; vertical-align: middle; }
.wsh-note { margin: 6px 0 0; white-space: pre-wrap; }
.wsh-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ws-share { margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; background: #e2eedf; }
.ws-share input { width: min(100%, 520px); font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 10px; border: 0; margin-top: 4px; }
.ws-upload { margin: 6px 0 0; font-size: 14px; }
.bwk-ask { margin-left: 4px; color: #6e675d; font-size: 13px; }
/* 統計報表 (stats-page.js): filled bars, no lines */
.stp-sec { margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; background: #f5f4f1; }
.stp-h { margin: 0 0 8px; font-size: 1.15rem; }
.stp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stp-bars li { display: grid; grid-template-columns: minmax(6em, 14em) 1fr auto auto; align-items: center; gap: 8px; font-size: 14px; }
.stp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-bar { height: 10px; border-radius: 999px; background: #fff; overflow: hidden; }
.stp-bar span { display: block; height: 100%; border-radius: 999px; background: #c9a77a; }
.stp-bars small { min-width: 4.5em; }
.stp-table { border-collapse: separate; border-spacing: 0 4px; width: 100%; font-size: 14px; }
.stp-table td, .stp-table th { text-align: left; padding: 6px 10px; }
.stp-table tbody td { background: #fff; }
@media (max-width: 600px) { .stp-bars li { grid-template-columns: 1fr auto; } .stp-bar { grid-column: 1 / -1; order: 3; } }
/* 帳號名單 (accounts.js) */
.ac-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ac-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0; }
.ac-bar .cs-search { margin: 0; max-width: 300px; }
.ac-list { display: grid; gap: 6px; }
.ac-row { display: grid; grid-template-columns: 1fr auto minmax(9em, auto); gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #f5f4f1; }
.ac-row small { display: block; font-size: 12.5px; }
.ac-row.is-never { background: #faf0ec; }
.ac-row.is-off { opacity: .55; }
.ac-n { text-align: right; } .ac-n b { font-size: 1.1rem; } .ac-n small { display: inline; margin-left: 2px; }
.ac-last { text-align: right; font-size: 14px; }
@media (max-width: 600px) { .ac-row { grid-template-columns: 1fr auto; } .ac-last { grid-column: 1 / -1; text-align: left; } }
.hw-stale { margin: 0 0 6px; padding: 6px 12px; border-radius: 10px; background: #f6ead2; color: #7a4b00; font-size: 13px; }