/* Created by Chia-Hsiang Ma, 20260923*/
:root {
    --home-title-size: clamp(32px, 2vw, 48px);
    --home-gear-size: clamp(28px, 1.8vw, 43.2px);
}

/* 首頁主表格改用 Grid；每欄需要約 640 CSS px，欄數不設上限。 */
table.layout-frame.fullwidth {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

table.layout-frame.fullwidth > tbody {
    display: grid;
    grid-template-columns: repeat(var(--home-columns, 1), minmax(0, 1fr));
    row-gap: 4px;
    width: 100%;
}

table.layout-frame.fullwidth > tbody > tr {
    display: contents;
}

table.layout-frame.fullwidth > tbody > tr > th,
table.layout-frame.fullwidth > tbody > tr > td {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    width: 100% !important;
}

/* 頁首、歡迎區及分類標題各自佔滿整列。 */
table.layout-frame.fullwidth > tbody > tr > th,
table.layout-frame.fullwidth > tbody > tr > td:not([width="33%"]) {
    grid-column: 1 / -1;
}

/* Corpus 格子按可用空間排列。 */
table.layout-frame.fullwidth > tbody > tr > td[width="33%"] {
    grid-column: auto;
}

/* 隱藏原本三欄表格用來補足一列的空格。 */
table.layout-frame.fullwidth > tbody > tr > td.algC[width="33%"] {
    display: none;
}

/* 第一層：頁面名稱，最大。 */
table.layout-frame.fullwidth > tbody > tr:first-child > th.layout-strong {
    font-size: var(--home-title-size);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* 第二層：分類及清單總標題。 */
table.layout-frame.fullwidth > tbody > tr:not(:first-child) > th.layout-strong {
    font-size: clamp(22px, 1.3vw, 30px);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* 第三層：主清單中的 corpus 名稱。 */
table.layout-frame.fullwidth > tbody > tr > td.hollow[width="33%"] > p > a.control-box {
    font-size: clamp(17px, 0.95vw, 22px);
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* 清單總標題：小於或等於語料庫分類標題。 */
table.layout-frame.fullwidth > tbody > tr > th.layout-strong.home-list-heading {
    font-size: clamp(20px, 1.1vw, 26px);
    font-weight: 600;
}

/* 手機上限制首頁上方的巢狀表格寬度。 */
@media (max-width: 640px) {
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto,
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto table.margin-auto {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    table.layout-frame.fullwidth a.control-box {
        overflow-wrap: anywhere;
    }
}

.topcorner .lang-menu-trigger {
    width: calc(var(--home-gear-size) + 16px);
    height: calc(var(--home-gear-size) + 16px);
}

.topcorner .lang-menu-trigger-icon {
    width: var(--home-gear-size);
    height: var(--home-gear-size);
}

/* 以首頁標題格作為齒輪的定位基準。 */
table.layout-frame.fullwidth > tbody > tr:first-child > th.layout-strong {
    position: relative;
}

table.layout-frame.fullwidth > tbody > tr:first-child > th.layout-strong > .topcorner {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: normal;
}

/* 登入歡迎訊息 */
table.layout-frame.fullwidth > tbody > tr > td.layout-fg > p.algC.font-lg {
    font-size: clamp(20px, 1.15vw, 25px);
    line-height: 1.4;
}

/* 「最近使用的語料庫／快速連結」外層：兩個等寬區塊 */
table.layout-frame.fullwidth table.basicbox.w-75.margin-auto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    width: 90%;
    box-sizing: border-box;
}

table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody,
table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr {
    display: contents;
}

table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > th.basicbox,
table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox {
    display: block;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

/* 小標題小於「本伺服器提供的語料庫」 */
table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > th.basicbox {
    font-size: clamp(16px, 0.95vw, 21px);
    line-height: 1.4;
}

/* 兩個區塊內的表格填滿各自寬度，連結字級略小 */
table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox > table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox a.control-box {
    font-size: clamp(15px, 0.85vw, 19px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* 小於 960 px：標題與內容依序直排成兩個區塊 */
@media (max-width: 1279.98px) {
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > th:first-child {
        order: 1;
    }
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td:first-child {
        order: 2;
    }
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > th:nth-child(2) {
        order: 3;
    }
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td:nth-child(2) {
        order: 4;
    }
}

/* 小於 640 px：兩個區塊內的連結也改成一欄 */
@media (max-width: 639.98px) {
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox > table {
        display: block;
    }

    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox > table > tbody {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox > table > tbody > tr {
        display: contents;
    }

    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox > table > tbody > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 隱藏原表格為補齊兩欄而留的空格 */
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto > tbody > tr > td.basicbox > table > tbody > tr > td.hollow:empty,
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto table.w-100 > tbody > tr:last-child > td:last-child {
        display: none;
    }
}

/* 兩個區塊尚未直排時，給內部的兩欄連結更多空間。 */
@media (min-width: 960px) and (max-width: 1279.98px) {
    table.layout-frame.fullwidth table.basicbox.w-75.margin-auto {
        width: 100%;
    }
}

/* 長語料庫名稱留在自己的格子內並換行。 */
table.layout-frame.fullwidth table.basicbox.w-75.margin-auto
> tbody > tr > td.basicbox > table td {
    min-width: 0;
    box-sizing: border-box;
}

table.layout-frame.fullwidth table.basicbox.w-75.margin-auto
> tbody > tr > td.basicbox > table a.control-box {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* Unified settings gear size and heading-cell position. */
table.layout-frame.fullwidth > tbody > tr:first-child > th.layout-strong > .topcorner {
    top: 50%;
    right: 10px;
    bottom: auto;
    transform: translateY(-50%);
}
.topcorner .lang-menu-trigger {
    width: 38px;
    height: 38px;
}
.topcorner .lang-menu-trigger-icon {
    width: 22px;
    height: 22px;
}