/**
 * "友链申请" / "提交收录"：页面外壳 + 提交墙 + toast。
 *
 * 字段/按钮/验证码这些表单构件在 contribute.css（两个短代码共用）；
 * 这个文件管"整页长什么样"：宽度、卡片外壳、提交墙的卡片网格、
 * 友链墙的样式穿透、右下角 toast。同样全程走 tokens.css 变量，
 * 不用渐变/发光/磨砂，保持扁平克制。
 */

/* 页面标题（StaticPage.jsx 输出的 h1）和正文容器默认靠左、且有 720px 宽度
   上限。这两个页面要用更宽的排版，靠 PHP 打在 body 上的 wpnav-body-formpage
   标记来限定范围（inc/submit-site.php 的 wpnav_add_formpage_body_class()），
   不影响站内其它页面/文章。 */
.wpnav-body-formpage .wpnav-static-page h1 { text-align: center; }
.wpnav-body-formpage .wpnav-single-content {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.wpnav-apply {
    /* 表单卡片和下方提交墙共用同一个宽度，两块左右边缘对齐成一条线 */
    --wpnav-apply-w: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 8px 0 40px;
}

/* ---- 卡片 ----
   半透明毛玻璃，跟站内其它浮层（侧边栏、悬浮条）同一套 --wpnav-glass-*
   语言。注意：透明感 ≠ 发光——这里只有磨砂和一层很淡的投影，没有彩色
   光晕、没有渐变描边。 */
.wpnav-apply-card {
    width: 100%;
    max-width: var(--wpnav-apply-w);
    background: var(--wpnav-glass-bg, rgba(255, 255, 255, .07));
    border: 1px solid var(--wpnav-glass-border, rgba(255, 255, 255, .2));
    border-radius: var(--wpnav-radius-lg, 24px);
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    padding: 36px 40px;
}

/* 头部：标题 + 一句说明，靠左。不放图标框、不做居中 hero——这是个表单，
   页面顶上已经有 WordPress 页面标题的 h1 了，再来一个大图标只是重复。 */
.wpnav-apply-head {
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--wpnav-border, rgba(255, 255, 255, .08));
}
.wpnav-apply-title {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 700;
    color: var(--wpnav-text, #ebebeb);
}
.wpnav-apply-tagline {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--wpnav-text-dim, #9e9e9e);
}

.wpnav-apply-form { margin: 0; }

/* ---- 提交墙 ---- */
.wpnav-apply-wall { width: 100%; max-width: var(--wpnav-apply-w); }
.wpnav-apply-wall-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0 2px;
}
.wpnav-apply-wall-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wpnav-text, #ebebeb);
}
.wpnav-apply-wall-count {
    font-size: 12.5px;
    color: var(--wpnav-text-faint, #6e6e6e);
}
.wpnav-apply-wall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

.wpnav-submit-item {
    display: flex;
    flex-direction: column;
    padding: 15px 16px;
    background: var(--wpnav-glass-bg, rgba(255, 255, 255, .07));
    border: 1px solid var(--wpnav-glass-border, rgba(255, 255, 255, .2));
    border-radius: var(--wpnav-radius-md, 16px);
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    transition: border-color var(--wpnav-dur-med, .32s) var(--wpnav-ease, ease);
}
.wpnav-submit-item:hover {
    border-color: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 40%, var(--wpnav-border, rgba(255, 255, 255, .08)));
}
.wpnav-submit-item-top { display: flex; align-items: flex-start; gap: 10px; }
.wpnav-submit-item-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--wpnav-radius-sm, 10px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wpnav-surface, rgba(255, 255, 255, .04));
}
.wpnav-submit-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.wpnav-submit-item-icon-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--wpnav-text-dim, #9e9e9e);
    background: var(--wpnav-surface-hover, rgba(255, 255, 255, .08));
}
.wpnav-submit-item-meta { flex: 1; min-width: 0; }
.wpnav-submit-item-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 选择器带上 .wpnav-apply-wall 这层外层 class（而不是只写
   .wpnav-submit-item-title）：这段HTML塞进 App.css 的 .wpnav-single-content
   容器渲染，那边有条全局规则给正文里的普通链接加下划线，选择器优先级
   0-1-1；只用单个 class（0-1-0）会被那条规则盖掉。带外层 class 后
   优先级变成 0-2-0，稳定盖过它。 */
