/* ===== 广场（首页三栏 + 三个专题页），设计口径见 doc/广场/RSS订阅与广场设计.md 5.2/5.3/5.5 ===== */
/* 全部选择器带 .sq 前缀：navito.css 里 .site/.container 等类名已被首页卡片占用 */

/* 三栏骨架：左 200 / 中间自适应 / 右 300 */
.sq .sq-wrap{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:24px;align-items:start;padding:20px 0 0}
.sq .sq-wrap > *{min-width:0}

.sq .rail{position:sticky;top:calc(var(--tb-h) + 16px);max-height:calc(100vh - var(--tb-h) - 32px);overflow-y:auto;scrollbar-width:none}
.sq .rail::-webkit-scrollbar{display:none}
.sq .rail-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.sq .rail-hd{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.sq .rail-hd .more{font-size:12px;font-weight:500;color:var(--muted)}

/* 左栏：订阅站点 */
.sq .site-list{display:flex;flex-direction:column;gap:2px}
.sq .site-list a{display:flex;align-items:center;gap:9px;padding:6px;border-radius:8px;transition:background .2s var(--ease)}
.sq .site-list a:hover{background:var(--hover)}
.sq .site-list img,.sq .site-list .no-img{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none;background:var(--chip)}
.sq .site-list .no-img{display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--sub)}
.sq .site-list .n{font-size:13px;font-weight:500;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq .site-list .t{margin-left:auto;font-size:11.5px;color:var(--muted);flex:none}

/* 右栏：热门标签 / 最近更新 */
.sq .tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.sq .tag-cloud a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--sub);background:var(--chip);border-radius:999px;padding:5px 11px;transition:background .2s var(--ease),color .2s var(--ease)}
.sq .tag-cloud a:hover{background:var(--accent-wash);color:var(--accent-deep)}
.sq .tag-cloud b{font-weight:500;color:var(--muted);font-size:11.5px}

