/* ============================================================
 * 国家机构（政府组织架构） /tools/gov  —  三端自适应排版
 *
 *   桌面   ≥1024px   左树 + 右详情双栏，两栏各自独立滚动、页面本身不滚
 *   平板   768-1023  双栏收窄（树 260px），内边距与字号适度压缩
 *   手机   ≤767px    单栏「树 ⇄ 详情」切换 + 返回按钮，页面自然滚动
 *   超大屏 ≥1440px   树加宽、留白加大，正文限制最佳阅读行宽
 *
 * 设计要点
 *   1. 桌面双栏高度由 flex 自适应（不再硬编码 calc(100vh - 210px)），
 *      头部/工具条高度变化时两栏自动填满剩余空间，永不出现「算错高度」。
 *   2. 移动端触控目标 ≥ 44px，输入框 16px 防 iOS 聚焦缩放。
 *   3. 弹窗移动端改为底部抽屉（bottom sheet），适配刘海屏安全区。
 *   4. 正文限制 880px 最大宽度，保证 60~80 字最佳阅读行长。
 * ============================================================ */
body.page-gov-full .app { max-width: 100%; }
body.page-gov-full .main-content { max-width: 100%; width: 100%; border-right: 0; }

:root {
    --gov-tree-w: 340px;   /* 左侧机构树宽度 */
    --gov-gap: 18px;       /* 双栏间距 */
    --gov-radius: 14px;
    --gov-radius-sm: 9px;
    --gov-chrome: 56px;    /* 站点顶部占位高度 */
}

/* ---------- 布局骨架 ---------- */
.gov-wrap {
    box-sizing: border-box;
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 桌面/平板：整页锁定一屏高，滚动交给左右两栏 */
    height: calc(100vh - var(--gov-chrome));
    height: calc(100dvh - var(--gov-chrome));
    min-height: 420px;
}

