/* Translated image (static/js/translated-image.js). The picture is centred
   in the window and kept clear of the panel fixed at its top right, so the
   panel never covers text the reader may point at next. On a landscape
   screen a square picture fills the height before the panel narrows it.
   Narrow windows put the panel along the bottom and give the picture the
   full width. */
:root {
    --ti-panel-width: clamp(18rem, 24vw, 30rem);
    --ti-panel-gap: 1rem;
    --ti-amber: #ffbf00;
    --ti-blue: #00b7ff;
}

.static-article .article-content .translated-image {
    --ti-width: calc(100vw - 2 * (var(--ti-panel-width) + 2 * var(--ti-panel-gap)));
    width: var(--ti-width);
    margin-left: calc(50% - var(--ti-width) / 2);
    margin-right: 0;
    color: #000;
}

/* Japanese glyph forms, not Chinese ones: site.css sets one family on every
   element with !important, so the Japanese text names its own. */
.translated-image [lang="ja"],
.translated-image [lang="ja"] *,
.ti-panel [lang="ja"],
.ti-panel [lang="ja"] * {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif !important;
}

/* One row of controls; the voice list opens over the picture, so the
   controls take no more room when it is open. */
.ti-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.55rem;
    margin: 0 0 0.45rem;
}

.ti-toggle,
.ti-voice-button,
.ti-voice-option {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    background: #fff;
    border: 3px solid #000;
    border-radius: 999px;
    cursor: pointer;
}

.ti-toggle {
    gap: 0.4em;
    padding: 0.2rem 0.8rem 0.2rem 0.5rem;
}

/* The box shows each setting at a glance: ticked when on. */
.ti-toggle::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.3em;
    height: 1.3em;
    font-size: 0.8em;
    line-height: 1;
    border: 2px solid #000;
    border-radius: 3px;
    background: #fff;
}

.ti-toggle[aria-pressed="true"]::before {
    content: '\2713';
    color: #fff;
    background: #000;
}

.ti-toggle[aria-pressed="true"],
.ti-voice-button[aria-expanded="true"],
.ti-voice-option[aria-pressed="true"] {
    background: var(--ti-amber);
    box-shadow: 0 0 0 3px var(--ti-amber);
}

.ti-toggle:focus-visible,
.ti-voice-button:focus-visible,
.ti-voice-option:focus-visible {
    outline: 3px solid var(--ti-blue);
    outline-offset: 3px;
}

.ti-voice-button {
    gap: 0.4rem;
    padding: 0.1rem 0.7rem 0.1rem 0.15rem;
}

/* img.ti-face outranks the site's rule for article images. */
.ti-face,
.translated-image .ti-toolbar img.ti-face {
    flex: none;
    box-sizing: border-box;
    width: 1.9rem;
    height: 1.9rem;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
}

.ti-face-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.ti-voice-name {
    font-weight: 800;
}

/* As wide as its entries need, up to the window, so descriptions show in
   full; above the panel while open. */
.ti-voice-list {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 2rem);
    max-height: 75vh;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 0.45rem;
    padding: 0.6rem 0.7rem 0.75rem;
    background: #fff;
    color: #000;
    border: 3px solid #000;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
}

.ti-voice-list[hidden] {
    display: none;
}

