/* Keep the combined China-export / Taiwan-import popover inside short viewports.
   The Vue card decides whether to open upward or downward; the content remains
   scrollable, so this does not change card height or remove any regulation. */
#app div[class~="max-h-[65vh]"]:has(section[aria-label="中國出口規定"]) {
    max-height: min(46vh, 460px) !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #d6a84b transparent;
    scrollbar-width: thin;
}

/* The card stays compact: the combined control remains one quiet pill. */
#app button[title="中國出口／台灣進口規定"] {
    max-width: 100%;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Export uses the established amber compliance colour; Taiwan import keeps navy.
   The warm top rule is the single visual signature and reads like a customs seal. */
#app section[aria-label="中國出口規定"] {
    position: relative;
    overflow: hidden;
    border-color: #efc968 !important;
    border-inline-start: 3px solid #d97706 !important;
    background: linear-gradient(145deg, #fffaf0 0%, #fff7df 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

#app section[aria-label="中國出口規定"]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #d97706, #efc968 62%, transparent);
}

#app section[aria-label="中國出口規定"] > div[class*="border-t"] {
    margin-top: .55rem !important;
    padding: .58rem .62rem !important;
    border: 1px solid rgba(217,119,6,.2) !important;
    border-radius: .7rem;
    background: rgba(255,255,255,.78);
}

#app section[aria-label="中國出口規定"] > div[class*="border-t"] > p:first-child {
    color: #1f2937;
    font-size: 12.5px;
    letter-spacing: .01em;
}

#app section[aria-label="中國出口規定"] + section[aria-label="台灣進口規定"] {
    margin-top: .75rem !important;
    padding-top: .75rem !important;
    border-top-width: 2px !important;
}

#app section[aria-label="台灣進口規定"] > p:first-child {
    color: #173b70;
}

@media (max-width: 640px) {
    #app div[class~="max-h-[65vh]"]:has(section[aria-label="中國出口規定"]) {
        max-height: min(48vh, 420px) !important;
        padding: .65rem !important;
    }

    #app section[aria-label="中國出口規定"] > div[class*="border-t"] {
        padding: .55rem !important;
    }
}