/* 學習儀表板
   ------------------------------------------------------------------
   色彩沿用原始設計的深青藍當主色，強調色取自 picture01 圖示裡的洋紅與黃。
   版面的重點只放在一處：課堂參與那排數字。其餘一律安靜。
   每個數字都給得出分母或量尺——這是這份改版最主要的意圖。            */

:root {
  --deep:    #0e3346;
  --teal:    #1b6685;
  --teal-lt: #2f87ac;
  --mist:    #e8f1f4;
  --wash:    #f3f6f6;
  --paper:   #ffffff;
  --coral:   #c81e5b;
  --amber:   #e9a13b;
  --line:    #d5e0e5;
  --muted:   #63808f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 56px;
  background: var(--wash);
  color: var(--deep);
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
               system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

h1, h2 { margin: 0; font-size: 1rem; }
p { margin: 0; }
a { color: var(--teal); }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { max-width: 68rem; margin: 0 auto; }

/* 頁首 ------------------------------------------------------------ */
.topbar {
  max-width: 68rem;
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar__home {
  font-weight: 700;
  color: var(--deep);
  text-decoration: none;
  border-left: 3px solid var(--coral);
  padding-left: 10px;
}
.switcher select {
  font: inherit;
  padding: 6px 10px;
  color: var(--deep);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  max-width: 16rem;
}

/* 版面 ------------------------------------------------------------ */
.board {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "id      aims"
    "part    att"
    "journey journey";

}
.card--id   { grid-area: id; }
.card--aims { grid-area: aims; }
.card--part { grid-area: part; }
.card--att  { grid-area: att; }
.journey    { grid-area: journey; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px;
}
.card__title {
  font-size: .95rem;
  color: var(--teal);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* 身分欄位 --------------------------------------------------------- */
.facts { margin: 0; display: grid; gap: 10px 24px; grid-template-columns: 1fr 1fr; }
.facts div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.facts dt { color: var(--muted); font-size: .84rem; flex: 0 0 5.5rem; }
.facts dd {
  margin: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 目標與計畫 -------------------------------------------------------- */
.card--aims { display: grid; gap: 14px; align-content: start; }
.aim h2 { font-size: .84rem; color: var(--muted); font-weight: 400; }
.aim p { font-weight: 500; }
.unset { color: #9db2bc; font-weight: 400; }

/* 課堂參與 ---------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  /* 拿掉 Quiz 的量尺之後改成頂端對齊，
     Hours of absence 和 Quiz average 的數字才會在同一條基線上 */
  align-items: start;
}
.metric { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.metric--donut { justify-content: flex-start; }
.metric__num {
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.metric__num.is-warn { color: var(--coral); }
.metric__unit { font-size: .8rem; color: var(--muted); }
.metric__label { font-size: .86rem; margin-top: 6px; }
.metric__sub { font-size: .76rem; color: var(--muted); }

.scale {
  display: block;
  width: 100%;
  max-width: 5.5rem;
  height: 4px;
  margin-top: 6px;
  background: var(--mist);
  border-radius: 2px;
  overflow: hidden;
}
.scale__fill { display: block; height: 100%; background: var(--teal); }

.donut { width: 74px; height: 74px; }
.donut__track { fill: none; stroke: var(--mist); stroke-width: 4.5; }
.donut__value {
  fill: none; stroke-width: 4.5; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.donut--teal  .donut__value { stroke: var(--teal); }
.donut--amber .donut__value { stroke: var(--amber); }
.donut__text {
  fill: var(--deep);
  font-size: .82rem;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}

/* 出缺席 ------------------------------------------------------------ */
.months { display: grid; gap: 10px; }
.month {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.month__label { font-size: .84rem; color: var(--muted); }
/* 每列的圈數不一定相同（4 或 5），用等寬分佈而不是固定欄數 */
.month__slots { display: flex; gap: 8px; }
.slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.slot--none { color: #9db2bc; font-size: .8rem; }
.slot__date { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.dot {
  width: 15px; height: 15px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
/* 出席=實心、缺席=空心、不計入=淺灰實心、尚未上課=淡框 */
.dot--present  { background: var(--teal); }
.dot--absent   { background: transparent; }
.dot--excluded { background: #c7d2d8; border-color: #c7d2d8; }
.dot--blank    { border-color: #e3ebee; border-style: dashed; }

.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
}
.legend .dot { width: 11px; height: 11px; border-width: 1.5px; }
.legend .dot + .dot { margin-left: 10px; }
.legend .dot:not(:first-child) { margin-left: 10px; }
.legend__tally { margin-left: auto; }

/* 自主學習歷程 ------------------------------------------------------- */
.journey {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
/* 用 flex 而不是絕對定位：標題在窄螢幕會換行，
   絕對定位的按鈕就會疊到字上面。 */
.journey__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  background: var(--teal);
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.journey__edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 400;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  padding: 3px 9px;
}
.journey__edit:hover { background: rgba(255, 255, 255, .15); }
.journey__empty { padding: 28px 20px; color: var(--muted); text-align: center; }

/* 新增活動 ----------------------------------------------------------- */
.adder { border-bottom: 1px solid var(--line); background: var(--mist); }
.adder__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.adder__summary::-webkit-details-marker { display: none; }
.adder__plus {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
}
.adder[open] .adder__summary { border-bottom: 1px solid var(--line); }
.adder__cancel {
  margin-left: auto;
  font-size: .84rem;
  font-weight: 400;
  color: var(--coral);
}
.act-form__current { display: flex; gap: 6px; }
.act-form__current img {
  width: 48px; height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.act-form__error {
  margin: 0;
  padding: 10px 20px;
  background: #fdecf1;
  color: #8d1440;
  border-bottom: 1px solid var(--coral);
  font-size: .9rem;
}

/* 版面在下面的 .act-form / .act-form__top 重新定義，這裡只留共用的欄位樣式 */
.act-form__col { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.act-form__col legend,
.act-form__label {
  font-weight: 700;
  font-size: .9rem;
  padding: 0;
  border-bottom: 2px solid var(--deep);
  align-self: flex-start;
  margin-bottom: 2px;
}
.act-form input[type="text"],
.act-form input[type="date"],
.act-form input[type="number"],
.act-form input:not([type]),
.act-form textarea {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  min-width: 0;
}
.act-form input[type="file"] {
  font-size: .82rem;
  padding: 6px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  background: var(--paper);
}
.act-form__hours { display: flex; align-items: center; gap: 8px; }
.act-form__hours input { width: 6rem; }
.act-form__hint { font-size: .76rem; color: var(--muted); }

.radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.radio input { width: 16px; height: 16px; accent-color: var(--teal); }

.act-form__actions { grid-column: 1 / -1; }
.act-form__actions button {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border: 0;
  border-radius: 4px;
  padding: 9px 28px;
  cursor: pointer;
}
.act-form__actions button:hover { background: #14536d; }

/* 歷程列 ------------------------------------------------------------- */
.acts { list-style: none; margin: 0; padding: 0; }
.act {
  display: grid;
  grid-template-columns: 120px 120px minmax(0, 1fr) 160px auto;
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.act:last-child { border-bottom: 0; }

/* 交替底色。內層的卡片維持白底，所以底色只當成色帶，
   反思那一大段文字的可讀性不受影響。 */
/* 交替底色。兩個顏色刻意只差一階明度：
   隔行分辨得出來就夠了，色差太大反而讓人以為兩者有不同意義。
   換色改這兩個變數即可。 */
.acts { --act-a: #e8f0f2; --act-b: #f7f4ec; }
.act:nth-child(odd)  { background: var(--act-a); }
.act:nth-child(even) { background: var(--act-b); }
/* 左側細線提供另一層分隔，不必靠色差撐全部 */
.act { border-left: 4px solid var(--teal); }
.act:nth-child(even) { border-left-color: #d8cdb8; }
/* 內層卡片一律純白。之前用半透明白，在深色底上會透出底色，
   反思那塊在紅列上變成粉紅，文字對比掉很多。 */

/* 圖示與活動名稱（名稱在圖示下方，淺底無框）*/
.act__type { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.act__icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 3px solid rgba(14, 51, 70, .12);
  background: #fff;
  padding: 7px;
}
.act__name {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(14, 51, 70, .1);
  border-radius: 4px;
  padding: 6px 8px;
  text-align: center;
  font-weight: 700;
  font-size: .92rem;
  overflow-wrap: anywhere;
}

/* 日期與時數：白卡片，讓色塊只出現在整列的背景上 */
.act__facts { display: grid; gap: 8px; }
.fact {
  background: #fff;
  border: 1px solid rgba(14, 51, 70, .1);
  color: var(--deep);
  border-radius: 4px;
  padding: 9px 10px;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* 單位跟著數字走，字小一點、不要粗體，讓數字是視覺主體 */
.fact__unit {
  margin-left: 5px;
  font-size: .76rem;
  font-weight: 400;
  color: #56727f;
}

.act__reflection {
  background: #fff;
  border: 1px solid rgba(14, 51, 70, .1);
  border-radius: 4px;
  padding: 11px 13px;
  /* 不設 min-height：內容多就長，內容少就短。
     也不要在這裡設 white-space: pre-wrap——樣板的縮排與換行
     會被當成內容渲染成一堆空行，框框就被撐爆了。
     要保留換行的只有答案本身，設在 .qa dd 和 .act__reflection-text 上。 */
  overflow-wrap: anywhere;
  font-size: .9rem;
  align-self: start;
}
.act__reflection-text { white-space: pre-wrap; }
.act__reflection-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: .04em;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mist);
}

/* 參與證明：摺疊，點開才出現縮圖 */
.act__proof { align-self: start; }
.proof > summary {
  cursor: pointer;
  font-size: .84rem;
  color: var(--deep);
  background: #fff;
  border: 1px solid rgba(14, 51, 70, .1);
  border-radius: 4px;
  padding: 8px 10px;
  text-align: center;
  list-style: none;
}
.proof > summary::-webkit-details-marker { display: none; }
.proof > summary:hover { background: #fff; }
.proof__thumbs { display: grid; gap: 6px; margin-top: 6px; }
.proof__thumbs img {
  width: 100%; height: 78px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.act__empty {
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(14, 51, 70, .1);
  border-radius: 4px;
  padding: 8px 10px;
  color: #56727f;
  font-size: .84rem;
}

.act__side { align-self: start; }
.act__edit {
  font-size: .8rem;
  color: var(--deep);
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(14, 51, 70, .1);
  border-radius: 4px;
  padding: 5px 12px;
  white-space: nowrap;
  display: inline-block;
}
.act__edit:hover { background: #fff; }

/* 名冊分批 ----------------------------------------------------------- */
.batch { margin-bottom: 26px; }
.batch__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--teal);
}
.batch__count { font-size: .82rem; color: var(--muted); font-weight: 400; }

/* 學生選擇頁 --------------------------------------------------------- */
.page-title { font-size: 1.4rem; margin-bottom: 4px; }
.page-note { color: var(--muted); margin-bottom: 16px; }
.filter {
  font: inherit;
  width: 100%;
  max-width: 22rem;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 18px;
}
.roster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.roster a {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  text-decoration: none;
  color: var(--deep);
}
.roster a:hover { background: var(--mist); }
.roster__name { font-weight: 700; }
.roster__meta { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 窄螢幕 ------------------------------------------------------------- */
@media (max-width: 60rem) {
  .board { grid-template-columns: 1fr; grid-template-areas: "id" "aims" "part" "att" "journey"; }
  .act { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .act__reflection { grid-column: 1 / -1; }
  .act__proof { grid-column: 1 / -1; }
  .proof__thumbs { grid-template-columns: repeat(3, 1fr); }
  .act__side { grid-column: 1 / -1; justify-self: end; }
  .act__proof { grid-template-columns: 1fr 1fr; }
  .act-form { grid-template-columns: 1fr 1fr; }
  }

@media (max-width: 34rem) {
  body { padding: 0 12px 40px; }
  .card { padding: 14px; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .metric__num { font-size: 2.3rem; }
  .facts { grid-template-columns: 1fr; }
  .month { grid-template-columns: 2.2rem repeat(4, 1fr); gap: 4px; }
  .slot__date { font-size: .64rem; }
  .act { grid-template-columns: 1fr; }
  .act__type { flex-direction: row; gap: 12px; align-items: center; }
  .act__icon { width: 60px; height: 60px; }
  .act-form { grid-template-columns: 1fr; }
  .journey__title { padding: 12px 52px; font-size: .95rem; }
}

/* 登入頁 ------------------------------------------------------------- */
.login {
  max-width: 22rem;
  margin: 6vh auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 6px;
  padding: 28px 26px 30px;
}
.login h1 { font-size: 1.3rem; margin-bottom: 6px; }
.login__hint { color: var(--muted); font-size: .88rem; margin-bottom: 20px; }
.login__error {
  background: #fdecf1;
  border: 1px solid var(--coral);
  color: #8d1440;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: .9rem;
}
.login__done {
  background: var(--mist);
  border: 1px solid var(--teal);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: .9rem;
}
.login form { display: grid; gap: 6px; }
.login label { font-size: .84rem; color: var(--muted); }
.login input {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 10px;
}
.login input:focus { outline: none; border-color: var(--teal); }
.login button {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border: 0;
  border-radius: 4px;
  padding: 10px;
  margin-top: 6px;
  cursor: pointer;
}
.login button:hover { background: #14536d; }

/* 頁首右側 ----------------------------------------------------------- */
.topbar__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.whoami { font-size: .86rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.whoami__role {
  font-size: .72rem;
  color: var(--teal);
  background: var(--mist);
  border-radius: 3px;
  padding: 1px 6px;
}

/* 做成有框的按鈕，不然混在旁邊的文字裡看不出來可以點 */
.signout {
  font-size: .86rem;
  color: var(--teal);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 12px;
  background: var(--paper);
}
.signout:hover { background: var(--mist); border-color: var(--teal); }

/* 全部活動總覽（管理者） -------------------------------------------- */
.ledger {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;          /* 欄位多，窄螢幕橫向捲動 */
}
.ledger table { min-width: 60rem; }
.ledger th, .ledger td { padding: 8px 10px; vertical-align: top; font-size: .86rem; }
.ledger thead th { background: var(--mist); color: var(--deep); font-weight: 700; }
.ledger tbody tr:hover { background: var(--wash); }
.nowrap { white-space: nowrap; }
.ledger__reflection {
  max-width: 22rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ledger__thumb {
  width: 46px; height: 46px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-right: 4px;
}

/* 資料來源摺疊區（管理者） -------------------------------------------- */
.sources { margin-bottom: 18px; font-size: .84rem; color: var(--muted); }
.sources summary { cursor: pointer; }
.sources ul { margin: 8px 0 0; padding-left: 1.2rem; }
.sources code { background: var(--mist); padding: 1px 5px; border-radius: 3px; }

/* 班級一覽 ----------------------------------------------------------- */
.klasses {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.klasses li { position: relative; }
/* 刪除鈕疊在方框右上角。平常很淡，滑過去才明顯，
   避免點班級時誤觸。 */
.klass__remove { position: absolute; top: 10px; right: 10px; }
.klass__remove button {
  font: inherit; font-size: .76rem;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 4px;
  padding: 2px 8px; cursor: pointer;
}
.klasses li:hover .klass__remove button { border-color: var(--line); }
.klass__remove button:hover { color: var(--coral); border-color: var(--coral); background: #fdecf1; }
.klasses a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px;
  min-height: 7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 5px;
  text-decoration: none;
  color: var(--deep);
}
.klasses a:hover { background: var(--mist); }
.klass__name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; padding-right: 3.5rem; }
.klass__meta { font-size: .84rem; color: var(--muted); }
.klass__pending {
  margin-top: auto;
  align-self: flex-start;
  font-size: .76rem;
  color: #fff;
  background: var(--coral);
  border-radius: 3px;
  padding: 2px 8px;
}

.crumb { margin-bottom: 8px; font-size: .86rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--teal); }

/* 名單上「有新動態」的標示 */
.roster a.is-new {
  border-left-color: #ff2d55;
  border-left-width: 6px;
  padding-left: 11px;
}

/* About Me 的編輯 ---------------------------------------------------- */
.card__title--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-edit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .82rem; font-weight: 400;
  color: var(--teal); text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 9px;
}
.mini-edit:hover { background: var(--mist); border-color: var(--teal); }

.aim h3 { font-size: .84rem; color: var(--muted); font-weight: 400; margin: 0; }

.about-form { display: grid; gap: 6px; }
.about-form label { font-size: .84rem; color: var(--muted); }
.about-form textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  resize: vertical;
  margin-bottom: 6px;
}
.about-form textarea:focus { outline: none; border-color: var(--teal); }
.about-form__actions { display: flex; align-items: center; gap: 14px; }
.about-form__actions button {
  font: inherit; font-weight: 700; color: #fff;
  background: var(--teal); border: 0; border-radius: 4px;
  padding: 7px 22px; cursor: pointer;
}
.about-form__actions button:hover { background: #14536d; }
.about-form__actions a { font-size: .86rem; color: var(--muted); }

/* 管理者重設密碼 ------------------------------------------------------ */
.reset-pw { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.reset-pw button {
  font: inherit; font-size: .84rem;
  color: var(--coral); background: transparent;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 14px; cursor: pointer;
}
.reset-pw button:hover { border-color: var(--coral); background: #fdecf1; }

.pw-flash {
  background: #fdf6e3;
  border: 1px solid var(--amber);
  border-radius: 5px;
  padding: 12px 16px;
  margin-bottom: 14px;
  line-height: 1.8;
}
.pw-flash code {
  font-size: 1.15rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 10px;
  user-select: all;          /* 點一下就整串選起來，方便抄 */
}
.pw-flash__note { display: block; font-size: .82rem; color: var(--muted); }

.button--quiet {
  display: inline-block;
  color: var(--deep); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 14px; text-decoration: none; font-size: .86rem;
  margin-right: 8px;
}
.button--quiet:hover { background: var(--mist); }

/* 上傳班級 ----------------------------------------------------------- */
.uploader {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 18px;
}
.uploader__summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer;
  font-weight: 700; list-style: none;
}
.uploader__summary::-webkit-details-marker { display: none; }
.uploader[open] .uploader__summary { border-bottom: 1px solid var(--line); }
.uploader__form {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding: 18px;
}
.uploader__form > div { display: flex; flex-direction: column; gap: 6px; }
.uploader__form label { font-weight: 700; font-size: .9rem; }
.uploader__form input[type="file"] {
  font-size: .82rem; padding: 6px;
  border: 1px dashed var(--line); border-radius: 3px;
}
.uploader__form input:not([type="file"]) {
  font: inherit; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 3px;
}
.uploader__actions { justify-content: flex-end; }
.uploader__actions button {
  font: inherit; font-weight: 700; color: #fff;
  background: var(--teal); border: 0; border-radius: 4px;
  padding: 9px 28px; cursor: pointer;
}
.uploader__actions button:hover { background: #14536d; }
.uploader__note { padding: 0 18px 16px; margin: 0; }

.flash {
  border-radius: 5px; padding: 10px 14px; margin-bottom: 14px;
  font-size: .9rem;
}
.flash--ok { background: var(--mist); border: 1px solid var(--teal); }
.flash--warn { background: #fdf6e3; border: 1px solid var(--amber); }
.flash--error { background: #fdecf1; border: 1px solid var(--coral); color: #8d1440; }

/* 回到班級 ----------------------------------------------------------- */
.topbar__back {
  font-size: .86rem;
  color: var(--teal);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 12px;
  background: var(--paper);
  white-space: nowrap;
}
.topbar__back:hover { background: var(--mist); }

/* 自學時數進度 -------------------------------------------------------- */

/* 名單上的自學統計 ---------------------------------------------------- */
.roster__stat {
  margin-top: 4px;
  font-size: .76rem;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.roster__stat.is-none { color: #9db2bc; }
.roster__stat.is-done { color: #1d7a4f; font-weight: 700; }

/* 送出中的狀態 -------------------------------------------------------- */
.act-form__sending, .uploader__sending {
  margin-left: 12px;
  font-size: .84rem;
  color: var(--muted);
}
.act-form__actions button:disabled,
.uploader__actions button:disabled { background: #9db2bc; cursor: progress; }

/* 標題下方的統計列（仍在深青色區塊內）------------------------------- */
.tallybar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 4px;
  padding: 10px 18px;
  background: #17607c;              /* 比標題深一階，區隔但同一塊 */
  color: #eaf3f6;
  font-size: .88rem;
}
.tallybar__count { font-weight: 700; color: #fff; }
.tallybar__item { white-space: nowrap; }
.tallybar__sep { color: rgba(255, 255, 255, .45); }
.tallybar__item strong {
  font-size: 1.1rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* 新增／編輯表單的上半段 --------------------------------------------- */
.act-form { display: block; padding: 20px; }
.act-form__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 18px 24px;
  margin-bottom: 20px;
}

/* 分題反思 ------------------------------------------------------------ */
.reflect {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  background: var(--paper);
}
.reflect > legend {
  font-weight: 700;
  font-size: .9rem;
  padding: 0 8px;
  border: 0;
}
.reflect__q { display: grid; gap: 5px; margin-bottom: 12px; }
.reflect__q:last-child { margin-bottom: 0; }
.reflect__q label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .88rem;
  line-height: 1.5;
}
.reflect__n {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal);
  font-size: .76rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.reflect__q textarea {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  resize: vertical;
  line-height: 1.6;
  /* 桌機給大一點的起始高度；打字時 JS 會再往下長 */
  min-height: 5rem;
  overflow: hidden;
}
@media (max-width: 34rem) {
  .reflect__q textarea { min-height: 4rem; }
}
.reflect__q textarea:focus { outline: none; border-color: var(--teal); }

/* 呈現區的問答 -------------------------------------------------------- */
.qa { margin: 0; display: grid; gap: 9px; }
/* 寬螢幕時問題與答案並排，把橫向空間用掉，整塊的高度少一半 */
.qa__row { display: grid; gap: 2px; }
@media (min-width: 62rem) {
  .qa__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4px 14px; align-items: baseline; }
}
.qa dt {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}
.qa dd {
  margin: 0;
  padding-left: 9px;
  border-left: 2px solid var(--mist);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}