.ti-voice-list-head,
.translated-image .ti-voice-list .ti-voice-list-head {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.ti-voice-option {
    gap: 0.5rem;
    min-width: 0;
    padding: 0.15rem 0.85rem 0.15rem 0.15rem;
    text-align: left;
    white-space: nowrap;
}

.ti-voice-option .ti-face,
.translated-image .ti-voice-option img.ti-face {
    width: 3.4rem;
    height: 3.4rem;
}

.ti-voice-about {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.ti-notice,
.static-article .article-content .ti-notice {
    margin: 0.55rem 0 0.8rem;
    font-size: 1rem;
    color: #000;
}

.ti-stage {
    position: relative;
    margin: 0 auto;
    line-height: 0;
    outline: none;
    touch-action: manipulation;
}

.ti-stage:focus-visible {
    box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--ti-amber);
}

.static-article .article-content .ti-stage .ti-picture {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
}

.ti-zones {
    position: absolute;
    inset: 0;
}

.ti-zone {
    position: absolute;
    cursor: pointer;
}

.ti-zone-box { z-index: 1; }
.ti-zone-line { z-index: 2; }
.ti-zone-piece { z-index: 3; }

.ti-mark,
.ti-say {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    border-radius: 5px;
    pointer-events: none;
}

.ti-mark[hidden],
.ti-say[hidden] {
    display: none;
}

.ti-mark {
    border: 3px solid var(--ti-amber);
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
    background: rgba(255, 191, 0, 0.14);
    transition: left 80ms ease-out, top 80ms ease-out, width 80ms ease-out, height 80ms ease-out;
}

.ti-mark-box {
    border-width: 4px;
    background: rgba(255, 191, 0, 0.07);
}

.ti-say {
    border: 3px solid var(--ti-blue);
    box-shadow: 0 0 0 1px #000;
    background: rgba(0, 183, 255, 0.2);
}

.ti-is-speaking .ti-mark {
    animation: ti-speaking 0.8s ease-in-out infinite alternate;
}

@keyframes ti-speaking {
    from { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; }
    to { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, 0 0 14px 4px rgba(255, 191, 0, 0.95); }
}

.ti-show-areas .ti-zone-box {
    box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #fff;
}

.ti-show-areas .ti-zone-line {
    background: rgba(0, 120, 255, 0.12);
}

.ti-show-areas .ti-zone-piece {
    background: rgba(255, 140, 0, 0.18);
    box-shadow: inset 0 0 0 1px #c25e00;
}

@media (prefers-reduced-motion: reduce) {
    .ti-mark { transition: none; }
    .ti-is-speaking .ti-mark { animation: none; }
}

/* Every line as text, below the picture: one line per row, scrolled
   sideways where the window is too narrow. */
.ti-transcript-scroll {
    overflow-x: auto;
    margin: 0.8rem 0 0.4rem;
}

.static-article .article-content .ti-transcript {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    margin: 0;
}

.ti-transcript th,
.ti-transcript td {
    border: 1px solid #000;
    padding: 0.3rem 0.55rem;
    color: #000;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.ti-transcript th {
    font-weight: 800;
}

.ti-transcript td:first-child {
    font-size: 1.2rem;
}

.ti-transcript rt,
.ti-panel rt {
    font-size: 0.5em;
    font-weight: 600;
}

/* The reader's Furigana switch, kept across pages. */
.ti-no-furigana .translated-image rt,
.ti-no-furigana .ti-panel rt {
    display: none;
}

.ti-phrase[role="button"] {
    border-radius: 3px;
    cursor: pointer;
}

.ti-phrase[role="button"]:hover {
    background: #ffe39a;
}

.ti-phrase[role="button"]:focus-visible {
    outline: 3px solid var(--ti-blue);
    outline-offset: 1px;
}

.ti-transcript .ti-phrase.ti-said {
    background: #8fe3ff;
}

.ti-caption {
    color: #000;
}

/* The panel: one per page. */
.ti-panel {
    position: fixed;
    top: var(--ti-panel-gap);
    right: var(--ti-panel-gap);
    z-index: 1000;
    box-sizing: border-box;
    width: var(--ti-panel-width);
    max-height: calc(100vh - 2 * var(--ti-panel-gap));
    overflow: auto;
    padding: 0.75rem 1rem 0.9rem;
    background: #fff;
    color: #000;
    border: 3px solid #000;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

.ti-panel[hidden] {
    display: none;
}

.ti-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.2rem;
}

.ti-level {
    font-size: 0.95rem;
    font-weight: 800;
}

.ti-pinned,
.ti-speaking-label,
.ti-sound-label {
    font-size: 0.9rem;
    font-weight: 800;
    border: 2px solid #000;
    border-radius: 999px;
    padding: 0 0.5rem;
}

.ti-speaking-label,
.ti-sound-label {
    display: none;
}

.ti-speaking-label {
    background: var(--ti-blue);
}

.ti-sound-label {
    color: #fff;
    background: #000;
}

.ti-panel.ti-is-speaking .ti-speaking-label,
.ti-panel.ti-sound-blocked .ti-sound-label {
    display: inline-block;
}

.ti-ja {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.95;
    margin: 0 0 0.15rem;
    white-space: nowrap;
}

.ti-ja.ti-ja-wrap {
    white-space: normal;
}

.ti-ja-box {
    font-size: 1.6rem;
}

.ti-romaji {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.ti-en {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    white-space: pre-line;
}

.ti-literal,
.ti-context {
    margin: 0 0 0.5rem;
}

.ti-context .ti-line-ja {
    font-size: 1.15rem;
}

.ti-here {
    background: var(--ti-amber);
    border-radius: 3px;
}

.ti-said,
.ti-words tr.ti-said td {
    background: #8fe3ff;
    border-radius: 3px;
}

.ti-words {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    margin: 0.3rem 0 0.6rem;
    font-size: 0.95rem;
}

.ti-words th,
.ti-words td {
    border: 1px solid #000;
    padding: 0.2rem 0.45rem;
    color: #000;
    text-align: left;
    vertical-align: middle;
}

.ti-words th {
    font-weight: 800;
}

.ti-word-ja {
    font-size: 1.35rem;
    white-space: nowrap;
}

.ti-word-romaji {
    font-weight: 600;
    white-space: nowrap;
}

.ti-notes {
    margin: 0.2rem 0 0;
    padding-left: 1.2rem;
}

.ti-notes li {
    margin: 0.2rem 0;
}

@media (max-width: 62em) {
    .static-article .article-content .translated-image {
        --ti-width: calc(100vw - 1rem);
    }

    .ti-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 46vh;
        border-radius: 12px 12px 0 0;
    }

    .ti-ja {
        font-size: 1.6rem;
    }
}

@media (max-width: 40em) {
    .ti-voice-list {
        grid-template-columns: minmax(0, 1fr);
    }
}