/* @title       static/css/attach-list.css
   @description 阅读页附件列表的样式（task28：下载图标 + 文件名 + 紧随其后的点数提示）

   为什么单独一份文件，而不是继续写在 markdown.css 里（2026-10-10 的教训）：
   markdown.css 只有**编辑器/预览**类模板在引（markdown_edit_template.tpl /
   new_html_edit_template.tpl / blog/manage_edit.tpl …），而**阅读页**
   （views/document/default_read.tpl，Theme=default）从来没有加载过它。
   于是 task28 写在 markdown.css 里的 `.attach-row / .attach-icon / .attach-cost`
   一条都没生效：服务端注入的 HTML 是对的，用户看到的却还是“一个没颜色的箭头 +
   一段普通文字”，连着两次被当成“功能没做”。

   结论：**样式放哪个文件，取决于哪个页面会加载它**。这份文件由
   views/document/default_read.tpl 引入（带 "version" 参数以便强缓存失效），
   守卫测试 TestAttachStylesAreLoadedByReadPage 会盯着这个引用。 */

/* ---- 附件条目：下载图标 + 文件名 + 点数提示 ----
   为什么新起 attach-row 而不是复用 attach-item：attach-item 是**编辑器上传弹窗**
   里的行（带进度条 / 删除按钮 / 输入框），两边结构完全不同；复用类名会让
   上传弹窗的样式漏进阅读页（凭空多出一条 10px 的灰色进度条）。 */
.attach-list .attach-row{
    list-style: none;
    display: flex;
    align-items: center;
    /* 这里**故意不用统一 gap**：图标与文件名之间要留距离，而点数提示要紧跟在
       文件名后面（用户要求「下载消耗点数就显示在文件名后面，不要放在最右边」）——
       一个 gap 管不了两种距离，改成各自用 margin 控制（见 .attach-icon / .attach-cost）。 */
    padding: 10px 12px;
    margin: 0;
    border: 1px solid #E6E8EB;
    border-radius: 6px;
    background: #FBFCFD;
    font-size: 14px;
    line-height: 1.6;
}
.attach-list .attach-row + .attach-row{
    margin-top: 8px;
}
/* 下载图标：做一个实心底的圆 —— 附件列表以前只有一行普通蓝链接，
   和正文里的链接长得一样，看不出“这里能下载”。
   颜色：蓝色渐变（比纯色更有“按钮感”，和站内主色一致） + 一层淡投影把它从
   浅灰底上抬起来；白色箭头放在渐变上对比够强，不会糊成一团。 */
.attach-list .attach-icon{
    flex: none;
    /* 与文件名之间的间距（用户要求拉开一点） */
    margin-right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B95FF 0%, #1A7CF1 55%, #1462C6 100%);
    color: #FFFFFF;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(26, 124, 241, .35);
}
.attach-list .attach-dl{
    /* ⚠ 不能用 flex:1：那是“把剩下的宽度全吃掉”，会顺手把后面的点数提示
       推到这行的最右边（用户明确说不要这样）。写成 0 1 auto ⇒ 链接只占自身
       文字宽度，点数提示就紧跟在文件名后面。
       缩：flex-shrink 保留 + min-width:0，文件名很长时换行而不是把点数提示挤出屏幕。 */
    flex: 0 1 auto;
    min-width: 0;
    color: #1A7CF1;
    font-weight: 600;
    word-break: break-all;
    text-decoration: none;
}
.attach-list .attach-dl:hover{
    text-decoration: underline;
}
/* 点数提示：点之前就要看到花多少（10 点 = 1 元，用橙色区别于普通说明文字）

   显示时机（用户要求「鼠标放在文件名上才显示下载消耗点数」）：
   默认只**占位不显示**，鼠标移到**文件名**上才出现。
   - 用相邻兄弟选择器（.attach-dl:hover + .attach-cost）而不是整行 :hover：
     鼠标停在图标或行内空白处不应该弹出来；
   - 用 visibility 而不是 display：一直占着位置，出现/消失时文件名不会左右跳动；
   - 键盘用户（Tab 到链接）也要能看到 —— :focus-within 一起算上；
   - 触屏没有 hover：只有**真触屏**（`hover: none` **且** `pointer: coarse`）才常显。
     ⚠ 别只写 `@media (hover: none)`：某些桌面/无头上下文也会报 hover:none，
     那样点数提示就变成“一直显示”（用户看到的就是这个，要求改回悬停显示）。 */
