/*
.. _This file is part of AutoCS: https://autocs.sourceforge.io/
.. _Originally developed in SPPAS: https://sppas.org/

    -------------------------------------------------------------------------

    Copyright (C) 2021-2026  Brigitte Bigi, CNRS
    Laboratoire Parole et Langage, Aix-en-Provence, France

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

    This banner notice must not be removed.

    -------------------------------------------------------------------------
*/

:root {
    --header-height: max(calc(8rem / var(--size-divisor)), 7rem);
    --footer-height: max(calc(10rem / var(--size-divisor)), 7rem);
    --border-width: 6px;

    --coded-key-border-color: #b3bfb8;
    --coded-key-fg-color: #183302;
    --coded-key-caption-bg-color: #023306;
    --coded-key-caption-fg-color: rgb(245, 248, 246);
}

:root:not(.contrast) {
    --border-width: 2px;
    --border-radius: 4px;
}

.contrast {
    --border-width: 3px;
    --border-radius: 6px;
}

/* --------------------------------------- */
/* Variables for light mode                */
/* --------------------------------------- */
:root:not([data-theme=dark]), [data-theme=light], .light {

    --bg-color: rgb(245, 250, 245);
    --bg-color-alt: rgb(237, 250, 235); /*#CFF5C6;*/
    --fg-color: #023306;
    --fg-color-alt: #183302;
    --h1-color: #102616;
    --h2-color: #102616;
    --h3-color: #102616;
    --h4-color: #102616;
    --buttons-fg-color: #023306;
    --buttons-bg-color: rgb(211, 237, 209);
    --border-color: rgb(128, 160, 128);
    --blockquote-border-color: #204730;
    --table-row-stripped-bg-color: rgb(235, 250, 239);
    --table-head-bg-color: rgb(215, 225, 215);
    --table-head-fg-color: rgb(30, 30, 40);
    --table-caption-bg-color: rgb(230, 235, 245);
    --table-caption-fg-color: rgb(30, 30, 40);
    --li-color: rgb(30, 130, 30);
    --a-color: rgb(40, 100, 140);

    --header-fg-color: rgb(10, 50, 20);
    --header-bg-color: linear-gradient(170deg, rgb(240, 255, 245) 0%, rgb(228, 245, 211) 42%, rgb(220, 250, 228) 68%, rgb(87, 199, 133) 100%);

    --footer-fg-color: rgb(10, 50, 20);
    --footer-bg-color: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-color-alt) 30%, rgb(250, 250, 200) 70%, rgb(187, 207, 217) 100%);

    --action-buttons-bg-color: linear-gradient(to right, rgb(211, 237, 209), rgb(155, 219, 147));
    --action-buttons-hover-bg-color: linear-gradient(to left, rgb(211, 237, 209), rgb(155, 219, 147));

    --fieldset-bg-color: linear-gradient(170deg, var(--bg-color) 0%, rgb(240, 250, 240) 60%, var(--bg-color-alt) 100%)
}


/* --------------------------------------- */
/* Variables for dark mode                 */
/* --------------------------------------- */

@media not print {
    .dark {
        --bg-color: rgb(28, 32, 29);
        --bg-color-alt: rgb(10, 13, 10);

        --fg-color: rgb(245, 248, 246);
        --fg-color-alt: rgb(240, 245, 215);

        --h1-color: #e6f3ea;
        --h2-color: #e6f3ea;
        --h3-color: #e6f3ea;
        --h4-color: #e6f3ea;

        --buttons-fg-color: #e6f3ea;
        --buttons-bg-color: #1f3326;

        --border-color: rgb(200, 220, 200);
        --blockquote-border-color: #3e5f4b;

        --table-row-stripped-bg-color: #13231a;
        --table-head-bg-color: #1a2e22;
        --table-head-fg-color: #e6f3ea;
        --table-caption-bg-color: #15271d;
        --table-caption-fg-color: #e6f3ea;

        --li-color: #9ad7a8;
        --a-color: #7fbbe0;

        --header-fg-color: #e6f3ea;
        --header-bg-color: linear-gradient(
            170deg,
            #0f1b14 0%,
            #14241a 42%,
            #173022 68%,
            #1f5a3a 100%
        );

        --footer-fg-color: #e6f3ea;
        --footer-bg-color: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-color-alt) 30%, rgb(20, 25, 20) 70%, rgb(30, 38, 31) 100%);

        --action-buttons-bg-color: linear-gradient(to right, #1f5a3a, #3a8a60);
        --action-buttons-hover-bg-color: linear-gradient(to left, #0f4a2a, #3a8a60);

        --fieldset-bg-color: linear-gradient(170deg, var(--bg-color) 0%, rgb(20, 25, 20) 50%, var(--bg-color-alt) 100%);

    }
}

