/* =========================================================
   Kindle WeatherCN —— 屏幕自适应样式
   适配：Kindle 3:4 屏（600x800 / 758x1024 / 1072x1448）
         手机尺寸墨水屏（HiSense A5/A7/A9、Boox Palma 等，18:9~21:9）
         普通手机 / 平板 / 桌面浏览器的横竖屏

   版式：顶部天气 → 大字时钟 → 中文台历卡片 → 预报条 → 周次/日出日落
   1) 由“绝对定位 + 百分比 top”改为 flex 纵向流式，细长屏不压字；
   2) 字号 vmin/vw/vh + clamp()，横竖屏自动保持比例；
   3) 墨水屏：小字加粗、纯黑纯白、无过渡动画、无阴影。
   ========================================================= */

@font-face {
    font-family: electronicFont;
    src: url("./solari-departures.ttf");
}

@font-face {
    font-family: DigFont;
    src: url("./neat-lcd.ttf");
}

/* ---------------- 主题变量 ---------------- */
:root {
    --fg: #000000;
    --bg: #ffffff;
    /* 日号主色：纯黑，黑白墨水屏最锐利；想用朱红可改成 #8f1f1f */
    --accent: #000000;

    /* 外边距 / 间隙 / 线宽：以屏幕短边为基准自动缩放 */
    --pad: 10px;
    --pad: clamp(8px, 2.8vmin, 26px);
    --gap: 6px;
    --gap: clamp(4px, 1.8vmin, 18px);
    --rule: 3px;
    --rule: clamp(2px, 0.8vmin, 6px);

    /* 时钟。min(38vw,32vh) 兼顾细长竖屏与横屏；JS 会按文字实际宽度微调并写入 --clock-fit */
    --clock: 21vmin;
    --clock: clamp(46px, min(38vw, 32vh), 210px);

    /* 天气图标（顶部） */
    --top-icon: 24px;
    --top-icon: clamp(20px, 7vmin, 48px);

    --city: 16px;
    --city: clamp(14px, 4.8vmin, 44px);
    --desc: 14px;
    --desc: clamp(11px, 3.7vmin, 34px);
    /* 实时温度：顶部右侧，独立成块，不与天气描述抢空间 */
    --temp-now: 22px;
    --temp-now: clamp(18px, 6.4vmin, 52px);
    --sun: 11px;
    --sun: clamp(10px, 3.1vmin, 26px);

    /* 台历卡片（跟随 JS 拟合后的时钟字号 --clock-fit，保持比例一致） */
    --cal-day: 46px;
    --cal-day: clamp(40px, calc(var(--clock-fit, var(--clock)) * 0.62), 140px);
    --cal-meta: 13px;
    --cal-meta: clamp(12px, calc(var(--clock-fit, var(--clock)) * 0.15), 32px);
    --cal-week: 18px;
    --cal-week: clamp(16px, calc(var(--clock-fit, var(--clock)) * 0.21), 42px);
    --cal-lunar: 13px;
    --cal-lunar: clamp(12px, calc(var(--clock-fit, var(--clock)) * 0.155), 32px);
    --cal-ganzhi: 11px;
    --cal-ganzhi: clamp(10px, calc(var(--clock-fit, var(--clock)) * 0.115), 24px);

    /* 预报条 */
    --fc-time: 12px;
    --fc-time: clamp(10px, 3.6vmin, 32px);
    --fc-icon: 26px;
    --fc-icon: clamp(18px, 7.6vmin, 56px);
    --fc-temp: 13px;
    --fc-temp: clamp(11px, 4.2vmin, 32px);
    --fc-desc: 10px;
    --fc-desc: clamp(9px, 3vmin, 24px);
}

/* 夜间模式：整体反色 */
html.night {
    --fg: #ffffff;
    --bg: #000000;
    --accent: #ffffff;
}

/* ---------------- 基础 ---------------- */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
}

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
        "Source Han Sans SC", "Microsoft YaHei", Arial, Helvetica, sans-serif;
    font-size: 16px;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: none;
    transition: none;
}

a {
    color: inherit;
    background: transparent;
    text-decoration: none;
}

/* 全屏刷新（消残影）遮罩 */
#cleaner {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none;
}

/* ---------------- 主容器 ---------------- */
#page {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: var(--pad);
    padding-top: calc(var(--pad) + env(safe-area-inset-top, 0px));
    padding-right: calc(var(--pad) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--pad) + env(safe-area-inset-left, 0px));
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
}

/* ---------------- 顶部：天气图标 + 城市 + 天气 ---------------- */
.topbar {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: calc(var(--gap) * 0.9);
    width: 100%;
}

#iconWrapper {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    line-height: 1;
}

#icon {
    display: inline-block;
    font-size: var(--top-icon);
    line-height: 1;
    text-align: center;
}

#city {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--city);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    /* 触控热区，手机上好点进设置页 */
    padding: 0.1em 0.1em;
    min-height: 1.5em;
}

#description {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--desc);
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
}

