/*
  board-web / M1 像素复刻样式
  —— 所有尺寸都以视口为基准（1920x1080 为设计基线，1vw ≈ 19.2px），
     这样 1080p / 1440p / 4K 一体机上比例一致，不需要多套样式。
*/

:root {
  --bg: #2f493c;
  --panel: #395848;
  --panel-inner: #416350;
  --accent: #f2c14e;
  --text: #f3f6f2;
  --muted: #b9c9be;

  --radius-panel: 0.7vw;
  --radius-card: 0.55vw;
  --gap-col: 2.4vw;

  --fs-title: 2.7vw;
  --fs-date: 1.22vw;
  --fs-clock: 3.05vw;
  --fs-days: 4.3vw;
  --fs-count-label: 1.2vw;
  --fs-count-sub: 1.02vw;
  --fs-panel: 1.5vw;
  --fs-body: 1.52vw;
  --fs-chip: 1.18vw;
  --fs-todo: 1.55vw;
  --fs-tt: 1.42vw;
  --fs-strip: 1.1vw;
  --fs-strip-lead: 1.5vw;
  --fs-strip-title: 1.3vw;
  --fs-strip-sign: 0.98vw;
  --fs-footer: 1.18vw;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/*
  垂直居中：整块内容（问候条 + 主体 + 寄语）作为一个整体在屏幕里上下居中，
  高度不再写死 top/bottom 百分比——换分辨率、加减板块都不会贴顶或压底。
*/
.board {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.board-inner {
  display: flex;
  flex-direction: column;
  padding: 0 5.4% 0 32.4%; /* 左侧 32.4% 让给桌面图标列 */
  min-height: 0;
}

/* 链路提示：断网时屏幕右上角一行小字，落在内容上方的空白里——不挤内容、不压页脚、
   也不和任务栏抢位置（右下角会被任务栏和寄语那一行夹住）。联网时 hidden，不占位。 */
.bo-link {
  position: absolute;
  right: 2.4%;
  top: 2.4vh;
  font-size: 0.95vw;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.9;
}

/* ---------- 顶部：问候 + 日期 / 时钟 + 倒计时 ---------- */

.hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4.4vh;
}

.hd-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.hd-date {
  margin-top: 1.1vh;
  font-size: var(--fs-date);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.hd-meta {
  display: flex;
  align-items: center;
  padding-top: 0.4vh;
}

.hd-clock {
  font-size: var(--fs-clock);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}

.hd-rule {
  width: 1px;
  height: 4.2vh;
  margin: 0 2.2vw 0 2.4vw;
  background: var(--muted);
  opacity: 0.55;
}

.hd-count {
  display: flex;
  align-items: center;
  gap: 1.1vw;
}

.hd-days {
  font-size: var(--fs-days);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hd-count-side { padding-top: 0.4vh; }

.hd-count-label {
  font-size: var(--fs-count-label);
  color: var(--text);
  letter-spacing: 0.06em;
}

.hd-count-sub {
  margin-top: 0.7vh;
  font-size: var(--fs-count-sub);
  color: var(--muted);
}

/* ---------- 主体：三处落位区（左主栏 / 右侧栏 / 底部通栏） ---------- */

.main {
  display: grid;
  grid-template-columns: 58.6% 36.4%;
  grid-template-rows: auto auto;
  column-gap: 3%;
  row-gap: 2.4vh;
  justify-content: space-between;
  min-height: 0;
}

.col-main,
.col-side {
  display: flex;
  flex-direction: column;
  gap: 1.8vh;
  min-height: 0;
}

.col-main {
  grid-column: 1;
  grid-row: 1;
}

.col-side {
  grid-column: 2;
  grid-row: 1;
  padding-top: 3.4vh;
}

/* 板块高度按内容算（basis=auto），只在落位区被拉高时才按比例吃掉多出来的空间。
   不能用 flex:1 1 0——容器高度也是内容决定的，basis 0 会让每块塌成 0 高再溢出重叠。 */
.col-main > .panel,
.col-side > .panel {
  flex: 1 1 auto;
}

/*
  有底部通栏时（.board.has-strip）内部间距收一档：内容变多了，靠密度换高度。
  现在高度是内容自然决定的（不再写死 top/bottom），所以这一档只影响观感、不影响溢出。
*/
.board.has-strip .hw-list {
  gap: 0.85vh;
}

.board.has-strip .hw-row {
  padding: 0.8vh 1.1vw 0.8vh 1vw;
}

.board.has-strip .hw-items {
  gap: 0.7vh;
}

.board.has-strip .panel-head {
  margin-bottom: 1.8vh;
}

.board.has-strip .tt-grid {
  row-gap: 1.4vh;
}

/* 底部通栏：值日 / 通知 / 天气这类紧凑信息卡（标题在上、内容在下），没有就整行塌掉 */
.strip {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 1.4vw;
  align-items: stretch;
}

.strip:empty {
  display: none;
}

.panel.panel-strip {
  flex: 1 1 0;
  min-width: 0; /* 必须：否则长文本的 min-content 会把卡片撑开，滚动永远触发不了 */
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1.3vh 1.5vw 1.4vh;
}

.panel.panel-strip .panel-head {
  flex: 0 0 auto;
  gap: 0.5vw;
  margin-bottom: 0.9vh;
}

.panel.panel-strip .panel-bar {
  width: 0.24vw;
  height: 2.1vh;
  border-radius: 0.12vw;
}

.panel.panel-strip .panel-title {
  font-size: var(--fs-strip-title);
  white-space: nowrap;
}

/* 通栏卡里内容区吃掉剩余高度，内容本身仍是一行说完的横排 */
.panel.panel-strip .strip-items,
.panel.panel-strip .notice-body,
.panel.panel-strip .weather-body,
.panel.panel-strip .hygiene-body,
.panel.panel-strip .event-body {
  flex: 1 1 auto;
  align-content: center;
  min-width: 0;
}

/* ---------- 板块内容：值日 / 通知 / 天气 / 卫生 / 活动 ---------- */

.strip-items {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.5vw;
}

.duty-chip {
  background: var(--panel-inner);
  border-radius: 0.36vw;
  padding: 0.35vh 0.7vw;
  font-size: var(--fs-strip);
  color: var(--text);
  white-space: nowrap;
}

.notice-body {
  display: flex;
  align-items: baseline;
  gap: 0.6vw;
  flex-wrap: wrap;
}

.notice-text {
  font-size: var(--fs-strip);
  line-height: 1.45;
  color: var(--text);
}

.notice-sign {
  font-size: var(--fs-strip-sign);
  color: var(--muted);
  white-space: nowrap;
}

.weather-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4vw 0.8vw;
}

.weather-text {
  font-size: var(--fs-strip-lead);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.weather-tip,
.weather-place {
  font-size: var(--fs-strip);
  color: var(--muted);
}

.hygiene-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4vw 0.7vw;
}

.hygiene-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2vw;
  padding: 0.25vh 0.5vw;
  border-radius: 0.36vw;
  font-size: var(--fs-strip-lead);
  font-weight: 700;
  color: #fff;
}

.hygiene-score {
  font-size: var(--fs-strip);
  color: var(--text);
  white-space: nowrap;
}

.hygiene-note {
  font-size: var(--fs-strip);
  color: var(--muted);
}

.event-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3vw 0.6vw;
}

