/* ═══════════════════════════════════════════════════════════════
   情侣日记 · 日期看板 / 单篇详情 / 图片（A3）
   ───────────────────────────────────────────────────────────────
   硬约定（D-029）：本文件只使用主题变量（frontend/themes/*.css）：
     --surface / --bg / --border / --border-strong / --text /
     --text-secondary / --text-muted / --text-inverse /
     --accent / --accent-soft / --accent-gradient /
     --radius / --radius-sm / --radius-lg / --shadow-sm|md|lg /
     --ease-spring / --ease-smooth / --font-sans
   这些变量在 base.css 的 :root 里有全站默认值，且被每个主题
   （couple-pink / tech-blue / dark-mode / hello-kitty 等）按需覆盖，
   因此用户切换任何主题时本界面自动跟随，无需为每个主题写一遍。
   本文件**不含任何字面色值 / 字面圆角 / 字面字体 / 字面阴影**。
   ═══════════════════════════════════════════════════════════════ */

/* ── 日期看板 ────────────────────────────────────────────────── */
.diary-dateboard {
    background: var(--surface);
    /* 玻璃拟态：与全站卡片同一套观感；不支持 color-mix 时退回上面的 --surface */
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px 12px;
    margin-bottom: 18px;
    max-width: 520px;
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
}

.diary-dateboard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.diary-dateboard-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    min-width: 116px;
    text-align: center;
    font-family: var(--font-sans);
}

.diary-dateboard-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background 0.2s var(--ease-smooth),
                color 0.2s var(--ease-smooth),
                border-color 0.2s var(--ease-smooth);
}
.diary-dateboard-nav:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.diary-dateboard-spacer { flex: 1; }

.diary-dateboard-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.diary-dateboard-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding-bottom: 6px;
}

.diary-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s var(--ease-smooth),
                color 0.2s var(--ease-smooth),
                transform 0.15s var(--ease-spring);
}
.diary-day.is-empty {
    cursor: default;
    opacity: 0.4;
}
.diary-day.has-entry {
    color: var(--text);
    font-weight: 600;
}
.diary-day.has-entry::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}
.diary-day.is-today {
    border-color: var(--accent);
}
.diary-day.is-selected,
.diary-day.is-selected.has-entry {
    background-image: var(--accent-gradient);
    color: var(--text-inverse);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}
.diary-day.is-selected::after { background: var(--text-inverse); }
.diary-day:not(.is-empty):not(.is-selected):hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.diary-dateboard-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.diary-datechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}
.diary-datechip-clear {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

/* ── 卡片上的「日记日期」徽标 ────────────────────────────────── */
.diary-card-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap;
}

/* ── 单篇详情 ────────────────────────────────────────────────── */
.diary-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.diary-detail-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.diary-detail-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}
.diary-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
}
.diary-detail-content {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-secondary);
    line-height: 1.75;
    word-break: break-word;
}
.diary-detail-content img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.diary-detail-content h1,
.diary-detail-content h2,
.diary-detail-content h3 {
    color: var(--text);
    line-height: 1.4;
}
.diary-detail-content a { color: var(--accent); }
.diary-detail-content blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}
.diary-detail-content code {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    font-family: var(--font-mono);
    color: var(--accent);
}

/* ── 图片展示 ────────────────────────────────────────────────── */
.diary-detail-hero {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--surface);
}
.diary-detail-hero img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}
.diary-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.diary-detail-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    transition: transform 0.2s var(--ease-spring),
                box-shadow 0.2s var(--ease-spring),
                border-color 0.2s var(--ease-smooth);
}
.diary-detail-gallery img:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* 卡片缩略图：沿用 style.css 的玻璃卡片观感，仅补 hover 细节 */
.diary-card-images img {
    transition: transform 0.25s var(--ease-spring),
                box-shadow 0.25s var(--ease-spring);
}
.diary-card-images img:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

/* 正文里的内联图片：限高，避免一张大图把时间线撑爆（详情页里才放开看大图） */
.diary-card-body img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* ── 新建 / 编辑日记：日期选择 ───────────────────────────────── */
/* 选择器带 .modal-form 是为了压过 style.css 里 `.form-group input`
   （那条规则用的是写死的 rgba 玻璃色；这里换成主题变量版的同一观感） */
.modal-form .diary-date-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 38%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s var(--ease-smooth),
                box-shadow 0.2s var(--ease-smooth);
}
.modal-form .diary-date-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.diary-quick-dates {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.diary-quick-date {
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s var(--ease-smooth),
                color 0.2s var(--ease-smooth),
                border-color 0.2s var(--ease-smooth);
}
.diary-quick-date:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.form-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── 时间线分组（按月/日期浏览时的定位条） ───────────────────── */
.diary-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.diary-group-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

@media (max-width: 560px) {
    .diary-dateboard { padding: 12px 10px 10px; }
    .diary-dateboard-title { min-width: 96px; font-size: 14px; }
    .diary-day { font-size: 12px; }
    .diary-detail-title { font-size: 18px; }
}