/* 右侧：天气描述 + 实时温度 */
.weatherNow {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    gap: calc(var(--gap) * 0.8);
    max-width: 58%;
    min-width: 0;
}

/* 温度：加粗放大，单位符号略小 */
#temp {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: var(--temp-now);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

#temp .unit {
    font-size: 0.62em;
    font-weight: 700;
}

/* ---------------- 中部：时钟 + 台历卡片 ---------------- */
.clockArea {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: calc(var(--gap) * 1.1);
    width: 100%;
    overflow: hidden;
}

#lastUpdate {
    width: 100%;
    font-family: electronicFont, "PingFang SC", Arial, sans-serif;
    font-size: var(--clock);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

/* ---------------- 中文台历卡片 ---------------- */
.calCard {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: calc(var(--gap) * 1.1) calc(var(--gap) * 1.3);
    border: 1px solid var(--fg);
    background: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--gap) * 0.55);
    overflow: hidden;
}

.calMain {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: calc(var(--gap) * 1.2);
    width: 100%;
}

/* 大日号：衬线体，最抢眼的第一层级 */
.calDay {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: var(--cal-day);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: -0.02em;
    color: var(--accent);
    font-variant-numeric: lining-nums tabular-nums;
    text-align: center;
    min-width: 1em;
}

.calMeta {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: calc(var(--gap) * 0.2);
    overflow: hidden;
}

/* 年月：第二层级 */
.calMonth {
    font-size: var(--cal-meta);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 星期：第三层级，加粗拉大字距，抵住日号 */
.calWeek {
    font-size: var(--cal-week);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 细分隔线，把公历和农历分开 */
.calRule {
    height: 1px;
    width: 100%;
    background: var(--fg);
    margin: calc(var(--gap) * 0.15) 0;
}

/* 农历：宋体加粗，端庄 */
.calLunar {
    font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;
    font-size: var(--cal-lunar);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 干支：最弱层级 */
.calGanzhi {
    font-size: var(--cal-ganzhi);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- 底部：周次 / 日出日落 ---------------- */
#sun {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: calc(var(--gap) * 0.6) calc(var(--gap) * 1.6);
    width: 100%;
    padding: 0.15em 0;
    font-size: var(--sun);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.sunItem {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.2em;
    white-space: nowrap;
}

/* ---------------- 预报条 ---------------- */
.forecast {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 100%;
    margin: calc(var(--gap) * 0.6) 0;
    padding: calc(var(--gap) * 0.7) 0;
    border-top: var(--rule) solid var(--fg);
    border-bottom: var(--rule) solid var(--fg);
}

.col {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: calc(var(--gap) * 0.3);
    padding: 0 calc(var(--gap) * 0.3);
    border-left: 1px solid var(--fg);
    text-align: center;
    overflow: hidden;
}

.col:first-child {
    border-left: none;
}

.colTime {
    font-size: var(--fc-time);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.forecastIconWrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: var(--fc-icon);
    line-height: 1;
}

.colIcon {
    display: inline-block;
    line-height: 1;
    text-align: center;
}

.colTemp {
    font-size: var(--fc-temp);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.colDesc {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--fc-desc);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 竖屏只显示 4 列，保证字号可读 */
.portrait .col5 {
    display: none;
}

/* 窄屏（<=380px）卡片内边距收紧一点，给日号和文字更多空间 */
@media (max-width: 380px) {
    .calCard {
        padding: calc(var(--gap) * 0.9) calc(var(--gap) * 1.1);
    }
}

/* ---------------- 横屏：时钟与台历左右并排 ---------------- */
.landscape .clockArea {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: calc(var(--gap) * 1.6);
    width: 100%;
}

.landscape #lastUpdate {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.landscape .calCard {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    /* 撑满行高，让竖分隔线贯穿整块区域，视觉上更像“左钟右历” */
    -webkit-align-self: stretch;
    align-self: stretch;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 46%;
    max-width: 52%;
    border-left: 1px solid var(--fg);
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 0 0 0 calc(var(--gap) * 1.4);
}

/* 很矮的横屏（手机墨水屏 780x360 之类）：再收紧一档 */
html.short #lastUpdate {
    font-size: calc(var(--clock) * 0.92);
}

html.short .clockArea {
    gap: calc(var(--gap) * 0.6);
}

html.short .calCard {
    padding-top: 0;
    padding-bottom: 0;
    gap: calc(var(--gap) * 0.35);
}

html.short .forecast {
    padding: calc(var(--gap) * 0.45) 0;
    margin: calc(var(--gap) * 0.35) 0;
}

html.short .forecastIconWrapper {
    font-size: calc(var(--fc-icon) * 0.85);
}

/* ---------------- 老内核（Kindle 老浏览器）不支持 flex 时的退化布局 ---------------- */
@supports not (display: flex) {
    .topbar,
    #sun {
        text-align: center;
    }

    .col {
        float: left;
        width: 24.5%;
    }

    .landscape .col {
        width: 19.5%;
    }

    .calCard {
        border: 1px solid var(--fg);
    }
}