/* 智能課表 — 「印刷編輯」設計方向（2026-09-02 Desmond 定案 B）
 * 系統：暖紙底＋墨黑字＋髮絲線；標題用宋體（Noto Serif TC），
 * 代號／時間／標籤用等寬（IBM Plex Mono），內文黑體。
 * 深紅 #a3170f 只用喺重點；「現在」格＝實心墨黑反白。改主題由 :root 入手。 */
:root {
  --paper: #faf7f1; --card: #faf7f1;
  --ink: #211d17; --sub: #55503f; --faint: #8a8175; --empty: #c9c0b0;
  --hair: #ddd5c7; --line: var(--hair);
  --red: #a3170f; --red-dark: #6b0f0a;
  --dim: var(--faint);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper);
  font-family: "Noto Sans TC", -apple-system, "PingFang TC", sans-serif; }
.serif, h1, h2, .cover-panel h3 { font-family: "Noto Serif TC", "Songti TC", serif; }
a { color: var(--red); } a:visited { color: var(--red); } a:hover { color: var(--red-dark); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.staging-bar { background: var(--red); color: var(--paper); font-size: .85em;
  padding: .4em 1em; text-align: center; }
.staging-bar a, .staging-bar a:visited { color: var(--paper); text-decoration: underline;
  margin-left: .6em; }
.staging-bar a:hover { color: var(--paper); opacity: .85; }

.topbar { display: flex; justify-content: space-between; align-items: baseline;
  padding: 1em 1.6em; background: var(--paper); border-bottom: 1px solid var(--ink); }
.topbar .brand, .topbar .brand:visited { font-family: "Noto Serif TC", serif; font-weight: 900;
  color: var(--ink); text-decoration: none; font-size: 1.15em; }
.topbar .brand::after { content: "KIANGSU-CHEKIANG COLLEGE (N.P.)";
  font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: .58em;
  color: var(--faint); letter-spacing: .06em; margin-left: .9em; }
.topbar nav { display: inline-flex; align-items: baseline; gap: 1.4em; }
.topbar nav a, .topbar nav a:visited { color: var(--sub); text-decoration: none; font-size: .85em;
  font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.topbar nav a:hover { color: var(--red); }
.topbar .user { color: var(--faint); font-size: .78em;
  font-family: "IBM Plex Mono", monospace; }
.langbtn { border: 1px solid var(--hair); padding: .1em .5em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 1.8em 1.6em; }
.wrap.narrow { max-width: 440px; padding-top: 4em; }
.center { text-align: center; }
h1 { font-size: 1.9em; font-weight: 900; letter-spacing: .01em; margin: .4em 0 .3em; }
h1 small { color: var(--faint); font-weight: 600; font-size: .55em; }
.lede { color: var(--sub); }
.dim { color: var(--faint); }

.notice { padding: .55em 0; margin: .6em 0; font-size: .9em; color: var(--sub); }
.notice.now { font-family: "IBM Plex Mono", monospace; font-size: .82em; }
.notice.error { color: var(--red-dark); border-top: 2px solid var(--red);
  border-bottom: 1px solid var(--hair); padding: .6em 0; }
.notice.hint { color: var(--faint); font-size: .85em; }
.notice.special { color: #7a5a12; border-top: 2px solid #b58a1e;
  border-bottom: 1px solid var(--hair); padding: .6em 0; }
.notice.cover-up { border-left: 3px solid var(--red); padding: .5em .8em;
  background: #faf6ee; }
.notice.cover-up b { color: var(--ink); }
.notice.cover-up ul { list-style: none; margin: .3em 0 0; padding: 0; }
.notice.cover-up li { margin: .2em 0; }

button, .button, .button:visited { display: inline-block; border: 1px solid var(--ink); border-radius: 2px;
  padding: .55em 1.2em; background: transparent; color: var(--ink); font-size: .95em;
  cursor: pointer; text-decoration: none; font-family: inherit; }
button.primary, .primary-link, .primary-link:visited { background: var(--red);
  border-color: var(--red); color: var(--paper); font-weight: 500; }
button.primary:hover, .primary-link:hover { background: var(--red-dark); border-color: var(--red-dark); }
input[type=search], input[type=file] { width: 100%; padding: .6em .2em; margin: .6em 0;
  border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  font-size: 1em; font-family: inherit; border-radius: 0; }
input[type=search]:focus { outline: none; border-bottom: 2px solid var(--red); }

/* 主頁功能介紹：報刊式欄目，唔用卡片 */
.features { display: grid; gap: 1.6em; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 1.4em 0 1.8em; }
.feature { border-top: 3px solid var(--ink); padding-top: .8em; }
.feature h2 { margin: 0 0 .45em; font-size: 1.02em; font-weight: 700; }
.feature p { margin: 0 0 .7em; color: var(--sub); font-size: .87em; line-height: 1.65; }

.teacher-grid, .pick-grid { display: grid; gap: .1em .9em;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 1em; }
.teacher-card, .teacher-card:visited { border-bottom: 1px solid var(--hair); padding: .55em .1em;
  text-decoration: none; color: var(--ink); }
.teacher-card:hover { background: #f1ecdf; }
.teacher-card b { font-family: "IBM Plex Mono", monospace; color: var(--red);
  margin-right: .45em; font-size: .9em; }
.teacher-card span { font-family: "Noto Serif TC", serif; font-weight: 600; }
.teacher-card em { display: block; font-size: .72em; color: var(--faint); font-style: normal;
  font-family: "IBM Plex Mono", monospace; }
.pick { border-bottom: 1px solid var(--hair); padding: .45em .1em; font-size: .9em; cursor: pointer; }
.pick b { font-family: "IBM Plex Mono", monospace; color: var(--red); font-size: .9em; }
.opt { display: block; margin: 1.1em 0; color: var(--sub); font-size: .9em; }

/* 時間表：開放式排版，粗頂線＋髮絲行線 */
.tablewrap { overflow-x: auto; }
table.tt { border-collapse: collapse; width: 100%;
  font-variant-numeric: tabular-nums; }
.tt th, .tt td { border: 0; border-bottom: 1px solid var(--hair);
  padding: .8em .6em; text-align: left; font-size: .86em; min-width: 108px; }
.tt tr:first-child th { font-family: "Noto Serif TC", serif; font-weight: 700;
  font-size: .95em; border-bottom: 2px solid var(--ink); background: transparent;
  padding-bottom: .5em; }
.tt th.ph { min-width: 84px; background: transparent; text-align: left;
  font-family: "Noto Serif TC", serif; font-weight: 900; font-size: .95em; }
.tt th.ph small { display: block; font-family: "IBM Plex Mono", monospace;
  font-weight: 400; color: var(--faint); font-size: .72em; letter-spacing: .04em; }
.tt td b { margin-right: .35em; }
.tt td span { color: var(--sub); }
.tt td em { color: var(--faint); font-style: normal; font-size: .8em;
  font-family: "IBM Plex Mono", monospace; margin-left: .3em; }
.tt td.free { color: var(--empty); }
.tt td.k-assembly { background: #f5edd6; }
.tt td.k-remedial { background: #efe9dc; }
.tt td.k-activity { background: #edefdf; }
.tt td.k-cover { border-left: 3px solid var(--red); }
.tt td.now { background: var(--ink); color: var(--paper); }
.tt td.now b, .tt td.now span { color: var(--paper); }
.tt td.now em { color: #d8cfc0; }
.tt td.allfree { background: #eef0e0; font-weight: 600; }
.tt td.allfree.double { background: #e1e5cd; }
.tt td.allfree em { color: #4c661e; font-size: .75em; }
.tt td .who { display: block; color: var(--faint); font-size: .72em; font-weight: 400;
  font-family: "IBM Plex Mono", monospace; margin-top: .2em; }

td.cell { cursor: pointer; }
td.cell.sel { box-shadow: inset 0 0 0 2px var(--red); }
td.cell.sel.now { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--red); }

.cover-panel { border-top: 2px solid var(--ink); padding: .9em 0 .4em; margin: 1em 0; }
.cover-panel h3 { margin: 0 0 .7em; font-size: 1.05em; font-weight: 900; }
.cover-panel h3 small { color: var(--faint); font-weight: 400; margin-left: .8em;
  font-family: "IBM Plex Mono", monospace; font-size: .68em; letter-spacing: .05em; }
.chip, .chip:visited { display: inline-block; margin: 0 .5em .5em 0; padding: .3em .7em;
  border: 1px solid var(--hair); border-radius: 2px; font-size: .85em;
  color: var(--ink); text-decoration: none; background: transparent; }
.chip:hover { border-color: var(--ink); }
.chip b { font-family: "IBM Plex Mono", monospace; font-size: .9em; }
.chip.same { border-color: var(--red); }
.chip.same b { color: var(--red); }
.chip em { font-style: normal; color: var(--red); font-size: .72em; margin-left: .4em;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .05em; }

.week-badge { font-family: "IBM Plex Mono", monospace; font-size: .8em;
  color: var(--sub); letter-spacing: .05em; margin: -0.2em 0 1em;
  border-left: 3px solid var(--red); padding-left: .8em; }
.week-badge b { color: var(--ink); }
.wk { display: inline-block; font-size: .68em; margin-top: .2em; padding: 0 .3em;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .05em; }
.wk.this { color: #4c661e; border: 1px solid #c4cf9f; }
.wk.other { color: var(--faint); border: 1px solid var(--hair); text-decoration: line-through; }
.tt td.now .wk.this { color: #d8e6b8; border-color: #6b7a4a; }

.foot { text-align: center; color: var(--faint); font-size: .75em; padding: 2.4em 0;
  font-family: "IBM Plex Mono", monospace; }

/* 手機：報頭收窄——英文校名同 email 唔夠位就唔逼佢出場 */
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: .3em .8em; padding: .8em 1em; }
  .topbar .brand::after { content: none; }
  .topbar .user { display: none; }
  .topbar nav { gap: 1em; flex-wrap: wrap; }
  .topbar .brand { white-space: nowrap; }
  .wrap { padding: 1.2em 1em; }
  h1 { font-size: 1.55em; }
}

/* 加到手機主畫面教學 */
.install { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: .7em 0; margin: 0 0 1.4em; }
.install summary { cursor: pointer; font-family: "IBM Plex Mono", monospace;
  font-size: .82em; letter-spacing: .05em; color: var(--sub); }
.install summary:hover { color: var(--red); }
.install > .lede { font-size: .87em; margin: .8em 0 .4em; }
.install-cols { display: grid; gap: .4em 2.4em;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.install-cols h3 { font-family: "IBM Plex Mono", monospace; font-size: .78em;
  letter-spacing: .05em; color: var(--red); margin: .6em 0 .3em; font-weight: 500; }
.install-cols ol { margin: 0 0 .6em; padding-left: 1.3em; color: var(--sub);
  font-size: .87em; line-height: 1.8; }

/* 首頁「查閱其他教師」摺疊區 */
.others { border-top: 1px solid var(--hair); padding: .8em 0 .2em; margin: 1.6em 0 0; }
.others summary { cursor: pointer; font-family: "Noto Serif TC", serif; font-weight: 700;
  font-size: 1em; }
.others summary:hover { color: var(--red); }

/* 首頁動作列：兩個入口統一款式 */
.actions { display: flex; flex-wrap: wrap; gap: .6em; margin: 1.4em 0 0; }
/* 頁腳：分項用中點分隔 */
.foot a { color: var(--sub); }
.foot span { margin-left: 1em; }
.foot span::before { content: "·"; margin-right: 1em; color: var(--hair); }

/* 共同空堂查詢：課堂詳情面板 */
.detail-list { list-style: none; margin: .4em 0 0; padding: 0; }
.detail-list li { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); padding: .5em 0; font-size: .9em; }
.detail-list li:last-child { border-bottom: 0; }
.detail-list b { font-family: "IBM Plex Mono", monospace; color: var(--red);
  font-size: .88em; min-width: 4.2em; }
.detail-list .cls { color: var(--sub); }
.detail-list em { font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: .82em; color: var(--faint); }
#cellDetail .cover-panel, #cellDetail h3 { margin-top: .8em; }
#cellDetail h3 { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 1.02em;
  border-top: 2px solid var(--ink); padding-top: .7em; margin: 1em 0 0; }
#cellDetail h3 small { color: var(--red); font-weight: 400; margin-left: .8em;
  font-family: "IBM Plex Mono", monospace; font-size: .68em; letter-spacing: .05em; }

/* 課室時間表 */
.room-card b { font-size: 1.05em; }
.room-card .state { display: block; font-size: .74em; margin-top: .15em; }
.room-card .state.busy { color: var(--red); }
.room-card .state.idle { color: #4c661e; }
.room-card.idle { background: #f3f5ea; }
.room-lesson { padding: .1em 0; }
.room-lesson + .room-lesson { border-top: 1px dashed var(--hair); margin-top: .25em; padding-top: .3em; }
.room-lesson em { color: var(--red); font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: .82em; margin-left: .3em; }

/* ---- 編代課 ---- */
.cover-table { width: 100%; border-collapse: collapse; font-size: .9em; margin: .8em 0 1.4em; }
.cover-table th, .cover-table td { text-align: left; padding: .5em .4em; border-bottom: 1px solid var(--hair); vertical-align: top; }
.cover-table th { font-family: "Noto Serif TC", serif; font-weight: 700; font-size: .85em; color: var(--sub); }
.cover-table .mono, .cover-table td.p { font-family: "IBM Plex Mono", monospace; }
.cover-table tr.pending td.status { color: var(--red); font-weight: 600; }
.cover-table tr.sel { background: #f1ecdf; }
.cover-table a.pickbtn, .cover-table a.pickbtn:visited { color: var(--red); text-decoration: none; font-size: .85em; }
.bal { font-family: "IBM Plex Mono", monospace; }
.bal.pos { color: #2f6b3a; } .bal.neg { color: var(--red); }
.cand-panel { border-top: 3px solid var(--ink); padding: .8em 0 1em; margin: .4em 0 1.2em; }
.cand-panel h3 { margin: 0 0 .5em; font-size: 1em; }
.cand-panel h4 { margin: .8em 0 .3em; font-size: .85em; color: var(--sub); font-weight: 600; }
.cand-panel .chip { display: inline-block; margin: .2em .35em .2em 0; padding: .25em .6em; border: 1px solid var(--hair); border-radius: 2px; cursor: pointer; font-size: .88em; background: transparent; color: var(--ink); }
.cand-panel .chip:hover { border-color: var(--red); color: var(--red); }
.cand-panel .chip .bal { margin-left: .4em; font-size: .85em; }
.cand-panel .chip .tag { margin-left: .4em; font-size: .75em; color: var(--faint); }
.cand-panel details summary { cursor: pointer; color: var(--faint); font-size: .85em; margin-top: .6em; }
.tt td .cv { display: block; margin-top: .25em; padding: .1em .35em; font-size: .72em; font-family: "IBM Plex Mono", monospace; background: var(--red); color: var(--paper); border-radius: 2px; }
.tt td .cv.by { background: transparent; color: var(--red); border: 1px solid var(--red); }
.tt td.now .cv { background: var(--paper); color: var(--ink); }
.daynav { display: flex; gap: 1.2em; align-items: baseline; font-size: .85em; margin: .4em 0; }
.daynav a, .daynav a:visited { color: var(--sub); text-decoration: none; }
.daynav b { font-family: "IBM Plex Mono", monospace; }
.form-row { margin: .9em 0; }
.form-row label { display: block; font-size: .85em; color: var(--sub); margin-bottom: .3em; }
.form-row select, .form-row textarea, .form-row input[type=text] { width: 100%; padding: .5em .3em; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: inherit; }
.periods-pick label { display: inline-block; margin: .2em .8em .2em 0; font-size: .9em; }
.periods-pick { transition: opacity .15s; }
.periods-pick.dimmed { opacity: .55; }
.cover-table tr.void td { opacity: .5; }

/* 登記缺席：月曆點選日期 */
.cal-wrap { border: 1px solid var(--hair); padding: .8em .9em; margin-top: .3em; max-width: 420px; }
.cal-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .9em; margin-bottom: .5em; }
.cal-head a, .cal-head a:visited { color: var(--sub); text-decoration: none;
  font-family: "IBM Plex Mono", monospace; font-size: .85em; }
.cal-head a:hover { color: var(--red); }
.cal-head b { font-size: 1em; }
table.cal { width: 100%; border-collapse: collapse; table-layout: fixed;
  font-variant-numeric: tabular-nums; }
table.cal th { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: .68em;
  color: var(--faint); padding: .2em 0; text-align: center; letter-spacing: .03em; }
table.cal th.wkcol { width: 3.6em; }
table.cal td { text-align: center; padding: 0; height: 2.2em; vertical-align: middle;
  font-size: .88em; position: relative; }
table.cal td.blank { background: transparent; }
table.cal td[data-iso] { cursor: pointer; border: 1px solid transparent; }
table.cal td[data-iso]:hover { border-color: var(--ink); }
table.cal td.off { color: var(--empty); cursor: not-allowed; }
table.cal td.off:hover { border-color: transparent; }
table.cal td.special:not(.off) { text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 2px; text-underline-offset: 2px; }
table.cal td.today { border-color: var(--ink); font-weight: 700; }
table.cal td.sel { background: var(--red); color: var(--paper); border-color: var(--red); }
table.cal td.sel.today { border-color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
table.cal td.wkcol { font-family: "IBM Plex Mono", monospace; letter-spacing: .02em;
  text-align: left; cursor: default;
  white-space: nowrap; font-size: .68em; color: var(--sub); padding-right: .4em; width: auto; }
.cal-legend { font-size: .75em; margin: .5em 0 0; }
.sel-chips { margin-top: .7em; display: flex; flex-wrap: wrap; gap: .4em; }
.sel-chips .chip { display: inline-flex; align-items: center; gap: .35em; font-family: "IBM Plex Mono", monospace; }
.sel-chips .chip-x { border: 0; background: transparent; color: var(--faint); cursor: pointer;
  padding: 0; font-size: 1em; line-height: 1; }
.sel-chips .chip-x:hover { color: var(--red); }

@media (max-width: 420px) {
  .cal-wrap { max-width: 100%; padding: .7em .5em; }
  table.cal td { font-size: .84em; }
}