/* zh-hant-calendar pack: 萬年曆 · 今日黃曆 · 二十四節氣 · zh-Hant home instrument.
   Builds on tokens.css / base.css / components.css; every class here is prefixed zc-. */

.zc-crumb { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; font-size: 12.5px; color: var(--kd-ink-2); }
.zc-crumb a { color: var(--kd-ink-2); }
.zc-crumb i { font-style: normal; color: var(--kd-line-strong); }
.zc-top { padding-top: 18px; padding-bottom: 26px; }
.zc-top .lead { margin-top: 10px; }
.zc-lead2 { margin: 8px 0 22px; }
#zc-lead { word-break: keep-all; }
.zc-pick [hidden], .zc-mnav [hidden] { display: none !important; }
.zc-note { margin-left: 6px; font-size: 12px; color: var(--kd-ink-2); }
.zc-nojs { margin-top: 14px; padding: 12px 16px; border: 1px dashed var(--kd-line-strong); font-size: 13.5px; color: var(--kd-ink-2); }

/* ---------- Rule figures ---------- */
.zc-rule { position: relative; margin: 0; }
.zc-rule svg text { font-family: var(--inter); font-feature-settings: "tnum" 1; }
.zc-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.zc-bleed .zc-rule { max-width: 1216px; margin: 0 auto; }
.zc-bleed .inst-hd { max-width: none; }
.zc-stage { position: relative; outline: none; }
.zc-stage[role="slider"] { cursor: pointer; touch-action: pan-y; }
.zc-stage:focus-visible { outline: 2px solid var(--kd-ai); outline-offset: 4px; }
.zc-rule svg a { cursor: pointer; text-decoration: none; }
.zc-rule svg a:hover text { fill: var(--kd-ai); }
.zc-rule svg a:focus-visible { outline: 2px solid var(--kd-ai); }

.zc-jie { stroke: var(--kd-ink); stroke-width: 1; fill: none; }
.zc-zq { stroke: var(--kd-ink-2); stroke-width: 1; fill: none; }
.zc-hou { stroke: var(--kd-line-strong); stroke-width: 1; fill: none; }
.zc-leap { fill: var(--kd-ai-tint); }
.zc-15 { fill: var(--kd-ai); }
.zc-season { stroke: var(--kd-line-strong); stroke-width: 1; fill: none; }
.zc-pband { fill: var(--kd-surface-2); }
.zc-mk { fill: none; stroke: var(--kd-ai); stroke-width: 1; }
.zc-hd1 { fill: var(--kd-ai); }
.zc-hd0 { fill: none; stroke: var(--kd-ai); stroke-width: 1; }
.zc-rule svg .zc-tn { font: 600 12.5px var(--hant-mincho); fill: var(--kd-ink); }
.zc-rule svg .zc-tn2 { font-weight: 500; fill: var(--kd-ink-2); }
.zc-rule svg .zc-bl { font: 500 11.5px var(--hant-mincho); fill: var(--kd-ink-2); }
.zc-rule svg .zc-bl-leap { font-weight: 700; fill: var(--kd-ai); }
.zc-rule svg .zc-deg, .zc-rule svg .zc-td, .zc-rule svg .zc-cr { font-size: 11px; }
.zc-rule svg .zc-td { fill: var(--kd-ink-2); }
.zc-rule svg .zc-sn { font: 500 12px var(--hant-mincho); fill: var(--kd-ink-2); }
.zc-rule svg .zc-pk { font-size: 11.5px; fill: var(--kd-ink-2); }
.zc-rule svg .zc-pn { font: 600 15px var(--hant-mincho); fill: var(--kd-ink); }
.zc-rule svg .zc-cg { font: 600 15px var(--hant-mincho); fill: var(--kd-ink); }
.zc-rule svg .zc-cs { font: 500 12px var(--hant-mincho); fill: var(--kd-ink-2); }
.zc-rule svg .zc-we { font-weight: 600; fill: var(--kd-ink); }
.zc-pentad[data-on="0"] .zc-cur { display: none; }
.zc-hov { pointer-events: none; }
.zc-svg .flag, .zc-svg .flag-t, .zc-svg .cur { pointer-events: none; }