/* --------------------------------------- */
/* Global overrides                        */
/* --------------------------------------- */

body {
    width: 100%;
}

h3 {
    margin-top: 0;
}

blockquote {
    border: none;
}

dialog {
    border-width: calc(var(--border-width) * 2);
    border-radius: calc(var(--border-radius) * 3);
    max-width: 60%;
}

dialog button[name="popup-close-btn"] {
    position: absolute;
    top: 1vh;
    right: 1vw;
    background-color: var(--bg-color);
    border: var(--border-width) solid var(--bg-color);
    border-radius: 10rem;
    font-size: calc(var(--font-size) * 2.5);
    width: 8rem;
    height: 4rem;
}

select {
    color: var(--fg-color-alt);
    padding-left: 0.6rem;
    height: 2.6rem;
    font: var(--font-family-sans);
    background-image: var(--background-gradient);
    background-color: var(--bg-color);
    box-shadow: -0.2rem 0.2rem 0.6rem 0.2rem var(--shadow-color);
}

option {
    font: var(--font-family-sans);
    font-size: calc(var(--font-size * 0.5));
    color: var(--fg-color);
    background-image: var(--background-gradient);
    background-color: var(--bg-color);
}

nav#nav-content {
    justify-content: space-around;
}

nav#nav-content.nav-wexa.side:not(.dark) {
    background: linear-gradient(180deg,
    rgb(0, 50, 0) 0%,
    rgb(10, 60, 10) 20%,
    rgb(20, 90, 40) 40%,
    rgb(30, 100, 50) 70%,
    rgb(0, 50, 0) 100%);
}

.dark nav#nav-content.nav-wexa.side {
    background: linear-gradient(180deg,
    #0f1b14 0%,
    #0f1b14 10%,
    #173022 30%,
    rgb(10, 60, 10) 50%,
    rgb(10, 45, 5) 70%,
    #0f1b14 100%);
}

.skip {
    left: auto;
    right: 1rem;
}
.skip:hover {
    opacity: 0;
    cursor: pointer;
}

/* --------------------------------------- */
/* Header and footer                       */
/* --------------------------------------- */

#header-content,
#footer-content{
    min-width: 100vw;
    padding-left: 2rem;
}

#home-link-logo {
    width: calc(3 * var(--font-size));
    height: auto;
}

#link-title-header {
    display: flex;
    flex-direction: row;
    align-items: center;     /* vertical */
    justify-content: flex-start;
    gap: 1.5rem;
    font-size: calc(3 * var(--font-size));
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#link-title-header > a {
    border: none;
    padding: 0;
    margin: 0;
}

#header-content h2 {
    margin-top: 0;
    padding-top: 0;
}


.dark #header-content img {
    filter: brightness(0) invert(1);
}


/* --------------------------------------- */
/* Fieldset for a user to enter choices    */
/* --------------------------------------- */

