/* ============================================================
 * 工具页重构补充 (css/tools-plus.css)
 * ------------------------------------------------------------
 * 只管桌面端的入口网格：.tools-tabs 那堵按钮墙在桌面折叠，
 * 手机端始终保持原样（tools-app.js 的 .mgrid 负责）。
 * 卡片与胶囊的样式在 css/hub.css，这里不重复定义。
 * ============================================================ */

/* 桌面：按钮墙收起来，改由卡片网格承担入口 */
@media (min-width: 769px) {
    html.tool-hub .tools-tabs { display: none; }

    /* 卡片区与下方工具面板之间留白 */
    html.tool-hub .hub-grid { margin-bottom: 26px; }

    /* 面板标题做出层次，点开卡片后一眼能定位 */
    html.tool-hub .tool-panel > .tool-title:first-child {
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ffcdda;
        color: #a14563;
        font-size: 1.05rem;
    }
}

/* 新增工具的表单行与结果列表（沿用站内配色，不引入新控件风格） */
.xt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: #a14563;
    font-size: .92rem;
}

.xt-row input[type="number"],
.xt-row input[type="date"],
.xt-row select {
    padding: 8px 12px;
    border: 1px solid #ffcdda;
    border-radius: 10px;
    background: #fff;
    color: #a14563;
    font: inherit;
    font-size: .9rem;
}

.xt-row input[type="number"] { width: 120px; }

.xt-row input[type="range"] { accent-color: #ffb6c1; width: 190px; }

.xt-list { margin: 10px 0; }

.xt-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px 12px;
    border: 1px solid #ffcdda;
    border-radius: 10px;
    background: #fff4f7;
    font-size: .86rem;
    color: #8d6b78;
}

.xt-item .xt-name { color: #a14563; font-weight: 600; }

@media (max-width: 768px) {
    .xt-row { gap: 8px; }
    .xt-row input[type="number"] { width: 96px; }
    .xt-row input[type="range"] { width: 150px; }
}

/* ============================================================
   面板暂存容器（桌面 + 手机共用）
   ------------------------------------------------------------
   一级页上不该出现任何工具面板，所以两边都把 .tool-panel / .info-box
   搬进这里；打开工具时再各按各的方式搬回去（桌面搬到返回条下面，
   手机搬进 AppShell 的详情层）。
   display:none 必须连子元素一起压：.tool-panel.active{display:block}
   （Tools.css，(0,2,0)）的特异性不低于普通父级选择器，光藏父级的话
   那个 .active 面板会照常渲染。这里用 [aria-hidden="true"] > * 把
   特异性提到 (0,2,0) 并靠后加载，稳过它。
   这条规则**不在媒体查询里**：桌面同样要藏。
   ============================================================ */
.tools-stash,
.tools-stash[aria-hidden="true"],
.tools-stash[aria-hidden="true"] > * { display: none !important; }

/* 桌面「二级页」：点开工具后收起胶囊与网格，只留返回条 + 该工具面板 */
.tool-back { display: none; }

@media (min-width: 769px) {
    html.tool-open .hub-chips,
    html.tool-open .hub-grid { display: none; }

    html.tool-open .tool-back {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 12px;
        border-bottom: 1px dashed #ffcdda;
    }
}

.tool-back-name { color: #a14563; font-size: .95rem; font-weight: 600; }

/* 手机：网格一律不出现，保持手机端现状不动 */
@media (max-width: 768px) {
    #toolsFilter,
    #toolsGrid { display: none; }
}

/* ============================================================
   工具页三级结构（手机端）—— 分类折叠面板
   ------------------------------------------------------------
   tools-app.js 在窄屏注入；桌面端一行都不生效（整块写在 max-width:768px 里）。
   一级页：.tcat-wrap 手风琴，只有分类，没有工具
   二级页：.tcat-page 某分类下的工具网格（AppShell 详情层）
   三级页：.tool-detail 工具本体（沿用既有 .mgrid-item 的观感）
   配色沿用站点色板：文字 #a14563 / 边框 #ffcdda / 底 #fff4f7。
   ============================================================ */
@media (max-width: 768px) {

    /* 一级页只留分类：标签墙与旧网格一律不出现。
       两个类都由脚本加 —— 脚本没跑到就退回原来的标签墙，不会白屏。 */
    html.tool-cats .tools-tabs { display: none !important; }
    html.tool-cats .mgrid-wrap { display: none !important; }

    .tcat-wrap { margin: 0 0 6px; }

    .tcat-head {
        margin: 0 0 12px;
        color: #b5768c;
        font-size: .78rem;
        letter-spacing: .02em;
    }

    /* ---------- 分类条（整条 56px 高，满足触控目标） ---------- */
    .tcat {
        margin-bottom: 10px;
        border: 1px solid #ffe2ec;
        border-radius: 16px;
        background: linear-gradient(150deg, #fffafc, #fff1f6);
        overflow: hidden;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    .tcat.is-open {
        border-color: #ffcdda;
        box-shadow: 0 6px 18px -10px rgba(216, 112, 140, .5);
    }

    .tcat-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 56px;
        padding: 0 14px;
        border: 0;
        background: none;
        color: #7d5462;
        font: inherit;
        font-size: .92rem;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tcat-btn:active { background: #ffeef4; }

    .tcat-ico {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: #ffe3ea;
        color: #d9769a;
        font-size: .9rem;
    }

    .tcat.is-open .tcat-ico {
        background: #ffb6c1;
        color: #fff;
    }

    .tcat-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 600;
        color: #a14563;
    }

    .tcat-count {
        flex: 0 0 auto;
        padding: 1px 9px;
        border-radius: 999px;
        background: #ffe3ea;
        color: #a14563;
        font-size: .72rem;
        line-height: 1.7;
    }

    .tcat-arrow {
        flex: 0 0 auto;
        color: #dcb3c1;
        font-size: .72rem;
        transition: transform .2s ease;
    }

    .tcat.is-open .tcat-arrow { transform: rotate(180deg); }

    /* ---------- 分类展开后的工具列表 ---------- */
    .tcat-body {
        padding: 0 10px 10px;
        border-top: 1px dashed #ffdfe8;
    }

    /* 分类展开后的工具网格：两列 */
    .tcat-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 10px;
    }

    .tcat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid #ffe2ec;
        border-radius: 13px;
        background: #fff;
        color: #7d5462;
        font: inherit;
        font-size: .84rem;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .16s ease, background .16s ease;
    }

    .tcat-item:active {
        transform: scale(.97);
        background: #ffeef4;
    }

    .tcat-item > i:first-child {
        flex: 0 0 auto;
        width: 17px;
        color: #e58cab;
        font-size: .88rem;
        text-align: center;
    }

    .tc-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tc-arrow {
        flex: 0 0 auto;
        color: #dcb3c1;
        font-size: .62rem;
    }

    /* ---------- 三级页（工具本体）容器：底部让开安全区 ---------- */
    .tool-detail {
        padding-bottom: calc(24px + var(--sab, 0px));
    }
}