.event-name {
  font-size: var(--fs-strip-lead);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.event-days {
  font-size: var(--fs-strip-lead);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.event-unit {
  font-size: var(--fs-strip);
  color: var(--accent);
}

.event-note {
  font-size: var(--fs-strip-sign);
  color: var(--muted);
}

/* 放到侧栏/主栏（竖卡）时，数字放大一档 */
.panel:not(.panel-strip) .event-days,
.panel:not(.panel-strip) .weather-text {
  font-size: 2.2vw;
}

.panel:not(.panel-strip) .event-body,
.panel:not(.panel-strip) .weather-body,
.panel:not(.panel-strip) .hygiene-body,
.panel:not(.panel-strip) .notice-body {
  font-size: 1.3vw;
}

.panel {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius-panel);
  padding: 2.2% 2.8% 2.6%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- 长文本：一行放不下就横向滚动，不换行不挤行 ---------- */

.scroller {
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.scroller > .scroller-in {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* 位移由 board.js 的 rAF 写入（不用 CSS animation：虚拟时间/截图下更好复现） */
.scroller.is-overflow > .scroller-in {
  transition: none;
}

/* 通栏 / 寄语里的滚动项：按内容宽度排，只有真放不下时才收缩并滚动 */
.notice-body .scroller,
.weather-body .scroller,
.event-body .scroller,
.hygiene-body .scroller {
  flex: 0 1 auto;
}

.ft-quote.scroller {
  flex: 1 1 auto;
  margin-right: 2.4vw;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  margin-bottom: 2.6vh;
}

.panel-bar {
  width: 0.3vw;
  height: 2.6vh;
  border-radius: 0.15vw;
  background: var(--accent);
}

.panel-title {
  font-size: var(--fs-panel);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* 左：作业 */

.hw-list {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  min-height: 0;
}

.hw-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2vw;
  background: var(--panel-inner);
  border-radius: var(--radius-card);
  padding: 1.2vh 1.1vw 1.2vh 1vw;
}

.hw-chip {
  flex: 0 0 auto;
  min-width: 4.2vw;
  padding: 0.55vh 0.7vw;
  border-radius: 0.42vw;
  font-size: var(--fs-chip);
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: 0.04em;
}

.hw-items {
  display: flex;
  flex-direction: column;
  gap: 1.0vh;
  padding-top: 0.35vh;
  min-width: 0;
}

.hw-item {
  display: flex;
  gap: 0.25vw;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text);
}

.hw-no { flex: 0 0 auto; }

.hw-text { min-width: 0; }

/* 右侧：待办 */

.todo-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  font-size: var(--fs-todo);
  line-height: 1.45;
}

.todo-item {
  display: flex;
  gap: 0.25vw;
}

/* 右侧：课表（列优先：1/2/3 左列、4/5/6 右列） */

.tt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 1.4vw;
  row-gap: 1.7vh;
  align-content: start;
}

.tt-cell {
  display: flex;
  align-items: center;
  gap: 0.65vw;
  font-size: var(--fs-tt);
}

.tt-no {
  flex: 0 0 auto;
  width: 2.15vw;
  height: 2.15vw;
  border-radius: 0.42vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-tt);
  color: #fff;
}

/* ---------- 底部寄语 ---------- */

.ft {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 3vh;
  font-size: var(--fs-footer);
  color: var(--muted);
}

.ft-quote { letter-spacing: 0.03em; }

.ft-sign { font-size: 0.92vw; }