.wizard-fieldset {
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.dark .wizard-fieldset {
    scrollbar-color: #666 #2a223a;
}

.wizard-fieldset:not([data-theme=dark]), [data-theme=light] {
    background: var(--fieldset-bg-color);
}

.wizard-fieldset form, .wizard-fieldset form *  {
    background: transparent;
}

.wizard-fieldset legend {
    background-color: #204730;
    color: rgb(240, 255, 245);
    vertical-align: center;
    font-size: calc(var(--font-size) * 1.10);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
    margin-left: 3rem;
}

.dark .wizard-fieldset legend {
    background-color: rgb(240, 255, 245);
    color: #204730;
}

/* --------------------------------------- */
/* Breadcrumb                              */
/* --------------------------------------- */

.tilesWrap {
    padding: 0;
    padding-left: 10%;
    padding-right: 10%;
    margin: auto;
    margin-top: -0.5rem;
    list-style: none;
    text-align: center;
    width: 100%;
}

.tilesWrap li {
    display: inline-block;
    width: 28%;
    height: calc(14 * var(--font-size));
    padding: 4rem 0.5rem 0.5rem;
    position: relative;
    vertical-align: top;
    margin: 0.8rem;
    color: var(--fg-color);
    background: var(--bg-color);
    border: var(--border-width) solid var(--shadow-color);
    border-radius: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 2px 1px var(--shadow-color);
}

.tilesWrap li .tile-step-nb {
    font-size: 4rem;
    margin: 0;
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    transition: all 0.3s ease-in-out;
    background: inherit;
    color: var(--fg-color-alt);
}

.tilesWrap li .tile-step-name {
    margin-top: -2rem;
    margin-left: 2.2rem;
    font-weight: var(--font-weight-semibold);
    font-size: 1.4rem;
    margin-bottom: 2rem;
    color: var(--fg-color-alt);
    background: inherit;
}

.tilesWrap li p {
    margin-top: 1rem;
    color: var(--header-bg-color);
    background: inherit;

    text-wrap: wrap;
    overflow-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

/* remove the automatically added '.' */
.tilesWrap li:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    transform: skew(2deg, 2deg);
}

.tilesWrap li.active, .tilesWrap li.active * {
    background: var(--bg-color-alt);
    color: var(--fg-color-alt);
}

.tilesWrap li.visited, .tilesWrap li.visited * {
    background: var(--bg-color-alt);
    color: var(--fg-color-alt);
}

.tilesWrap p:hover {
    text-wrap: wrap;
    overflow-wrap: break-word;
    overflow: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

/* --------------------------------------- */
/* Welcome                                 */
/* --------------------------------------- */


@media (min-width: 820px) {
    .intro {
        width: 65%;
    }
}

/* --------------------------------------- */
/* Action buttons                          */
/* --------------------------------------- */

.app-textcues-button {
    display: flex;
    flex-direction: row;
    align-content: center;
    font-size: calc(1.3 * var(--font-size));
    padding: 0.5rem;
    width: 20rem;
    max-width: 20rem;
    margin: 0.5rem auto;
    border-radius: calc(2 * var(--border-radius));
    border: calc(1px + var(--border-width)) solid var(--border-color);
    overflow: hidden;

    background-image: var(--action-buttons-bg-color) !important;
    background-size: 200% 100%;
    background-position: left center;
    transition: background-position 200ms ease-in-out;
}

.app-textcues-button:hover {
    background-image: var(--action-buttons-hover-bg-color) !important;
}

.app-textcues-button img {
    max-height: 90%;
    width: 3rem;
}

.app-textcues-button span {
    font-weight: var(--font-weight-semibold);
}

/* --------------------------------------- */
/* Table to choose a pronunciation         */
/* --------------------------------------- */

.sounds-table {
    width: 100%;
    padding: 0;
    margin: 0;
    caption-side: top;
    overflow-x: scroll;
}

.sounds-table td:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 12rem;
}

.phon-caption {
    background-color: transparent;
    color:var(--table-caption-fg-color);
    border-bottom: var(--border-width) solid var(--table-border-color);
    text-align: left;
    padding-left: 0;
    padding-top: 0.5rem;
    padding-bottom: var(--typography-spacing-vertical);
    font-weight: var(--font-weight-semibold);
}

.sounds-table td, .sounds-table th {
    border-bottom: var(--table-border-width) solid var(--border-color-alt);
}

/* --------------------------------------- */
/* Phonemes choice buttons                 */
/* --------------------------------------- */
/* The button with the chosen phonetization is aria-pressed=true. */
/* It has to look like a pressed button. */
/* And the "normal" state (aria-pressed=false) has to look like a non-pressed button */

button.pron {
    color: var(--fg-color-alt);
    border-width: 1px;
    border: var(--border-width) solid var(--shadow-color);
}

button.pron[aria-pressed="true"]  {
    opacity: 1;
    font-weight: var(--font-weight-bold);
    color: var(--fg-color);
    border-width: 2px;
    border: var(--border-width) solid var(--border-color);
    cursor: pointer;
    -webkit-box-shadow: inset 0 0 0.8rem var(--shadow-color);
    -moz-box-shadow: inset 0 0 0.8rem var(--shadow-color);
    box-shadow: inset 0 0 0.8rem var(--shadow-color);
}

/* --------------------------------------- */
/* YOYO... says something                  */
/* --------------------------------------- */

.yoyo-says {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    max-width: 34%;
}

#yoyo-says-message {
    width: 100%;
    margin: 0;
    padding: 1rem;
    position: relative;
    color: #023306;

    border: var(--border-width) solid var(--border-color);
    border-radius: 2rem;
    border-color: var(--tips-color);

    #background-color: var(--tips-bg-color);
    background: rgb(250, 250, 200);
}

