/* ============================================================================
   candywebV2 —— 侧边栏
   ----------------------------------------------------------------------------
   左：快速分类导航（导航 / 书签分类 / 最新文章）
   右：日历（农历·节气·国内外节日·休班）· 倒计时 · 天气 · 热门新闻

   三条铁律：
     1. 颜色只写 var(--c-*)，跟九套风格一起变，改主题不用碰这个文件。
     2. 侧边栏内容全部静态可读（模板渲染的），JS 只做增强；
        凡是"要等 JS 才有内容"的元素都带 .ws-live，<noscript> 里整片藏掉，
        免得没 JS 时留下几个空标题。
     3. 任何一块拉不到数据（断网 / 接口挂了）都只在自己格子里说一句，
        绝不影响正文，也绝不把页面撑成空白。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 三栏骨架
   --------------------------------------------------------------------------- */
/* 侧边栏要占宽度，所以这里不复用 .wrap 的 1240px，放宽到 1520px；
   正文列用 minmax(0,1fr) 而不是 1fr —— 否则长网址会把网格撑爆。
   窄屏下的降级见文件末尾的响应式段。 */
.layout {
    width: min(1520px, 100% - 2.5rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr) 316px;
    gap: 1.5rem;
    align-items: start;
}
.layout__main { min-width: 0; }

.sidebar { min-width: 0; font-size: .86rem; }
/* 左栏是导航，做成"贴住不动、内部自己滚"的轨道，
   长文章滚到哪儿都能随手切分类。右栏内容太长，跟着页面滚更自然。 */