.wpnav-apply-wall a.wpnav-submit-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wpnav-text, #ebebeb);
    text-decoration: none;
}
.wpnav-apply-wall a.wpnav-submit-item-title:hover { color: var(--wpnav-accent-a, #7c5cff); }
.wpnav-submit-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wpnav-text, #ebebeb);
}
.wpnav-submit-item-time {
    display: block;
    font-size: 11px;
    color: var(--wpnav-text-faint, #6e6e6e);
    margin-top: 2px;
}
.wpnav-submit-item-cat {
    flex: none;
    font-size: 11px;
    padding: 2px 9px;
    border-radius: var(--wpnav-radius-pill, 999px);
    background: var(--wpnav-surface-hover, rgba(255, 255, 255, .08));
    color: var(--wpnav-text-faint, #6e6e6e);
}
.wpnav-submit-item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--wpnav-text-dim, #9e9e9e);
    margin: 10px 0 0;
}

/* 站长回复：一个带标签的浅色底块，"站长"两个字本身就是最清楚的身份标识，
   不用竖杠之类的分隔符（试过，读起来像排版事故）。 */
.wpnav-submit-item-replies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}
.wpnav-submit-reply {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--wpnav-radius-sm, 10px);
    background: var(--wpnav-surface, rgba(255, 255, 255, .04));
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--wpnav-text-dim, #9e9e9e);
}
.wpnav-submit-reply-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: var(--wpnav-radius-pill, 999px);
    background: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 18%, transparent);
    color: var(--wpnav-accent-a, #7c5cff);
    font-size: 10.5px;
    font-weight: 600;
    vertical-align: 1px;
}
.wpnav-submit-reply-toggle { margin-top: 10px; }
.wpnav-submit-reply-toggle > summary { display: inline-block; color: var(--wpnav-text-faint, #6e6e6e); font-size: 11.5px; cursor: pointer; list-style: none; }
.wpnav-submit-reply-toggle > summary::-webkit-details-marker { display: none; }
.wpnav-submit-reply-toggle > summary:hover { color: var(--wpnav-text-dim, #9e9e9e); }
.wpnav-submit-reply-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.wpnav-submit-reply-form input, .wpnav-submit-reply-form textarea { min-width: 0; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--wpnav-border, rgba(255,255,255,.12)); border-radius: var(--wpnav-radius-sm, 10px); background: var(--wpnav-surface, rgba(255,255,255,.04)); color: var(--wpnav-text, #ebebeb); font: inherit; font-size: 12.5px; }
.wpnav-submit-reply-form textarea { grid-column: 1 / -1; resize: vertical; }
.wpnav-submit-reply-submit { align-self: center; padding: 7px 13px; border: 0; border-radius: var(--wpnav-radius-sm, 10px); background: var(--wpnav-accent-a, #7c5cff); color: #fff; cursor: pointer; font-size: 12.5px; }
.wpnav-submit-pagination { margin-top: 22px; text-align: center; }
.wpnav-submit-pagination .page-numbers { display: inline-block; padding: 6px 9px; margin: 0 2px; border-radius: 8px; color: var(--wpnav-text-dim, #9e9e9e); text-decoration: none; }
.wpnav-submit-pagination .page-numbers.current { background: var(--wpnav-surface-hover, rgba(255,255,255,.08)); color: var(--wpnav-text, #ebebeb); }
.wpnav-submit-reply > p { margin: 0; }
.wpnav-submit-reply--depth-1, .wpnav-submit-reply--depth-2 { margin-left: 14px; }

/* 回复内容按“对话引用”排，不再叠一层厚重的小卡片；输入入口默认收起，
   鼠标扫过对应提交或回复时才轻轻出现。 */
.wpnav-submit-item-replies { gap: 4px; margin-top: 10px; }
.wpnav-submit-reply { padding: 3px 0 3px 10px; border-left: 2px solid color-mix(in srgb, var(--wpnav-border, rgba(255,255,255,.12)) 75%, transparent); border-radius: 0; background: transparent; color: var(--wpnav-text-dim, #9e9e9e); }
.wpnav-submit-reply:hover { border-left-color: color-mix(in srgb, var(--wpnav-accent-a, #7c5cff) 45%, transparent); }
.wpnav-submit-reply-badge { margin-right: 5px; padding: 0; border-radius: 0; background: transparent; color: var(--wpnav-text-faint, #6e6e6e); font-size: 11px; font-weight: 500; }
.wpnav-submit-reply-toggle { width: fit-content; margin-top: 7px; opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.wpnav-submit-reply-toggle > summary { padding: 1px 0; color: var(--wpnav-text-faint, #6e6e6e); font-size: 11px; }
.wpnav-submit-item:hover > .wpnav-submit-reply-toggle,
.wpnav-submit-item:focus-within > .wpnav-submit-reply-toggle,
.wpnav-submit-reply:hover > .wpnav-submit-reply-toggle,
.wpnav-submit-reply:focus-within > .wpnav-submit-reply-toggle,
.wpnav-submit-reply-toggle[open] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wpnav-submit-reply-form { max-width: 100%; grid-template-columns: 1fr auto; gap: 6px; padding-top: 2px; }
.wpnav-submit-reply-form textarea { min-height: 52px; }
.wpnav-submit-reply-submit { padding: 6px 10px; font-size: 11.5px; }
@media (pointer: coarse) { .wpnav-submit-reply-toggle { opacity: 1; transform: none; pointer-events: auto; } }

/* ---- 友链墙（[wpnav_friend_links_wall]）：卡片复用全局
   wpnav-section-grid / wpnav-resource-card 样式，这里只处理跟上面同样的
   .wpnav-single-content a 优先级覆盖问题。 ---- */
.wpnav-friend-wall { padding: 8px 0 24px; }
.wpnav-friend-wall .wpnav-resource-card-link,
.wpnav-friend-wall .wpnav-resource-card-link:hover { text-decoration: none; }
.wpnav-friend-wall .wpnav-resource-title { text-decoration: none; }
.wpnav-friend-wall .wpnav-resource-desc { text-decoration: none; }

@media (max-width: 640px) {
    .wpnav-apply-card { padding: 24px 20px; }
    .wpnav-apply-head { gap: 12px; }
    .wpnav-submit-reply-form { grid-template-columns: 1fr; }
    .wpnav-submit-reply-submit { justify-self: end; }
}

/* ========================================================================
 * 右下角 toast 提示（提交成功/失败）。
 * ======================================================================== */
.wpnav-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
    padding: 14px 16px;
    border-radius: var(--wpnav-radius-md, 16px);
    background: var(--wpnav-bg-elevated, #12141f);
    border: 1px solid var(--wpnav-border, rgba(255, 255, 255, .1));
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45);
    color: var(--wpnav-text, #ebebeb);
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.wpnav-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wpnav-toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); }
.wpnav-toast-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wpnav-toast--success .wpnav-toast-icon { background: rgba(34, 197, 94, .16); color: #4ade80; }
.wpnav-toast--success { border-color: rgba(34, 197, 94, .3); }
.wpnav-toast--error .wpnav-toast-icon { background: rgba(239, 68, 68, .16); color: #f87171; }
.wpnav-toast--error { border-color: rgba(239, 68, 68, .3); }
.wpnav-toast-text { flex: 1; min-width: 0; }
.wpnav-toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--wpnav-text-faint, #6e6e6e);
    cursor: pointer;
    transition: background var(--wpnav-dur-fast, .16s) ease, color var(--wpnav-dur-fast, .16s) ease;
}
.wpnav-toast-close:hover { background: var(--wpnav-surface-hover, rgba(255, 255, 255, .08)); color: var(--wpnav-text, #ebebeb); }
@media (max-width: 480px) {
    .wpnav-toast { left: 16px; right: 16px; max-width: none; }
}

/* v2.17.22：提交收录的已提交区改用留言板同一套评论气泡结构。 */
.wpnav-submit-comments .wpnav-submit-comment-list{
    width:100%;
    max-width:640px;
    margin:0;
}
.wpnav-submit-comments .wpnav-submit-comment{
    width:auto;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.wpnav-submit-comments .wpnav-guestbook-body{flex:1;max-width:calc(100% - 46px);}
.wpnav-submit-comments a.wpnav-submit-site-link{
    color:var(--wpnav-text-dim,#9e9e9e);
    text-decoration:none;
}
.wpnav-submit-comments a.wpnav-submit-site-link:hover{color:var(--wpnav-accent-a,#7c5cff);}
.wpnav-submit-comments .wpnav-submit-item-cat{margin-left:auto;}
.wpnav-submit-comments .wpnav-submit-comment-bubble{min-width:0;}
.wpnav-submit-comments .wpnav-submit-reply-toggle{
    width:fit-content;
    margin-top:7px;
    opacity:0;
    transform:translateY(-2px);
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;
}
.wpnav-submit-comments .wpnav-submit-comment:hover .wpnav-submit-reply-toggle,
.wpnav-submit-comments .wpnav-submit-comment:focus-within .wpnav-submit-reply-toggle,
.wpnav-submit-comments .wpnav-submit-reply-toggle[open]{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.wpnav-submit-comments .wpnav-submit-reply-form{max-width:360px;}
.wpnav-submit-comments .wpnav-guestbook-replies{margin-top:12px;}
@media (pointer:coarse){
    .wpnav-submit-comments .wpnav-submit-reply-toggle{opacity:1;transform:none;pointer-events:auto;}
}

/* 提交收录评论区与上方表单共用同一内容宽度。 */
.wpnav-submit-comments .wpnav-submit-comment-list{max-width:none;}

.wpnav-submit-comment-field{
    margin:0;
    line-height:1.65;
}
.wpnav-submit-comment-field + .wpnav-submit-comment-field{margin-top:3px;}
.wpnav-submit-comment-field strong{
    color:var(--wpnav-text,#ebebeb);
    font-weight:600;
}
.wpnav-submit-comment-field a{
    color:var(--wpnav-accent-a,#7c5cff);
    text-decoration:none;
    overflow-wrap:anywhere;
}
.wpnav-submit-comment-field a:hover{text-decoration:underline;}