.attach-list .attach-dl + .attach-cost{
    visibility: hidden;
}
.attach-list .attach-dl:hover + .attach-cost,
.attach-list .attach-row:focus-within .attach-cost{
    visibility: visible;
}
.attach-list .attach-cost{
    flex: none;
    /* 紧跟在文件名后面（不要顶到最右边），只留一点点呼吸距离 */
    margin-left: 8px;
    color: #F08A24;
    font-size: 12px;
    white-space: nowrap;
}
@media (hover: none) and (pointer: coarse){
    .attach-list .attach-dl + .attach-cost{
        visibility: visible;
    }
}

/* ---- 「在线浏览」（2026-10-21） ----
   它在条目**最前面**（按钮 → 下载图标 → 文件名 → 点数提示，用户要求「放在下载前面」）。
   与下载链接之间隔着图标 `<i>`，所以不影响下面那对
   `.attach-dl:hover + .attach-cost` 相邻兄弟选择器（悬停文件名才显示点数）。

   配色经过两轮（用户原话）：
     ①「在线浏览 按钮做大一点明显一点」—— 第一版是 12px 的浅蓝描边，没人看得见；
     ②「还改回白底蓝字」—— 做大保留，但不要实心蓝。
   所以：**白底 + 蓝字 + 蓝描边 + 14px 加粗 + 浅投影**，32px 高。
   白底的好处是它与右侧"下载图标（蓝底白箭头）"形成明显区分：一个实心圆、一个白按钮，
   不会像两个实心蓝块那样糊在一起。

   ⚠️ 不要再往上加动画/闪烁：附件行里出现会动的东西，正文就没人看得下去了。 */
.attach-list .attach-pv{
    flex: none;
    /* 间距写在右边：和后面的下载图标之间留出明显空隙，
       否则"点这里"和"点名"会连成一片。 */
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    /* 描边比第一版深一点（#C9DDF7 在白底上几乎看不见），但仍是"蓝色系" */
    border: 1px solid #A9CBF3;
    border-radius: 6px;
    background: #FFFFFF;
    color: #1A7CF1;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(26, 124, 241, .16);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.attach-list .attach-pv i{
    margin-right: 6px;
    font-size: 14px;
}
.attach-list .attach-pv:hover{
    background: #F0F7FF;
    border-color: #1A7CF1;
    color: #1462C6;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(26, 124, 241, .28);
}
.attach-list .attach-pv:active{
    background: #E3EFFF;
    box-shadow: 0 1px 3px rgba(26, 124, 241, .22);
}
/* 窄屏：**必须让整行换行**，否则文件名会被挤成一列竖排文字。
   2026-10-21 实测（375px 宽）：图标 44px + 隐藏中的点数提示 ~110px + 大按钮 ~100px
   之后，留给文件名的只剩十几像素，`word-break:break-all` 会把「期末试卷」折成
   一行一个字 —— 用户看到的就是一根竖条。

   做法：给文件名一个"占满第一行"的 flex-basis（100% 减去图标的宽度），
   后面的点数提示与按钮自然被挤到第二行。
   ⚠️ 不要靠 `.attach-pv{margin-left:auto}` 来换行：auto 外边距会**吃掉这一行的
   剩余空间**，于是文件名反而不增长、继续被挤成竖条（第一版就是这么写错的，
   flex-grow 与 auto margin 同时存在时永远是 auto margin 先拿空间）。 */
@media (max-width: 560px){
    .attach-list .attach-row{
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .attach-list .attach-icon{
        flex: 0 0 28px;
    }
    /* 按钮在最前：不给它留 auto 外边距（auto 会吃掉这一行的剩余空间，
       文件名就再也长不起来 —— 见下面那段说明） */
    .attach-list .attach-pv{
        margin-right: 10px;
        padding: 6px 14px;
        font-size: 13px;
    }
    /* 文件名吃掉第一行剩下的宽度 */
    .attach-list .attach-dl{
        flex: 1 1 0;
        min-width: 0;
    }
    /* 点数提示单独占第二行（触屏上它本来就常显，放不下就把整行撑歪） */
    .attach-list .attach-cost{
        flex: 1 1 100%;
        margin-left: 44px;
    }
}
@media (max-width: 420px){
    .attach-list .attach-pv{
        padding: 6px 12px;
        font-size: 13px;
    }
}