.sidebar--left {
    position: sticky; top: 78px;
    max-height: calc(100vh - 96px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 2px;
}
.sidebar--left::-webkit-scrollbar { width: 6px; }
.sidebar--left::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

/* ---------------------------------------------------------------------------
   2. 卡片
   --------------------------------------------------------------------------- */
.side-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--c-radius); box-shadow: var(--c-shadow);
    padding: .85rem .9rem; margin-bottom: .9rem;
}
.side-card__title {
    display: flex; align-items: center; gap: .4rem;
    margin: 0 0 .65rem; font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--c-dim);
}
.side-card__n {
    margin-inline-start: auto; font-size: .68rem; letter-spacing: 0;
    color: var(--c-accent); padding: .05rem .4rem; border-radius: 999px;
    background: color-mix(in srgb, var(--c-accent) 14%, transparent);
}
.side-card__act {
    margin-inline-start: auto; cursor: pointer; font: inherit; font-size: .92rem;
    line-height: 1; padding: .1rem .3rem; border-radius: 6px;
    color: var(--c-dim); background: none; border: 1px solid transparent;
}
.side-card__act:hover { color: var(--c-accent); border-color: var(--c-border); }
.side-card__note { margin: 0; font-size: .8rem; color: var(--c-dim); }
.side-card__foot {
    margin: .55rem 0 0; font-size: .7rem; color: var(--c-dim);
    padding-top: .5rem; border-top: 1px dashed var(--c-border);
}
.side-card__err { color: var(--c-dim); font-size: .8rem; margin: 0; }
.side-card__err a { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   3. 左栏：导航 / 分类 / 文章
   --------------------------------------------------------------------------- */
.side-nav, .side-cats, .side-subs, .side-posts {
    list-style: none; margin: 0; padding: 0;
}
.side-nav a {
    display: flex; align-items: center; gap: .5rem;
    padding: .38rem .5rem; border-radius: calc(var(--c-radius) * .6);
    color: var(--c-dim); font-weight: 500;
}
.side-nav a:hover { color: var(--c-text); background: var(--c-surface-2); }
.side-nav a.is-active { color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 10%, transparent); }
.side-nav__ico { width: 1.1em; text-align: center; }
.side-nav__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-cats > li { margin-bottom: .1rem; }
.side-cats a {
    display: flex; align-items: center; gap: .5rem;
    padding: .32rem .5rem; border-radius: calc(var(--c-radius) * .55);
    color: var(--c-text);
}
.side-cats > li > a { font-weight: 600; }
.side-cats a:hover { background: var(--c-surface-2); color: var(--c-accent); }
.side-cats__ico { width: 1.05em; text-align: center; color: var(--c-accent); font-size: .9em; }
.side-cats__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cats__n, .side-subs__n {
    margin-inline-start: auto; font-size: .68rem; color: var(--c-dim);
    font-weight: 400; font-variant-numeric: tabular-nums;
}
.side-subs { margin: 0 0 .25rem .85rem; padding-left: .5rem; border-left: 1px solid var(--c-border); }
.side-subs a {
    padding: .22rem .45rem; font-size: .8rem; color: var(--c-dim); font-weight: 400;
}
.side-subs__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-posts a {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .3rem .5rem; border-radius: calc(var(--c-radius) * .55);
    color: var(--c-dim); font-size: .83rem;
}
.side-posts a:hover { color: var(--c-text); background: var(--c-surface-2); }
.side-posts__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-posts__d {
    margin-inline-start: auto; flex: 0 0 auto; font-size: .7rem;
    color: var(--c-dim); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   4. 右栏 · 日历
   --------------------------------------------------------------------------- */
.cal-today { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.cal-today__d {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.5rem; font-weight: 800; line-height: 1;
    color: var(--c-accent-ink);
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    box-shadow: 0 6px 18px -8px var(--c-glow);
    font-variant-numeric: tabular-nums;
}
.cal-today__meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cal-today__ym { font-weight: 700; font-size: .95rem; color: var(--c-text); }
.cal-today__wd { font-size: .8rem; color: var(--c-accent); font-weight: 600; }
.cal-today__lunar { font-size: .74rem; color: var(--c-dim); }

/* 今天的节日 / 放假 / 补班 —— 当天最该一眼看到的那条 */
.cal-flag {
    margin: 0 0 .7rem; padding: .38rem .6rem; font-size: .78rem; line-height: 1.45;
    border-radius: calc(var(--c-radius) * .6);
    background: var(--c-surface-2); border-left: 3px solid var(--c-accent);
    color: var(--c-text);
}
.cal-flag:empty { display: none; }
.cal-flag .cal-flag__off { color: #e5686d; font-weight: 600; }
.cal-flag .cal-flag__work { color: var(--c-accent); font-weight: 600; }
.cal-flag .cal-flag__fest { color: var(--c-accent); font-weight: 600; }

.cal-month__bar {
    display: flex; align-items: center; gap: .2rem; margin-bottom: .4rem;
}
.cal-month__label {
    flex: 1; text-align: center; font-weight: 700; font-size: .88rem;
    font-variant-numeric: tabular-nums; color: var(--c-text);
}
.cal-month__nav, .cal-month__today {
    cursor: pointer; font: inherit; line-height: 1;
    color: var(--c-dim); background: none; border: 1px solid transparent;
    border-radius: 6px; padding: .18rem .34rem;
}
.cal-month__nav { font-size: 1.05rem; }
.cal-month__nav:hover, .cal-month__today:hover {
    color: var(--c-accent); border-color: var(--c-border); background: var(--c-surface-2);
}
.cal-month__today { font-size: .7rem; }

.cal-head, .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
.cal-head { margin-bottom: .25rem; }
.cal-head span {
    text-align: center; font-size: .68rem; color: var(--c-dim); font-weight: 600;
}
.cal-head span:first-child, .cal-head span:last-child { color: var(--c-accent); }

.cal-d {
    cursor: pointer; font: inherit; padding: .22rem .05rem .18rem;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0; min-height: 38px;
    background: none; border: 1px solid transparent;
    border-radius: 7px; color: var(--c-text);
    transition: background .15s, border-color .15s;
}
.cal-d:hover { background: var(--c-surface-2); border-color: var(--c-border); }
.cal-d__s { font-size: .8rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cal-d__l {
    font-size: .58rem; line-height: 1.2; color: var(--c-dim);
    max-width: 100%; overflow: hidden; white-space: nowrap;
    transform: scale(.95); transform-origin: center top;
}
/* 非本月的日子淡一点，但仍然可点（点了就跳过去） */
.cal-d.is-other .cal-d__s, .cal-d.is-other .cal-d__l { opacity: .34; }
/* 今天：实心圆 */
.cal-d.is-today { background: var(--c-accent); color: var(--c-accent-ink); }
.cal-d.is-today .cal-d__s { font-weight: 800; }
.cal-d.is-today .cal-d__l { color: var(--c-accent-ink); opacity: .85; }
.cal-d.is-today:hover { background: var(--c-accent); }
/* 选中（点了想看详情的那天） */
.cal-d.is-sel { border-color: var(--c-accent); }
/* 有节日：数字用主色 + 农历位换节日名 */
.cal-d.is-fest .cal-d__s { color: var(--c-accent); font-weight: 700; }
.cal-d.is-fest .cal-d__l { color: var(--c-accent); font-weight: 600; }
.cal-d.is-today.is-fest .cal-d__s, .cal-d.is-today.is-fest .cal-d__l { color: var(--c-accent-ink); }
/* 法定放假：数字套个暖色底 */
.cal-d.is-off .cal-d__s {
    color: #fff; background: #e5686d; border-radius: 999px;
    padding: 0 .3rem; font-weight: 700;
}
.cal-d.is-today.is-off { background: var(--c-surface-2); }
/* 补班：农历位换成"班"字 */
.cal-d.is-work .cal-d__l { color: #e5686d; font-weight: 700; }

.cal-detail {
    margin: .5rem 0 0; padding-top: .5rem; font-size: .76rem; line-height: 1.5;
    color: var(--c-dim); border-top: 1px dashed var(--c-border); min-height: 1.5em;
}
.cal-detail b { color: var(--c-text); }
.cal-detail .cal-detail__off { color: #e5686d; font-weight: 600; }
.cal-detail .cal-detail__work { color: var(--c-accent); font-weight: 600; }

.cal-fests { margin-top: .75rem; }
.cal-fests__title {
    margin: 0 0 .35rem; font-size: .7rem; letter-spacing: .1em;
    color: var(--c-dim); text-transform: uppercase;
}
.cal-fests__list { list-style: none; margin: 0; padding: 0; }
.cal-fests__list li {
    display: flex; align-items: baseline; gap: .45rem;
    padding: .22rem .3rem; border-radius: 6px; cursor: pointer;
    font-size: .78rem; color: var(--c-dim);
}
.cal-fests__list li:hover { background: var(--c-surface-2); color: var(--c-text); }
.cal-fests__d { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--c-dim); }
.cal-fests__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-fests__n.is-intl { color: var(--c-accent-2); }
.cal-fests__days { margin-inline-start: auto; flex: 0 0 auto; font-size: .7rem; color: var(--c-accent); }

/* 该年放假安排未公布时的说明。平时 hidden，不占位。 */
.cal-offnote {
    margin: .6rem 0 0; padding: .4rem .55rem;
    border-radius: calc(var(--c-radius) * .6);
    border: 1px dashed var(--c-border);
    background: var(--c-surface-2);
    font-size: .72rem; line-height: 1.55; color: var(--c-dim);
}

/* ---------------------------------------------------------------------------
   5. 右栏 · 倒计时
   --------------------------------------------------------------------------- */
.cd-list { list-style: none; margin: 0 0 .55rem; padding: 0; }
.cd-list li {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .26rem .1rem; border-bottom: 1px dashed var(--c-border);
}
.cd-list li:last-child { border-bottom: 0; }
.cd-list__k { color: var(--c-dim); font-size: .8rem; }
.cd-list__v {
    margin-inline-start: auto; font-weight: 700; font-size: .9rem;
    color: var(--c-text); font-variant-numeric: tabular-nums;
}
.cd-list__v small { font-weight: 500; font-size: .72rem; color: var(--c-dim); margin-left: .1rem; }

.cd-next {
    padding: .45rem .6rem; border-radius: calc(var(--c-radius) * .6);
    background: color-mix(in srgb, var(--c-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 26%, transparent);
    font-size: .78rem; color: var(--c-text); line-height: 1.5;
}
.cd-next b { color: var(--c-accent); }
.cd-next span { color: var(--c-dim); }

/* ---------------------------------------------------------------------------
   6. 右栏 · 天气
   --------------------------------------------------------------------------- */
.wx__now {
    display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
}
.wx__ico { font-size: 1.9rem; line-height: 1; }
.wx__temp {
    font-size: 1.5rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--c-text);
}
.wx__temp sup { font-size: .7em; font-weight: 600; color: var(--c-dim); }
.wx__desc { font-size: .82rem; color: var(--c-dim); }
.wx__where {
    font-size: .74rem; color: var(--c-dim); margin: 0 0 .5rem;
    display: flex; align-items: baseline; gap: .35rem;
}
.wx__where b { color: var(--c-accent); font-weight: 600; }
.wx__where span { margin-inline-start: auto; }

.wx__days { display: flex; flex-direction: column; gap: .15rem; }
.wx__day {
    display: flex; align-items: center; gap: .5rem;
    font-size: .78rem; padding: .18rem .1rem;
    border-top: 1px dashed var(--c-border);
}
.wx__day:first-child { border-top: 0; }
.wx__day__k { flex: 0 0 auto; color: var(--c-dim); }
.wx__day__i { flex: 0 0 auto; }
.wx__day__v {
    margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--c-text);
}
.wx__day__v em { font-style: normal; color: var(--c-dim); }

.wx-search { display: flex; gap: .35rem; margin-top: .6rem; }
.wx-search__input {
    flex: 1; min-width: 0; padding: .34rem .6rem; font: inherit; font-size: .78rem;
    color: var(--c-text); background: var(--c-surface-2);
    border: 1px solid var(--c-border); border-radius: 999px; outline: none;
}
.wx-search__input:focus { border-color: var(--c-accent); }
.wx-search__btn {
    flex: 0 0 auto; cursor: pointer; font: inherit; font-size: .76rem;
    padding: .34rem .7rem; border-radius: 999px;
    color: var(--c-accent-ink); background: var(--c-accent); border: 1px solid var(--c-accent);
}
.wx-search__btn:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------------------
   7. 右栏 · 热门新闻
   --------------------------------------------------------------------------- */
.news { display: flex; flex-direction: column; }
.news__item {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .34rem .3rem; border-radius: 6px;
    color: var(--c-text); font-size: .8rem; line-height: 1.45;
}
.news__item:hover { background: var(--c-surface-2); color: var(--c-accent); }
.news__item + .news__item { border-top: 1px dashed var(--c-border); }
.news__rank {
    flex: 0 0 auto; width: 1.15em; text-align: center; font-size: .74rem;
    font-weight: 800; color: var(--c-dim); font-variant-numeric: tabular-nums;
    line-height: 1.6;
}
.news__item:nth-child(-n+3) .news__rank { color: var(--c-accent); }
.news__t {
    min-width: 0; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.news__hot {
    flex: 0 0 auto; margin-inline-start: auto; align-self: center;
    font-size: .66rem; color: var(--c-dim); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   8. 快速找站悬浮窗
   --------------------------------------------------------------------------- */
.finder__fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    display: flex; align-items: center; gap: .38rem;
    padding: .6rem .9rem; cursor: pointer; font: inherit; font-size: .84rem;
    font-weight: 600; color: var(--c-accent-ink);
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    border: 0; border-radius: 999px;
    box-shadow: 0 10px 30px -10px var(--c-glow), var(--c-shadow);
    transition: transform .2s, box-shadow .2s;
}
.finder__fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px var(--c-glow); }
.finder__fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .finder__fab__t { display: none; } }

.finder {
    position: fixed; inset: 0; z-index: 150;
    background: color-mix(in srgb, var(--c-bg) 72%, transparent);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 1rem 2rem;
}
.finder[hidden] { display: none; }
.finder__panel {
    width: min(620px, 100%); max-height: 74vh; display: flex; flex-direction: column;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: calc(var(--c-radius) * 1.3); box-shadow: var(--c-shadow);
    overflow: hidden; animation: finderIn .18s ease-out;
}
@keyframes finderIn { from { opacity: 0; transform: translateY(-10px); } }

.finder__bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem .9rem; border-bottom: 1px solid var(--c-border);
}
.finder__ico { flex: 0 0 auto; opacity: .7; }
.finder__input {
    flex: 1; min-width: 0; padding: .2rem 0; font: inherit; font-size: 1rem;
    color: var(--c-text); background: none; border: 0; outline: none;
}
.finder__kbd {
    flex: 0 0 auto; font-size: .68rem; font-family: inherit; color: var(--c-dim);
    padding: .12rem .38rem; border: 1px solid var(--c-border); border-radius: 5px;
}
.finder__close {
    flex: 0 0 auto; cursor: pointer; font-size: 1.15rem; line-height: 1;
    color: var(--c-dim); background: none; border: 0; padding: .1rem .3rem;
}
.finder__close:hover { color: var(--c-accent); }

.finder__meta {
    padding: .45rem .9rem; font-size: .74rem; color: var(--c-dim);
    border-bottom: 1px solid var(--c-border);
}
.finder__list { list-style: none; margin: 0; padding: .4rem; overflow-y: auto; }
.finder__item a {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .6rem; border-radius: calc(var(--c-radius) * .7);
    color: var(--c-text);
}
.finder__item a:hover, .finder__item.is-active a {
    background: var(--c-surface-2); color: var(--c-accent);
}
.finder__logo {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.finder__logo img { width: 20px; height: 20px; object-fit: contain; }
.finder__text { min-width: 0; }
.finder__name { font-size: .9rem; font-weight: 600; }
.finder__desc {
    font-size: .74rem; color: var(--c-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finder__cat {
    flex: 0 0 auto; margin-inline-start: auto; font-size: .68rem;
    color: var(--c-dim); white-space: nowrap;
    padding: .1rem .45rem; border: 1px solid var(--c-border); border-radius: 999px;
}
.finder__empty { padding: 2rem 1rem; text-align: center; color: var(--c-dim); font-size: .85rem; }
.finder__empty a { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   9. 响应式
   --------------------------------------------------------------------------- */
/* 1100px 以下：右栏不再并排，而是整块挪到正文之后，
   卡片自己排成两列 —— 内容一个都不少，只是换个位置。 */
@media (max-width: 1100px) {
    .layout {
        width: min(1240px, 100% - 2.5rem);
        grid-template-columns: minmax(0, 1fr);
    }
    .layout__main { grid-column: 1; grid-row: 2; }
    .sidebar--left {
        position: static; max-height: none; overflow: visible;
        grid-column: 1; grid-row: 1;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .9rem; align-items: start;
    }
    .sidebar--left .side-card { margin-bottom: 0; }
    /* 左栏的"最新文章"在窄屏上没意义（正文里就有），藏掉省空间 */
    .sidebar--left .side-posts { display: none; }
    .sidebar--right {
        grid-column: 1; grid-row: 3; margin-top: 2.5rem;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
        gap: .9rem; align-items: start;
    }
    .sidebar--right .side-card { margin-bottom: 0; }
    /* 日历卡片在高屏上比较长，让它单独占一整行，别把旁边的卡片挤变形 */
    .sidebar--right .side-card--cal { grid-column: 1 / -1; }
    .side-card--cal .cal-month { max-width: 420px; }
}

@media (max-width: 640px) {
    .sidebar--left, .sidebar--right { grid-template-columns: 1fr; }
    .layout { width: min(1240px, 100% - 1.6rem); }
    .side-card--cal .cal-month { max-width: none; }
    .finder { padding: 6vh .6rem 1rem; }
    .finder__panel { max-height: 82vh; }
}

/* 打印：侧边栏和悬浮按钮都不该上纸 */
@media print {
    .sidebar, .finder, .finder__fab { display: none !important; }
    .layout { display: block; width: auto; }
}