i.zc-hd1, i.zc-hd0 { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
i.zc-hd1 { background: var(--kd-ai); }
i.zc-hd0 { border: 1px solid var(--kd-ai); }

/* Desktop / mobile variants of the same rule */
.zc-full, .zc-d { display: block; }
.zc-tape, .zc-m { display: none; }
.zc-tcur { display: none; }

/* Load animation (once per session; reduced-motion makes it instant via tokens.css) */
.zc-intro .zc-full svg, .zc-intro .zc-d svg, .zc-intro .zc-m svg { animation: zc-draw 400ms linear both; }
@keyframes zc-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 767px) {
  .zc-full, .zc-d { display: none; }
  .zc-m { display: block; padding: 0 16px; }
  .zc-tape { display: block; position: relative; }
  .zc-tape-in { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .zc-tape-in::-webkit-scrollbar { display: none; }
  .zc-tape-in::before, .zc-tape-in::after { content: ""; flex: 0 0 50%; }
  .zc-tape-in svg { flex: none; max-width: none; }
  .zc-tcur { display: flex; position: absolute; left: 50%; top: 0; bottom: 0; flex-direction: column; align-items: flex-start; margin-left: -1px; pointer-events: none; }
  .zc-tcur span { height: 20px; padding: 0 8px; background: var(--kd-cursor); color: var(--kd-on-ai); font: 500 12px/20px var(--inter); font-feature-settings: "tnum" 1; white-space: nowrap; }
  .zc-tcur i { flex: 1; width: 2px; background: var(--kd-cursor); }
  .zc-x { overflow-x: auto; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; }
  .zc-x svg { max-width: none; }
  .zc-mtabs { padding-bottom: 10px; }
  .wrap .zc-m { padding: 0; }
  .wrap .zc-rule .inst-hd, .wrap .zc-rule figcaption { padding-left: 0; padding-right: 0; }
  .wrap .zc-x { padding: 0 0 6px; }
  .zc-rule .inst-yr { flex-wrap: wrap; row-gap: 4px; }
}
.zc-rule .inst-yr b { white-space: nowrap; }

/* ---------- Drawer additions ---------- */
.zc-dyn { display: contents; }
.zc-drawer { margin-top: 28px; }
.zc-bleed + .zc-drawer { margin-top: 10px; }
.zc-ld { margin-top: 12px; font-size: 16px; }
.zc-tk { display: inline-block; width: 1.5px; height: 12px; background: var(--kd-ink); }
.zc-hd { margin-left: 2px; font-size: 12px; color: var(--kd-ink-2); }
.zc-why-body { margin-top: 6px; }
.zc-rules { padding: 12px 0 4px; font-size: 12px; color: var(--kd-ink-2); }
.zc-rules code { font: 500 11.5px var(--inter); color: var(--kd-ai); background: var(--kd-ai-tint); padding: 2px 5px; margin-right: 4px; }
.zc-ledger .mr svg { display: block; }
.zc-drawer .why-sum { flex-wrap: wrap; }

@media (max-width: 767px) {
  .zc-drawer .why-sum .eq { flex-basis: 100%; margin-left: 22px; }
}

/* ---------- Month grid ---------- */
.zc-mhd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 12px; }
.zc-mnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zc-legend { margin-bottom: 14px; }
.zc-calwrap { margin-top: 20px; }
.zc-cal { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--kd-surface); }
.zc-cal caption { padding: 0 0 8px; text-align: left; font-size: 12.5px; color: var(--kd-ink-2); }
.zc-cal th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 500; color: var(--kd-ink-2); background: var(--kd-bg); border-bottom: 1.5px solid var(--kd-line-strong); }
.zc-cal th.we { font-weight: 600; color: var(--kd-ink); }
.zc-cal td { height: 88px; padding: 0; vertical-align: top; border-bottom: 1px solid var(--kd-line); border-right: 1px solid var(--kd-line); }
.zc-cal td:last-child { border-right: 0; }
.zc-cal td.we { background: var(--kd-surface-2); }
.zc-cal td.zc-o { background: var(--kd-bg); }
.zc-cal td a { display: grid; grid-template-columns: 1fr auto; align-content: start; height: 100%; min-height: 88px; padding: 8px 10px; color: var(--kd-ink); text-decoration: none; }
.zc-cal td a:hover { background: var(--kd-ai-tint); }
.zc-cal .zc-d { display: block; font: 500 20px/1.15 var(--inter); }
.zc-cal .we .zc-d { font-weight: 600; }
.zc-cal .zc-gz { justify-self: end; font-size: 12.5px; color: var(--kd-ink-2); }
.zc-cal .zc-l { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; color: var(--kd-ink-2); }
.zc-cal .zc-lm { color: var(--kd-ai); font-weight: 700; }
.zc-cal .zc-t { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; min-height: 18px; font-size: 12px; font-weight: 600; }
.zc-cal .zc-t i { width: 1.5px; height: 11px; background: var(--kd-ink); }
.zc-cal td.zc-today a { box-shadow: inset 0 0 0 1.5px var(--kd-line-strong); }
.zc-cal td.zc-sel { background: var(--kd-ai-tint); }
.zc-cal td.zc-sel a { box-shadow: inset 3px 0 0 var(--kd-ai); }
.zc-cal td.zc-sel.zc-today a { box-shadow: inset 3px 0 0 var(--kd-ai), inset 0 0 0 1.5px var(--kd-line-strong); }
.zc-cal td.zc-out { color: var(--kd-ink-2); padding: 8px 10px; }