.sq .upd-list{display:flex;flex-direction:column;gap:9px}
.sq .upd-list a{display:flex;align-items:center;gap:9px}
.sq .upd-list img,.sq .upd-list .no-img{width:28px;height:28px;border-radius:8px;object-fit:cover;flex:none;background:var(--chip)}
.sq .upd-list .no-img{display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--sub)}
/* 作者 + 时间同行：作者占满剩余宽度并省略，时间贴右不被压缩 */
.sq .upd-list .u-b{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.sq .upd-list .n{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq .upd-list .t{flex:none;font-size:11.5px;color:var(--muted);font-weight:400}
.sq .note{font-size:12.5px;line-height:1.7;color:var(--muted)}

/* 动态流 */
.sq .feed,.sq .feed-col{min-width:0}
.sq .feed-tabs{
    position:sticky;top:var(--tb-h);z-index:20;
    display:flex;align-items:center;gap:20px;
    padding:0 4px;margin-bottom:12px;
    background:rgba(250,250,250,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.sq .feed-tabs a{position:relative;padding:12px 0 11px;font-size:13.5px;font-weight:500;color:var(--sub);transition:color .2s var(--ease)}
.sq .feed-tabs a:hover{color:var(--ink)}
.sq .feed-tabs a.on{color:var(--ink);font-weight:600}
.sq .feed-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}

.sq .post{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:16px 18px 12px;margin-bottom:12px;
    transition:border-color .25s var(--ease);
}
.sq .post:hover{border-color:var(--line-2)}
.sq .ph{display:flex;align-items:center;gap:10px}
.sq .ava{width:40px;height:40px;border-radius:10px;overflow:hidden;flex:none;background:var(--chip);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--sub)}
.sq .ava img{width:100%;height:100%;object-fit:cover}
.sq .who{min-width:0}
/* navito.css 的 .site 是首页站点卡片（边框+内边距+圆角），广场里的作者/站点名只当纯文本用，必须把这三项清掉 */
.sq .site{display:inline-block;max-width:100%;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;background:none;border:0;border-radius:0;padding:0;gap:0}
a.site:hover{color:var(--accent-deep)}
.sq .sub{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-top:1px;min-width:0}
.sq .sub .src{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s var(--ease)}
.sq .sub a.src:hover{color:var(--accent-deep)}
.sq .sub time{flex:none}
.sq .sub .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:none}
.sq .sub .arch{color:var(--muted);transition:color .2s var(--ease)}
.sq .sub .arch:hover{color:var(--accent-deep)}

.sq .pb{margin-top:10px}
/* 正文整块可点，但悬停不改标题颜色（R37） */
.sq .pt{display:block;color:var(--ink)}
.sq .pt-t{display:block;font-size:17px;line-height:1.5;font-weight:600}
/* 摘要挂在标题链接里，字号/颜色/字重都要自己声明，否则会继承标题的 17px + 600 */
.sq .ps{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:14px;font-weight:400;line-height:1.72;color:var(--sub)}
.sq .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sq .tags a{font-size:13px;color:var(--accent-deep);border-radius:6px;padding:1px 5px;transition:background .2s var(--ease)}
.sq .tags a:hover{background:var(--accent-wash)}

/* 图片宫格：1 张 16:9 满宽，2/3 两/三列 1:1，4 张 2×2，5 张三列，>5 张末格加蒙层 */
.sq .figs{display:grid;gap:4px;margin-top:10px;border-radius:10px;overflow:hidden}
.sq .im{display:block;overflow:hidden;background:#E9EEF5;position:relative;aspect-ratio:1/1}
.sq .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sq .post:hover .im img{transform:scale(1.03)}
.sq .fig-1{grid-template-columns:1fr}
.sq .fig-1 .im{aspect-ratio:16/9}
.sq .fig-2{grid-template-columns:1fr 1fr}
.sq .fig-3{grid-template-columns:repeat(3,1fr)}
.sq .fig-4{grid-template-columns:1fr 1fr}
.sq .fig-5,.sq .fig-more{grid-template-columns:repeat(3,1fr)}
.sq .im.more::after{
    content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;
    background:rgba(15,23,42,.55);color:#fff;font-size:16px;font-weight:600;letter-spacing:.02em;
}

.sq .pf{display:flex;align-items:center;gap:18px;margin-top:12px}
.sq .act{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);transition:color .2s var(--ease)}
.sq .act svg{width:13px;height:13px}
.sq .act:hover{color:var(--accent-deep)}
.sq .act .n{font-variant-numeric:tabular-nums}
.sq .act-like:hover{color:#E5484D}
.sq .act-like.liked{color:#E5484D}
.sq .act-like.liked svg{fill:currentColor;stroke:currentColor}
.sq .act-like[disabled]{cursor:default;opacity:.7}
.sq .act-read{cursor:default}
.sq .act-read:hover{color:var(--muted)}
.sq .act-main{margin-left:auto;color:var(--accent-deep);font-weight:500}

/* 分页：navito.css 的 .cat-pagination 只给了上间距，广场需要同时留出自底部的位置 */
.sq .cat-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px auto 40px}
.sq .cat-page-btn{min-width:0;padding:8px 14px}
.sq .cat-page-btn svg{width:11px;height:11px}
.sq .pages{display:flex;align-items:center;gap:2px}
.sq .pages a,.sq .pages span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;font-size:13px;color:var(--sub);border:1px solid transparent;border-radius:8px;font-variant-numeric:tabular-nums;transition:background .2s var(--ease),color .2s var(--ease)}
.sq .pages a:hover{background:var(--hover);color:var(--ink)}
.sq .pages .on{background:var(--accent-wash);border-color:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.sq .pages .gap{min-width:16px;padding:0;color:var(--muted)}

/* 专题页单栏壳：去掉左右侧栏后必须铺满 container（.tp 的 900px 只给 NotFound 用） */
.sq .tp{max-width:900px;margin:0 auto;padding-top:20px}
.sq .tp-wide{max-width:none}
.sq .tp-hd{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:16px 20px;margin-bottom:12px;display:flex;align-items:center;gap:16px
}
.sq .tp-title{font-size:20px;line-height:1.3;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sq .tp-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.sq .tp-hd-b{min-width:0;flex:1}
.sq .tp-hd .sc-actions{margin-left:auto}
.sq .sc-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.sq .btn{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    font-size:13px;font-weight:500;color:var(--sub);background:var(--surface);
    border:1px solid var(--line-2);border-radius:9px;padding:7px 14px;
    transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)
}
.sq .btn:hover{border-color:var(--accent-soft);color:var(--accent-deep);background:var(--accent-wash)}
.sq .btn svg{width:12px;height:12px}
.sq .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sq .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* 站点主页卡（R39）：封面带 + 悬浮头像，名称 / 分类 / 描述 / 地址+更新 / 统计 五行 */
.sq .sc{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:14px}
.sq .sc-cover{
    height:96px;
    background:
        radial-gradient(120% 170% at 8% 0%,var(--accent-wash) 0%,rgba(255,255,255,0) 62%),
        radial-gradient(90% 150% at 92% 0%,var(--chip) 0%,rgba(255,255,255,0) 58%),
        linear-gradient(115deg,#EEF4FF 0%,#F7FAFE 58%,#FDFEFF 100%)
}
.sq .sc-in{padding:0 24px 18px}
.sq .sc-top{display:flex;align-items:flex-end;gap:16px;margin-top:-34px}
.sq .sc-ava{width:76px;height:76px;border-radius:20px;overflow:hidden;flex:none;background:var(--chip);display:grid;place-items:center;font-size:22px;font-weight:600;color:var(--sub);box-shadow:0 0 0 4px var(--surface)}
.sq .sc-ava img{width:100%;height:100%;object-fit:cover}
.sq .sc-id{flex:1;min-width:0;padding-bottom:2px}
.sq .sc-name{min-width:0;font-size:21px;line-height:1.35;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq .sc-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.sq .sc-cat{font-size:12px;color:var(--sub);background:var(--chip);border-radius:999px;padding:2px 9px}
.sq .sc-desc{margin-top:14px;font-size:13.5px;line-height:1.72;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sq .sc-actions{padding-bottom:2px}
/* 第四行：站点地址 + 最近更新时间 */
.sq .sc-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.sq .sc-url{display:inline-flex;align-items:center;gap:6px;max-width:min(100%,420px);color:var(--sub);transition:color .2s var(--ease)}
.sq .sc-url:hover{color:var(--accent-deep)}
.sq .sc-url svg{width:13px;height:13px;flex:none;color:var(--muted)}
.sq .sc-url span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq .sc-time{flex:none;font-variant-numeric:tabular-nums}
/* 第五行：文章 / 点赞 / 浏览 三项汇总 */
.sq .sc-stats{display:flex;align-items:baseline;margin-top:10px}
.sq .sc-stat{display:flex;align-items:baseline;gap:6px;padding-right:26px;margin-right:26px}
.sq .sc-stat:last-child{padding-right:0;margin-right:0}
.sq .sc-stat b{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sq .sc-stat i{font-style:normal;font-size:12.5px;color:var(--muted)}

/* 空态 */
.sq .empty{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:54px 20px;text-align:center}
.sq .empty .e-t{font-size:15px;font-weight:600;color:var(--ink-soft)}
.sq .empty .e-s{margin-top:6px;font-size:13px;line-height:1.7;color:var(--muted)}
.sq .empty .e-b{margin-top:18px}

/* 响应式：1199 收右栏，991 收单栏并把订阅站点变成横向胶囊条，560 缩小卡片 */
@media (max-width:1199.98px){
    .sq .sq-wrap{grid-template-columns:200px minmax(0,1fr);gap:20px}
    .sq .rail-right{display:none}
}
@media (max-width:991.98px){
    .sq .sq-wrap{grid-template-columns:1fr;gap:0;padding-top:12px}
    .sq .rail-left{position:static;margin-bottom:12px;max-height:none}
    .sq .rail-left .rail-card{background:none;border:0;border-radius:0;padding:0;margin:0}
    .sq .rail-left .rail-hd{display:none}
    .sq .site-list{flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:2px}
    .sq .site-list li{flex:none}
    .sq .site-list a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px}
    .sq .site-list .t{display:none}
}
@media (max-width:560px){
    .sq .tp-hd{flex-direction:column;align-items:flex-start;gap:12px}
    .sq .tp-hd .sc-actions{margin-left:0}
    .sq .sc-cover{height:76px}
    .sq .sc-in{padding:0 16px 16px}
    .sq .sc-top{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:-28px}
    .sq .sc-ava{width:60px;height:60px;border-radius:15px;font-size:18px}
    .sq .sc-id{flex:1 1 140px}
    .sq .sc-name{font-size:18px}
    .sq .sc-desc{-webkit-line-clamp:3}
    .sq .sc-actions{flex:1 1 100%;width:100%;margin-left:0;justify-content:flex-start;padding-top:2px}
    .sq .sc-url{max-width:100%}
    .sq .sc-stat{padding-right:18px;margin-right:18px}
    .sq .post{padding:14px 14px 10px;border-radius:12px}
    .sq .ava{width:36px;height:36px;border-radius:9px}
    .sq .pt-t{font-size:16px}
    .sq .ps{font-size:13.5px;-webkit-line-clamp:2}
    .sq .pf{gap:14px}
    .sq .feed-tabs{gap:16px}
    .sq .cat-pagination{gap:10px}
}
@media (prefers-reduced-motion:reduce){
    .sq *,.sq *::before,.sq *::after{animation:none!important;transition:none!important}
}

/* 复制链接提示：挂在 body 上，脱离 .sq 作用域 */
.sq-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);background:rgba(15,23,42,.88);color:#fff;font-size:13px;line-height:1;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:60}
.sq-toast.show{opacity:1;transform:translate(-50%,0)}