/* ---------- 头部 ---------- */
.gov-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.gov-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gov-ico {
    font-size: 30px;
    width: 52px; height: 52px;
    flex: 0 0 52px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 14px;
}
.gov-title h1 { font-size: 22px; margin: 0 0 2px; font-weight: 700; }
.gov-sub { margin: 0; color: var(--text-secondary); font-size: 13px; }
.gov-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.gov-btn {
    border: 1px solid var(--border-color, #e2e2e2);
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #222);
    padding: 8px 14px;
    border-radius: var(--gov-radius-sm);
    font-size: 13px;
    line-height: 1.2;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
}
.gov-btn:hover { border-color: var(--accent); }
.gov-btn:active { transform: translateY(1px); }
.gov-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gov-btn.primary:hover { filter: brightness(1.05); }
.gov-btn.ghost { background: transparent; }
.gov-btn.danger { background: #d33; border-color: #d33; color: #fff; }
.gov-btn.danger:hover { filter: brightness(1.05); }

/* ---------- 工具条 ---------- */
.gov-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gov-search { display: flex; gap: 8px; }
.gov-search-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color, #e2e2e2);
    border-radius: var(--gov-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #222);
}
.gov-search-input:focus { outline: none; border-color: var(--accent); }
.gov-branch-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.gov-branch-tab {
    border: 1px solid var(--border-color, #e2e2e2);
    background: var(--bg-secondary, #fff);
    color: var(--text-secondary);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    min-height: 34px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.gov-branch-tab:hover { border-color: var(--accent); }
.gov-branch-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* ---------- 主体双栏 ---------- */
.gov-body {
    display: flex;
    gap: var(--gov-gap);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
.gov-tree-pane {
    width: var(--gov-tree-w);
    flex: 0 0 var(--gov-tree-w);
    border: 1px solid var(--border-color, #ececec);
    border-radius: var(--gov-radius);
    background: var(--bg-secondary, #fff);
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
}
.gov-tree-hint { color: var(--text-secondary); font-size: 12px; padding: 4px 6px 10px; }
.gov-detail-pane {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--border-color, #ececec);
    border-radius: var(--gov-radius);
    background: var(--bg-secondary, #fff);
    padding: 24px 28px;
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

/* 两栏滚动条精致化 */
.gov-tree-pane::-webkit-scrollbar,
.gov-detail-pane::-webkit-scrollbar { width: 8px; height: 8px; }
.gov-tree-pane::-webkit-scrollbar-track,
.gov-detail-pane::-webkit-scrollbar-track { background: transparent; }
.gov-tree-pane::-webkit-scrollbar-thumb,
.gov-detail-pane::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-secondary) 20%, transparent);
    border-radius: 8px;
}

/* ---------- 移动端返回按钮（桌面不显示） ---------- */
.gov-back {
    display: none;
    align-items: center;
    gap: 4px;
    margin: 0 0 14px;
    padding: 9px 18px 9px 13px;
    min-height: 42px;
    border: 1px solid var(--border-color, #e2e2e2);
    border-radius: 999px;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #222);
    font-size: 14px;
    cursor: pointer;
}
.gov-back-ico { font-size: 22px; line-height: 1; margin-top: -3px; }
.gov-back:active { transform: translateY(1px); }

/* ---------- 树 ---------- */
.gov-tree, .gov-tree ul { list-style: none; margin: 0; padding: 0; }
.gov-tree ul {
    padding-left: 14px;
    border-left: 1px dashed var(--border-color, #e2e2e2);
    margin-left: 7px;
}
.gov-tree-item { margin: 2px 0; }
.gov-node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    min-height: 34px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-primary, #222);
    user-select: none;
}
.gov-node:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gov-node.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 600; }
.gov-toggle {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    display: grid; place-items: center;
    color: var(--text-secondary);
    font-size: 10px;
    transition: transform .12s;
}
.gov-toggle.collapsed { transform: rotate(-90deg); }
.gov-toggle.leaf { visibility: hidden; }
.gov-node-kind {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
}
.gov-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gov-children.collapsed { display: none; }

/* ---------- 分支分组 ---------- */
.gov-branch-section { margin-bottom: 14px; }
.gov-branch-section.is-hidden { display: none; }
.gov-branch-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary, #fff);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 4px 2px 8px;
    padding: 4px 0 5px;
    border-bottom: 1px solid var(--border-color, #ececec);
}
.gov-branch-ul { list-style: none; margin: 0; padding: 0; }

/* ---------- 详情 ---------- */
.gov-detail-empty { color: var(--text-secondary); text-align: center; padding: 60px 20px; }
.gov-empty-ico { font-size: 48px; margin-bottom: 12px; }
.gov-detail { max-width: 880px; }   /* 最佳阅读行宽 */
.gov-detail h2 { margin: 0 0 4px; font-size: 23px; line-height: 1.35; }
.gov-detail .gov-full { color: var(--text-secondary); margin: 0 0 14px; font-size: 14px; }
.gov-detail .gov-alias { color: var(--text-secondary); font-size: 13px; margin-left: 10px; }
.gov-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.gov-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.gov-badge.alt { background: color-mix(in srgb, var(--text-secondary) 14%, transparent); color: var(--text-secondary); }
.gov-section { margin: 18px 0; }
.gov-section h3 {
    font-size: 14px;
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: .03em;
}
.gov-section .gov-text { margin: 0; line-height: 1.85; font-size: 14.5px; white-space: pre-line; }
.gov-meta-grid {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 6px 12px;
    font-size: 14px;
}
.gov-meta-grid dt { color: var(--text-secondary); }
.gov-meta-grid dd { margin: 0; overflow-wrap: anywhere; }
.gov-children-list { display: flex; flex-direction: column; gap: 6px; }
.gov-child {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    min-height: 38px;
    border: 1px solid var(--border-color, #ececec);
    border-radius: var(--gov-radius-sm);
    cursor: pointer;
    font-size: 13.5px;
}
.gov-child:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.gov-child .gov-node-kind { flex: 0 0 auto; }

.gov-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 4px; }

/* ---------- 搜索结果 ---------- */
.gov-search-results { display: flex; flex-direction: column; gap: 6px; }
.gov-result {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #ececec);
    border-radius: var(--gov-radius-sm);
    cursor: pointer;
    font-size: 13.5px;
}
.gov-result:hover { border-color: var(--accent); }
.gov-result .gov-result-branch { font-size: 11px; color: var(--text-secondary); margin-left: 8px; }
.gov-result .gov-result-full { color: var(--text-secondary); font-size: 12.5px; }
.gov-result .gov-result-snippet { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.gov-result mark { background: #fff3a3; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ---------- 弹窗 ---------- */
/* 弹窗打开时锁定背景滚动 */
body.gov-modal-open { overflow: hidden; }

.gov-mask {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 100000;
    padding: 20px;
}
.gov-mask[hidden] { display: none; }
.gov-modal {
    width: min(640px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--bg-primary, #fff);
    border-radius: var(--gov-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.gov-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #ececec);
    position: sticky; top: 0;
    background: var(--bg-primary, #fff);
    z-index: 1;
}
.gov-modal-head h3 { margin: 0; font-size: 17px; }
.gov-modal-x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-secondary); }
.gov-form { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.gov-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.gov-form input, .gov-form select, .gov-form textarea {
    border: 1px solid var(--border-color, #e2e2e2);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary, #222);
    background: var(--bg-secondary, #fff);
    font-family: inherit;
}
.gov-form input:focus, .gov-form select:focus, .gov-form textarea:focus { outline: none; border-color: var(--accent); }
.gov-form textarea { resize: vertical; }
.gov-form-row { display: flex; gap: 12px; }
.gov-form-row > label { flex: 1; min-width: 0; }
.gov-form-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gov-form-spacer { flex: 1; }
.gov-form-msg { font-size: 12.5px; color: #d33; min-height: 16px; }
.gov-form-msg.ok { color: #2a8a3c; }

/* ---------- 轻提示 ---------- */
.gov-toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.82);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    z-index: 200000;
    font-size: 13px;
    max-width: 86vw;
    text-align: center;
}

/* ---------- 可访问性 ---------- */
.gov-btn:focus-visible,
.gov-branch-tab:focus-visible,
.gov-search-input:focus-visible,
.gov-back:focus-visible,
.gov-child:focus-visible,
.gov-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .gov-btn, .gov-node, .gov-toggle, .gov-child, .gov-result { transition: none; }
}

/* ============================================================
 * 响应式：超大屏 ≥1440
 * ============================================================ */
@media (min-width: 1440px) {
    :root { --gov-tree-w: 380px; --gov-gap: 22px; }
    .gov-wrap { padding: 22px 32px 28px; }
    .gov-detail-pane { padding: 28px 34px; }
    .gov-title h1 { font-size: 24px; }
}

/* ============================================================
 * 响应式：平板 768 - 1023
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    :root { --gov-tree-w: 260px; --gov-gap: 14px; }
    .gov-wrap { padding: 16px 16px 18px; gap: 12px; }
    .gov-detail-pane { padding: 20px 20px; }
    .gov-title h1 { font-size: 20px; }
    .gov-ico { width: 46px; height: 46px; flex-basis: 46px; font-size: 26px; }
    .gov-node { font-size: 13px; }
    .gov-section .gov-text { font-size: 14px; }
}

/* ============================================================
 * 响应式：手机 ≤767  ——  单栏「树 ⇄ 详情」切换
 * 由 .gov-body[data-view] 控制显隐，页面自然滚动（不锁高度）
 * ============================================================ */
@media (max-width: 767px) {
    .gov-wrap {
        height: auto;
        min-height: 0;
        padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }
    .gov-head { gap: 10px; align-items: flex-start; }
    .gov-title { gap: 10px; }
    .gov-title h1 { font-size: 18px; }
    .gov-sub { font-size: 12px; line-height: 1.5; }
    .gov-ico { width: 42px; height: 42px; flex-basis: 42px; font-size: 24px; border-radius: 12px; }
    .gov-actions { width: 100%; }
    .gov-actions .gov-btn { flex: 1 1 0; min-height: 42px; font-size: 13.5px; }

    /* 搜索：输入框放大到 16px 防 iOS 聚焦缩放 */
    .gov-search { gap: 6px; }
    .gov-search-input { font-size: 16px; padding: 11px 13px; min-height: 44px; }
    .gov-search .gov-btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 14px; }

    /* 分支切换三等分，触控更友好 */
    .gov-branch-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .gov-branch-tab { text-align: center; padding: 10px 6px; min-height: 42px; font-size: 13.5px; }

    /* 单栏：整块流动布局，取消内部滚动与卡片边框 */
    .gov-body { display: block; }
    .gov-tree-pane,
    .gov-detail-pane {
        width: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }
    .gov-body[data-view="tree"] .gov-detail-pane { display: none; }
    .gov-body[data-view="detail"] .gov-tree-pane { display: none; }
    .gov-back { display: inline-flex; }

    /* 树：加大触控目标、收窄缩进 */
    .gov-tree ul { padding-left: 12px; margin-left: 6px; }
    .gov-node { min-height: 46px; padding: 10px 8px; font-size: 14.5px; border-radius: 10px; }
    .gov-node-kind { font-size: 10px; padding: 1px 5px; }
    .gov-tree-hint { font-size: 12.5px; padding: 2px 4px 10px; }

    /* 详情：字号与行高针对小屏重排 */
    .gov-detail { max-width: none; }
    .gov-detail h2 { font-size: 20px; }
    .gov-detail .gov-full { font-size: 13.5px; }
    .gov-section { margin: 16px 0; }
    .gov-section .gov-text { font-size: 15px; line-height: 1.9; }
    .gov-meta-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .gov-meta-grid dt { margin-top: 8px; font-size: 13px; }
    .gov-meta-grid dd { font-size: 14.5px; }
    .gov-child { min-height: 46px; padding: 11px 12px; font-size: 14px; }
    .gov-detail-actions .gov-btn { flex: 1 1 44%; min-height: 44px; }
    .gov-detail-empty { padding: 40px 12px; }

    /* 弹窗：底部抽屉 */
    .gov-mask { align-items: flex-end; padding: 0; }
    .gov-modal {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .gov-modal-head { border-radius: 16px 16px 0 0; padding: 14px 16px; }
    .gov-form { padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .gov-form input, .gov-form select, .gov-form textarea { font-size: 16px; padding: 11px; }
    .gov-form-foot { flex-wrap: wrap; gap: 8px; }
    .gov-form-spacer { display: none; }
    .gov-form-foot .gov-btn { flex: 1 1 40%; min-height: 44px; }
    .gov-form-msg { flex: 1 1 100%; order: -1; }
}

/* ============================================================
 * 响应式：小屏 ≤400
 * ============================================================ */
@media (max-width: 400px) {
    .gov-title h1 { font-size: 17px; }
    .gov-sub { font-size: 11.5px; }
    .gov-ico { width: 38px; height: 38px; flex-basis: 38px; font-size: 21px; }
    .gov-actions .gov-btn { padding: 8px 6px; font-size: 12.5px; }
    .gov-branch-tab { font-size: 12.5px; padding: 10px 4px; }
    .gov-detail h2 { font-size: 19px; }
}