@media (max-width: 767px) {
  .zc-cal th { padding: 6px 2px; text-align: center; }
  .zc-cal td, .zc-cal td a { height: 66px; min-height: 66px; }
  .zc-cal td a { grid-template-columns: 1fr; justify-items: center; padding: 6px 2px; }
  .zc-cal .zc-gz { display: none; }
  .zc-cal .zc-d { font-size: 16px; }
  .zc-cal .zc-l { margin-top: 3px; font-size: 11px; }
  .zc-cal .zc-t { min-height: 14px; font-size: 10.5px; gap: 3px; }
  .zc-cal .zc-t i { height: 9px; }
}

/* ---------- Forms ---------- */
.zc-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 22px; }
.zc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--kd-ink-2); }
.zc-field input, .zc-field select, .zc-mnav select {
  height: 44px; padding: 0 10px; border: 1px solid var(--kd-line-strong); background: var(--kd-surface);
  color: var(--kd-ink); font: 500 15px var(--inter); font-feature-settings: "tnum" 1;
}
.zc-inline { flex-direction: row; align-items: center; gap: 10px; }
.zc-chk { display: flex; align-items: center; gap: 6px; height: 44px; font-size: 14px; }
.zc-chk input { width: 18px; height: 18px; accent-color: var(--kd-ai); }
.zc-ib { width: 44px; padding: 0; font-size: 18px; }
.zc-fy input { width: 104px; }
.zc-fy em { font-style: normal; font-size: 13px; }
.zc-conv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.zc-cf { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1.5px solid var(--kd-ink); }
.zc-cf .btn { align-self: flex-start; }
.zc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.zc-out .st-err { margin: 0; }
.zc-sechd { flex-wrap: wrap; gap: 12px 24px; }

@media (max-width: 767px) {
  .zc-conv { grid-template-columns: 1fr; gap: 32px; }
  .zc-mnav { width: 100%; }
}

/* ---------- Tables ---------- */
.zc-tbl a { color: var(--kd-ink); }
.zc-tbl th[scope="row"] { font: 600 14.5px var(--hant-mincho); color: var(--kd-ink); background: transparent; border-bottom: 1px solid var(--kd-line); }
.zc-tbl th[scope="row"].n { font: 500 14px var(--inter); font-feature-settings: "tnum" 1; }
.zc-tbl td.hant { font-size: 15px; }
.zc-tbl tr.zc-zqrow th[scope="row"] { font-weight: 500; }
.zc-tbl tr[aria-current] td, .zc-tbl tr[aria-current] th, .zc-tbl tr.zc-leaprow td, .zc-tbl tr.zc-leaprow th { background: var(--kd-ai-tint); }
.zc-tbl tr[aria-current] th, .zc-tbl tr.zc-leaprow th { box-shadow: inset 3px 0 0 var(--kd-ai); }
.zc-tbl tr.sel th { box-shadow: inset 3px 0 0 var(--kd-ai); background: var(--kd-ai-tint); }
.zc-hours { margin-top: 24px; }
.zc-hour .zc-stage { margin-top: 4px; }

@media (max-width: 767px) {
  .zc-tbl th, .zc-tbl td { padding: 8px 9px; }
}

/* ---------- Classics (七十二候) ---------- */
.zc-classic { border-top: 1.5px solid var(--kd-ink); }
.zc-cl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--kd-line); }
.zc-cl-k { grid-row: span 3; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--kd-ink-2); }
.zc-cl-k b { font: 600 20px/1.4 var(--hant-mincho); color: var(--kd-ink); letter-spacing: .04em; }
.zc-orig { font: 500 17px/1.95 var(--hant-mincho); max-width: 40em; }
.zc-tr { max-width: 40em; font-size: 14.5px; line-height: 1.9; color: var(--kd-ink-2); }
.zc-gloss { font-size: 13.5px; color: var(--kd-ai); }
.zc-src { margin-top: 14px; font-size: 12.5px; color: var(--kd-ink-2); }

@media (max-width: 767px) {
  .zc-cl { grid-template-columns: 1fr; padding: 16px 0; }
  .zc-cl-k { grid-row: auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
}

/* ---------- Prose & navigation ---------- */
.zc-prose p + p { margin-top: 1em; }
.zc-pn { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--kd-line); font-size: 14.5px; }

@media print {
  .zc-cur, .zc-tcur, .zc-pick, .zc-mnav, .zc-conv { display: none !important; }
}
.zc-svg-lon .zc-deg, .zc-svg-lon .zc-tn, .zc-svg-lon .zc-td, .zc-svg-lon .zc-sn { paint-order: stroke; stroke: var(--kd-bg); stroke-width: 4px; stroke-linejoin: round; }

.ilist li .t { font-size: 15px; font-weight: 500; color: var(--kd-ink); }

/* Basis rows: plain reading, then the source in small type */
.zc-src { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--kd-ink-2); }
.zc-whyd { grid-column: 1 / -1; margin-top: 20px; }
.zc-ex { color: var(--kd-ink-2); }