#yoyo-says-message::after {
    content: '';
    position: absolute;
    left: 2rem;
    bottom: -1rem;
    border-width: 1rem 1rem 0;
    border-style: solid;
    border-color: var(--tips-color) transparent transparent;
}

p.error-details-title {
    display: inline-block;
    margin: 1rem 0 0.4rem 0;
    padding: 0.25rem 0.7rem;
    color: var(--fg-color-alt);
    font-weight: var(--font-weight-semibold);
    font-size: calc(var(--font-size * 1.2));
    position: relative;
    padding-left: 2rem;
}

p.error-details-title::before {
    content: '⛔';
    position: absolute;
    left: 0.3rem;
    top: 35%;
    transform: translateY(-50%);
    color: var(--fg-color);
}

p.error-details-content {
    font-family: var(--font-family-mono);
    font-size: calc(var(--font-size) * 0.75);
    font-weight: var(--font-weight-semithin);
    color: var(--fg-color-alt);
    padding-left: 2rem;
}

/* --------------------------------------- */
/* Styling elements of a form              */
/* --------------------------------------- */

/* Text of the button to submit the annotation */
#text {
    font: var(--font-family-sans);
}

/* --------------------------------------- */
/* To display the code                     */
/* --------------------------------------- */

p.coded-token {
    display: inline-block;
    margin: 1rem 0 0.4rem 0;
    padding: 0.25rem 0.7rem;
    color: var(--fg-color-alt);
    font-weight: var(--font-weight-semibold);
    font-size: calc(var(--font-size * 1.2));
    position: relative;
    padding-left: 2rem;
}

p.coded-token::before {
    content: '🧩';
    position: absolute;
    left: 0.3rem;
    top: 35%;
    transform: translateY(-50%);
    color: var(--fg-color);
}

/* coded text is supposed to be a 'flex-panel' from layout.css */
.coded-text {
    /* override .flex-panel { justify-content: space-evenly } */
    justify-content: flex-start;
    text-align: left;
    padding-left: 2rem;
    row-gap: 2rem;
    column-gap: 0.5rem;
}

@media only screen and (max-width: 820px) {
    .coded-text {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .coded-text > .coded-key {
        flex: 1 1 45%;
        max-width: 45%;
    }
}

@media only screen and (max-width: 520px) {
    .coded-text > .coded-key {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.coded-text { counter-reset: key; }

.coded-text > li {
    counter-increment: key;
    position: relative;
    padding-top: 1.2rem;
}

.coded-text > li::before {
    content: counter(key);
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: calc(1.15 * var(--font-size));
    font-weight: var(--font-weight-semibold);
    color: var(--coded-key-fg-color);
    opacity: 75%;
    padding: 0; margin: 0;
}

.coded-key {
    background: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--coded-key-border-color);
    border-radius: var(--border-radius);
    position: relative;
    min-width: 10rem;
    min-height: 5rem;
}

.coded-key > * {
    background: inherit;
}

.coded-key > span {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;

    font-size: calc(1.2 * var(--font-size));
    letter-spacing: var(--letter-spacing);
    color: var(--coded-key-fg-color);
    font-weight: var(--font-weight-semibold);
}

.key-illus {
    margin-top: 1rem;
    border-radius: var(--border-radius);
}

.key-illus figcaption {
    background: var(--coded-key-caption-bg-color);
    color: var(--coded-key-caption-fg-color);
    font-weight: var(--font-weight-semibold);
    font-size: calc(var(--font-size) * 1.2);
    border-radius: 1.1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: var(--border-width);
    height: 1.8rem;
    padding-top: 0.2rem;
    min-width: 8rem;
}

img.hand-img {
    background: inherit;
    width: 8rem;
    max-width: 100%;
    height: auto;
    transform: rotate(-90deg);
    clip-path: inset(18% 10% 18% 10%); /* top right bottom left */
}

img.face-img {
    background: inherit;
    width: 10rem;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------- */

#cs-keys {
    margin: auto;
    text-align: center;
    font-size: 1.5em;
}

/* --------------------------------------- */
/* Form for changing results style */

.details-form-results {
    margin-left: 20vw;
    margin-right: 20vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--bg-color-alt);
    border-style: solid;
    border-width: 1px;
    border-color: var(--border-color);
    border-radius: 10px;
}

summary {
    padding: 1em;
    color: var(--fg-color-alt);
    background-color: var(--bg-color);
    border-radius: 10px;
}

#change_results {
    background-color: var(--bg-color-alt);
}

