/**!
 * Eigo Hanasou ELC
 * @file  Dictionary.css
 * @desc  Styles for the student dictionary page (esl_dictionary.php): the results
 *        list/table, the word cards, the search box, and the responsive layout.
 *        Reverse-engineered from the minified Dictionary.002.min.css so it can be
 *        maintained directly (no build step in this project). Values preserved as-is.
 * @version v6 2026-08-26 - De-minified from Dictionary.002.min.css. One fix: the mobile
 *          @media block had been nested inside the @supports(object-fit) block (a missing
 *          close brace in the min); un-nested so the responsive rules apply regardless of
 *          object-fit support. Brand colours already tokenised. Min archived to _attic.
 * @version v7 2026-08-28 - Styled the AI translation card (dict-ai*), including the new
 *          tappable synonym links that launch a fresh lookup. Added the loading spinner
 *          (dict-loading / dict-spinner) shown while the results block is gathered.
 * @author Charlie Samra <charles@samraworld.net>
 * @see    esl_dictionary.php
 */

/* ---- Results list / table ---- */
.fullLISTpanel { background-color: #ffffff; }
.LISTPANEL { text-align: center; }

table.nest {
    margin-left: auto;
    margin-right: auto;
    border-collapse: separate;
    border-spacing: 13px;
    width: 100%;
}

.para { padding-left: 5px; }
.voc_suppltl { font-size: medium; }
.voc_google { font-size: large; text-align: center; }
.little_room { margin-bottom: 10px; }
.little_center { text-align: center; }

/* ---- Table action button + rows ---- */
.button-table {
    background-color: var(--brand-dark);
    border: hidden;
}
.button-table:hover { color: var(--brand-accent-hover); }

tr.alternate1 { background-color: #f1eeee; }
tr.alternate2 { background-color: #e8e8e8; }

td a { display: block; width: 100%; }
td a:hover { color: var(--brand-dark); font-weight: bold; }

td.left   { font-weight: normal; font-size: small;  text-decoration: none; padding: 5px; text-align: left; }
td.center { font-weight: normal; font-size: medium; text-decoration: none; padding: 5px; text-align: center; }
td.right  { font-weight: normal; font-size: small;  text-decoration: none; padding: 5px; text-align: right; }

/* ---- Search box ---- */
.search-container button {
    float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}
.search-container button:hover { background: #ccc; }

input[type="search"] {
    width: 100%;
    height: 1.65rem;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    background-color: white;
    margin-left: 3px;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}

/* ---- Definition row layout (text column + image column) ---- */
.inner { margin: auto; }
.lrow {
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
    max-width: 1280px;
    margin: 5px auto;
}
.w60 { flex: 1 0 60%; background: #f9f9f9; padding: 10px 20px; }
.w30 { background: #000; flex: 0 0 30%; }

.object-fit { overflow: hidden; position: relative; }
.object-fit img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
}
@supports (object-fit: cover) {
    .object-fit img {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        transform: none;
        object-fit: cover;
    }
}

/* ---- AI translation card ---- */
.dict-ai { text-align: left; }
.dict-ai__pos {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-dark);
    margin-bottom: 6px;
}
.dict-ai__senses {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dict-ai__sense {
    padding: 8px 0;
    border-top: 1px solid #eee;
}
.dict-ai__sense:first-child { border-top: none; }
.dict-ai__tr { font-weight: 700; }
.dict-ai__gloss { color: #555; }
.dict-ai__syn {
    margin-top: 5px;
    font-size: .9rem;
    line-height: 1.9;
}
.dict-ai__syn em { color: #777; font-style: italic; margin-right: 4px; }
.dict-ai__synlink {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid var(--brand-dark);
    border-radius: 12px;
    color: var(--brand-dark);
    text-decoration: none;
    cursor: pointer;
}
.dict-ai__synlink:hover {
    background: var(--brand-dark);
    color: #fff;
}

/* ---- Loading spinner (shown while the results block is gathered) ---- */
.dict-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 34px 0;
}
.dict-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e6e6e6;
    border-top-color: var(--brand-dark);
    border-radius: 50%;
    animation: dict-spin .8s linear infinite;
}
.dict-loading__text {
    color: #666;
    font-size: 1rem;
    letter-spacing: .01em;
}
@keyframes dict-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dict-spinner { animation-duration: 2s; }
}

/* ---- Mobile ---- */
@media screen and (max-width: 550px) {
    input[type=submit],
    input[type=button],
    input[type=search] {
        width: 100%;
        margin-top: 0px;
        margin-left: 0;
        margin-right: 5px;
    }
    .fullLISTpanel,
    .logo_bar,
    .topnav,
    .footernav,
    .leftpanel,
    .tablepanel {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .leftpanel { text-align: center !important; }
    th.main2_sorted,
    th.main1_sorted,
    th.main0_sorted,
    th.main2,
    th.main1,
    th.main0 { width: 100%; }
    .little_center { width: 0; padding-left: 15px !important; padding-right: 2px !important; }
    td.center { font-size: small; }
}