/* Shared two-level select variant of the existing dialog, checkbox and keyword components. */
.hierarchy-source {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}
body.hierarchy-open { overflow: hidden; }
.hierarchy-trigger.with-border {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-target-min);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: var(--radius-input);
    background: var(--color-surface-base);
    color: var(--color-primary);
    font-family: inherit;
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
    text-align: left;
    box-shadow: none;
}
.hierarchy-trigger-text { min-width: 0; overflow-wrap: anywhere; }
.hierarchy-trigger > i { flex-shrink: 0; color: var(--color-secondary); }
.hierarchy-trigger:disabled { color: var(--color-secondary); cursor: not-allowed; }
.hierarchy-trigger[aria-invalid="true"] { border-color: var(--color-error); }
.hierarchy-field-error { color: var(--color-state-error-text); font-size: var(--text-backend-caption-size); }
.hierarchy-trigger:focus-visible,
.hierarchy-dialog button:focus-visible,
.hierarchy-dialog input:focus-visible,
.hierarchy-filter-tags button:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}
.dialog.dialog-with-tabs.hierarchy-dialog {
    position: fixed;
    inset: 0;
    width: min(880px, calc(100% - var(--space-12)));
    max-width: 880px;
    max-height: calc(100vh - var(--space-12));
    max-height: calc(100dvh - var(--space-12));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-modal);
    background: var(--color-surface-base);
    color: var(--color-primary);
    font-family: var(--font-family-zh);
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
    overflow: hidden;
}
.dialog.dialog-with-tabs.hierarchy-dialog[lang="en"] { font-family: var(--font-family-en); }
.hierarchy-dialog:not([open]) { display: none; }
.hierarchy-dialog[open] { display: flex; flex-direction: column; }
.hierarchy-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; }
.hierarchy-dialog::backdrop { background: var(--color-overlay-scrim); }
.hierarchy-dialog [hidden] { display: none !important; }
.hierarchy-dialog h2,
.hierarchy-dialog h3,
.hierarchy-dialog p { margin: 0; }
.hierarchy-dialog button { font-family: inherit; }
.hierarchy-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-6) var(--space-3);
    flex-shrink: 0;
}
.hierarchy-dialog .hierarchy-title {
    color: var(--color-primary);
    font-size: var(--text-backend-h2-size);
    font-weight: var(--text-backend-h2-weight);
    line-height: var(--text-backend-h2-line-height);
}
.hierarchy-dialog .hierarchy-hint {
    margin-top: var(--space-2);
    color: var(--color-secondary);
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
}
.hierarchy-dialog .hierarchy-icon-button,
.hierarchy-filter-tags .hierarchy-icon-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 var(--touch-target-min);
    width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-secondary);
    font-size: var(--icon-size-action);
    box-shadow: none;
    transition: background-color var(--transition-duration) var(--transition-easing);
}
.hierarchy-icon-button:hover { background: var(--color-surface-light); }
.hierarchy-dialog .filter-box.system.hierarchy-search { padding: 0 var(--space-6); margin: 0; flex-shrink: 0; }
.hierarchy-search .item-list,
.hierarchy-search .input-with-icon { width: 100%; margin: 0; }
.hierarchy-search .input-with-icon { position: relative; }
.hierarchy-search .input-with-icon > i {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    color: var(--color-secondary);
    font-size: var(--icon-size-supporting);
    pointer-events: none;
}
.hierarchy-search .input-with-icon > input.with-border {
    width: 100%;
    height: var(--space-12);
    padding: var(--space-3) var(--space-12);
    margin: 0;
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: var(--radius-input);
    background: var(--color-surface-base);
    color: var(--color-primary);
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
    box-shadow: none;
}
.hierarchy-search input::placeholder { color: var(--color-secondary); opacity: 1; }
.hierarchy-search input:focus { border-color: var(--color-accent); }
.hierarchy-search input::-webkit-search-cancel-button { display: none; }
.hierarchy-search-clear { position: absolute; top: 0; right: var(--space-1); }
.hierarchy-selection {
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border-divider);
    flex-shrink: 0;
    max-height: 25vh;
    overflow-y: auto;
}
.hierarchy-dialog .hierarchy-caption {
    color: var(--color-secondary);
    font-size: var(--text-backend-caption-size);
    line-height: var(--text-backend-caption-line-height);
    font-weight: var(--text-backend-body-weight);
    margin-bottom: var(--space-2);
}
.hierarchy-tags,
.hierarchy-filter-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.hierarchy-tags { min-height: var(--touch-target-min); align-items: center; }
.hierarchy-dialog .keyword,
.hierarchy-filter-tags .keyword {
    display: inline-flex;
    align-items: center;
    float: none;
    max-width: 100%;
    height: auto;
    min-height: var(--touch-target-min);
    margin: 0;
    padding: 0 0 0 var(--space-3);
    border-radius: var(--space-8);
    background: var(--color-accent-tint-hover);
    color: var(--color-accent);
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
    animation: none;
    transition: none;
    overflow: visible;
}
.hierarchy-dialog .keyword-text,
.hierarchy-filter-tags .keyword-text { padding: var(--space-1) var(--space-1) var(--space-1) 0; overflow-wrap: anywhere; }
.hierarchy-dialog .keyword-remove,
.hierarchy-filter-tags .keyword-remove { color: var(--color-accent); }
.hierarchy-dialog .keyword-remove:before,
.hierarchy-filter-tags .keyword-remove:before { content: none; }
.hierarchy-dialog .keyword-remove:hover,
.hierarchy-filter-tags .keyword-remove:hover { background: var(--color-accent-tint-active); }
.hierarchy-browser {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 360px;
    min-height: calc(var(--touch-target-min) * 4);
    overflow: hidden;
}
.hierarchy-categories,
.hierarchy-details { min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.hierarchy-categories {
    padding: var(--space-4) var(--space-2);
    background: var(--color-gray-50);
    border-right: var(--border-width) solid var(--color-border-divider);
}
.hierarchy-categories > .hierarchy-caption { padding: 0 var(--space-3); }
.hierarchy-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
    text-align: left;
    overflow-wrap: anywhere;
}
.hierarchy-category:hover { background: var(--color-surface-light); }
.hierarchy-category[aria-current="true"] { background: var(--color-selected-bg); color: var(--color-accent); font-weight: var(--text-backend-h3-weight); }
.hierarchy-category-end { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.hierarchy-category-count { color: var(--color-accent); }
.hierarchy-details { padding: var(--space-4) var(--space-6); }
.hierarchy-dialog .hierarchy-detail-title { font-size: var(--text-backend-h3-size); font-weight: var(--text-backend-h3-weight); line-height: var(--text-backend-h3-line-height); margin-bottom: var(--space-2); }
.hierarchy-options { display: grid; }
.hierarchy-dialog .checkbox { display: block; min-width: 0; margin: 0; border-radius: var(--radius-input); }
.hierarchy-dialog .checkbox:hover { background: var(--color-gray-50); }
.hierarchy-dialog .checkbox label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-8);
    margin: 0;
    font-size: var(--text-backend-body-size);
    line-height: var(--text-backend-body-line-height);
    overflow-wrap: anywhere;
}
.hierarchy-dialog .checkbox input { top: var(--space-3); left: var(--space-1); }
.hierarchy-dialog .checkbox label .checkbox-icon {
    top: var(--space-3);
    left: var(--space-1);
    width: var(--icon-size-status);
    height: var(--icon-size-status);
    margin: 0;
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: var(--radius-modal);
    background: var(--color-surface-base);
    transition: none;
}
.hierarchy-dialog .checkbox input:checked + label .checkbox-icon { border-color: var(--color-accent); background: var(--color-accent); }
.hierarchy-dialog .checkbox input + label .checkbox-icon:after { color: var(--color-on-accent); border: 0; inset: 0; width: auto; height: auto; content: '✓'; text-align: center; font-size: var(--text-backend-caption-size); line-height: var(--icon-size-status); transform: none; transition: none; }
.hierarchy-dialog .checkbox input:checked + label .checkbox-icon:after { transform: none; opacity: 1; }
.hierarchy-dialog .checkbox input:disabled + label { color: var(--color-secondary); cursor: not-allowed; }
.hierarchy-dialog .checkbox input:focus-visible + label { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 0; }
.hierarchy-option-path { color: var(--color-secondary); font-size: var(--text-backend-caption-size); line-height: var(--text-backend-caption-line-height); margin-top: var(--space-1); }
.hierarchy-searching { grid-template-columns: 1fr; }
.hierarchy-searching .hierarchy-categories { display: none; }
.hierarchy-dialog .hierarchy-status { flex-shrink: 0; color: var(--color-state-error-text); background: var(--color-state-error-bg); padding: var(--space-2) var(--space-6); }
.hierarchy-status:empty { display: none; }
.hierarchy-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); flex-shrink: 0; border-top: var(--border-width) solid var(--color-border-divider); padding: var(--space-4) var(--space-6); }
.hierarchy-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.hierarchy-dialog .hierarchy-actions { display: flex; gap: var(--space-2); margin: 0; }
.dialog.hierarchy-dialog .hierarchy-actions > .button { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
.hierarchy-dialog .hierarchy-actions > .button.flat { border: var(--border-width) solid var(--color-accent); }
.hierarchy-dialog .hierarchy-text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--touch-target-min); min-height: var(--touch-target-min); border: 0; border-radius: var(--radius-button); padding: var(--space-2); margin: 0; background: transparent; color: var(--color-secondary); font-size: var(--text-backend-body-size); line-height: var(--text-backend-body-line-height); }
.hierarchy-text-button:hover { background: var(--color-surface-light); }
.hierarchy-dialog .hierarchy-back { display: none; color: var(--color-accent); padding-left: 0; margin-bottom: var(--space-2); }
@media (max-width: 767px) {
    .dialog.dialog-with-tabs.hierarchy-dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
    .hierarchy-header { padding: var(--space-4) var(--space-4) var(--space-3); }
    .hierarchy-dialog .filter-box.system.hierarchy-search { padding: 0 var(--space-4); }
    .hierarchy-search .input-with-icon > input.with-border { font-size: var(--text-backend-h3-size); }
    .hierarchy-selection { padding: var(--space-3) var(--space-4); max-height: 24dvh; }
    .hierarchy-browser { display: block; }
    .hierarchy-categories, .hierarchy-details { height: 100%; }
    .hierarchy-categories { border-right: 0; background: var(--color-surface-base); }
    .hierarchy-category { min-height: var(--space-12); }
    .hierarchy-details { display: none; padding: var(--space-3) var(--space-4); }
    .hierarchy-drilled .hierarchy-categories { display: none; }
    .hierarchy-drilled .hierarchy-details, .hierarchy-searching .hierarchy-details { display: block; }
    .hierarchy-dialog .hierarchy-back { display: inline-flex; }
    .hierarchy-searching .hierarchy-back { display: none; }
    .hierarchy-footer { display: block; padding: var(--space-2) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)); }
    .hierarchy-summary { justify-content: space-between; }
    .hierarchy-dialog .hierarchy-actions { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1.5fr); gap: var(--space-2); margin-top: var(--space-2); }
    .hierarchy-dialog .hierarchy-status { padding: var(--space-2) var(--space-4); }
}