#change_results label {
    color: var(--header-bg-color);
    background-color: var(--bg-color-alt);
}

#change_results select {
    border-radius: 8px;
    background-color: var(--bg-color-alt);
}

#change_results select * {
    background-color: var(--bg-color-alt);
}

#change_models_action_button {
    border-radius: 8px;
    padding: 0.8em;
    /*background-image: var(--background-gradient);*/
    margin-top: 1vh;
    margin-bottom: 1vh;
}

#select_result_level, #select_position_model, #select_angle_model, #select_timing_model {
    padding: 0.5em;
    /*background-image: var(--background-gradient);*/
}

#submit_models {
    margin: 0 auto;
}

/* ----------------------------------------------------------------------- */
/* Radio group with inputs+labels: customized to look like a Toggle group  */
/* ----------------------------------------------------------------------- */

.wexa-toggle-group {
    width: 80%;
    margin: 0.6rem 0 3rem 0;
    box-shadow: 0 0 0.9rem var(--shadow-color);

    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    overflow: visible;
}

.wexa-toggle {
    flex: 1 1 0;
    position: relative;
    display: flex;
    margin: 0;
}

.wexa-toggle input[type='radio'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    z-index: 2;
    cursor: pointer;
}

.wexa-toggle span {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.6rem 3.2rem 0.6rem 1rem;
    text-align: center;
    box-sizing: border-box;
    background-color: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
    font-weight: var(--font-weight-normal);
}

.wexa-toggle:first-child span {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.wexa-toggle:last-child span {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.wexa-toggle:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--border-width);
    background-color: var(--border-color);
    pointer-events: none;
    z-index: 1;
}

.wexa-toggle input[type='radio']:checked + span {
    background-color: var(--bg-color-alt);
    color: var(--fg-color-alt);
    font-weight: var(--font-weight-bold);
    box-shadow: inset 0 0 0.7rem var(--shadow-color);
}

.wexa-toggle input[type='radio']:checked + span::after {
    content: '✔';
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border: var(--border-width) solid var(--border-color);
    border-radius: 9999px;
    background-color: var(--bg-color);
    color: var(--fg-color-alt);
    pointer-events: none;
}

.wexa-toggle input[type='radio']:focus + span {
    background-color: var(--buttons-bg-color);
    z-index: 3;
    box-shadow: 0px 0px var(--outline-size) var(--outline-size) var(--outline-color), inset 0 0 0.7rem var(--shadow-color);

}

/* Mobile screens: tile of buttons is vertical */
/* ------------------------------------------- */

@media (max-width: 820px) {
    .wexa-toggle-group { align-items: stretch; }
    .wexa-toggle-group > label.wexa-toggle { display: block; width: 100%; box-sizing: border-box; }
    .wexa-toggle-group > label.wexa-toggle > span { width: 100%; box-sizing: border-box; }

    .wexa-toggle-group {
        width: 100%;
        margin: 1rem 0;
        flex-direction: column;
    }

    .wexa-toggle {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .wexa-toggle:last-child {
        border-bottom: none;
    }

    .wexa-toggle input[type='radio'] {
        inset: 1;
        width: 100%;
        height: 100%;
    }

    .wexa-toggle span {
        justify-content: flex-start;
        text-align: left;
        padding: 0.8rem 3.4rem 0.8rem 1rem;
        min-height: 3.2rem;
    }
}

#options_form > p {
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    margin: 1.2rem 0 0.6rem 0;
}

#options_form label[for^='select_'] {
    width: 60%;
    font-size: 0.9rem;
}

#select_position_model, #select_angle_model, #select_timing_model { font-size: 0.9rem; }

#options_form select[id^='select_'] {
    box-shadow: none;
    border-color: var(--border-color);
}


.socialnet {
    width:  2rem;
    height: 2rem;
    vertical-align: middle;
    margin: 0.5rem;
}