/*
.. _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.

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

/* --------------------------------------- */
/* What is proper to the application       */
/* --------------------------------------- */
/* The palette is the one swapp gives: what follows names the few grounds it
   has no meaning for, and each is drawn from a colour of that palette, so
   the mode and the theme in force carry it. */

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

    /* The ground of a coded key, and the sign written on its caption. */
    --coded-key-bg-color: var(--card-bg-color);
    --coded-key-border-color: var(--border-color);
    --coded-key-fg-color: var(--card-fg-color);
    --coded-key-caption-bg-color: var(--buttons-bg-color);
    --coded-key-caption-fg-color: var(--buttons-fg-color);

    /* An action button wears the ground of a button, and the ground of a
       hovered one under the pointer. */
    --action-buttons-bg-color: var(--buttons-bg-color);
    --action-buttons-hover-bg-color: var(--buttons-bg-color-hover);

    /* The fieldset a user enters their choices in. */
    --fieldset-bg-color: linear-gradient(170deg, var(--card-bg-color) 0%, var(--bg-color-alt) 100%);
}

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

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

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

body {
    width: 100%;
}

/* The button of the design: its label is bold, and it carries a dropped
   shadow, faint and set below it. main_swapp.css draws that shadow under
   the pointer only. Same aspect as the websites resting on SPPAS. */
button:not(.menuitem), [role='button']:not(.menuitem) {
    font-weight: var(--font-weight-bold);
    box-shadow: 0 calc(var(--font-size) / 7) calc(var(--font-size) / 4) var(--shadow-color);
}

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%;
}

/* The info dialog is used for short messages (missing input, no twin
   found...): it should not stretch as wide as the error dialog, which
   also has to display a longer error-details block. */
#info_dialog {
    width: fit-content;
    max-width: min(90%, 32rem);
}

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;
    background-color: var(--bg-color);
    box-shadow: -0.2rem 0.2rem 0.6rem 0.2rem var(--shadow-color);
}

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

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

.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 > 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;
}

.wizard-fieldset {
    background: var(--fieldset-bg-color);
}

.wizard-fieldset legend {
    background-color: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
    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;
}

/* --------------------------------------- */
/* 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;
    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);
}

.tilesWrap li p {
    margin-top: 1rem;

    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-cues-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);
}

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

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

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

.app-cues-button.is-loading,
button.is-loading {
    cursor: wait;
    opacity: 0.6;
}

/* --------------------------------------- */
/* 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);
}

/* --------------------------------------- */
/* Personalized pronunciation: input + the */
/* "open phoneme piano" toggle button,     */
/* side by side, same height.              */
/* --------------------------------------- */

.sound-personalized-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.sound-personalized-cell input.sound_input {
    flex: 1 1 auto;
    /* Flex items default to "min-width: auto", which for an <input> is its
       intrinsic content size, not 0: without this, "flex-shrink: 1" is
       ignored and the field refuses to shrink to fit the column, spilling
       out of its container (and the toggle button along with it). */
    min-width: 0;
    align-self: center;
    width: auto;
    height: 2.2rem;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Same idiom as the piano's own injected controls
   (.wexa-key-piano-control, keypiano.css): a small, square icon button.
   Selector is "button.sound-piano-toggle", not ".sound-piano-toggle": the
   generic "button:not(.menuitem)" rule (main_swapp.css) has specificity
   (0,0,1,1) -- one class from ":not(.menuitem)" plus the element -- which
   otherwise beats a lone class selector and overrides this padding/height. */
button.sound-piano-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    height: 2.2rem;
    width: 2.2rem;
    margin: 0;
    padding: 0.2rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
    box-sizing: border-box;
}

button.sound-piano-toggle svg {
    height: 1.4rem;
    width: 1.4rem;
}

/* --------------------------------------- */
/* 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(--buttons-fg-color);
    border-width: 1px;
    border: var(--border-width) solid var(--shadow-color);
}

button.pron[aria-pressed="true"]  {
    opacity: 1;
    font-weight: var(--font-weight-bold);
    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: var(--fg-color);

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

    background: var(--tips-bg-color);
}

#yoyo-says-message::after {
    content: '';
    position: absolute;
    left: 2rem;
    bottom: -1rem;
    border-width: 1rem 1rem 0;
    border-style: solid;
    /* The arrow follows the bubble border, whatever the variant. */
    border-top-color: inherit;
    border-right-color: transparent;
    border-left-color: transparent;
}

/* The error yoyo bubble is red, like any error yoyo. */
#yoyo-says-message.error {
    color: var(--error-color);
    border-color: var(--error-color);
    background: var(--error-bg-color);
}

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              */
/* --------------------------------------- */

/* --------------------------------------- */
/* 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.2rem;
    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-color: var(--coded-key-bg-color);
    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 > span {
    position: absolute;
    top: 0.2rem;
    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);
    width: 80%;
    text-align: center;
}

.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;
    min-width: 8rem;
}

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

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

/* --------------------------------------- */
/* ListCueS piano keys reuse the ".coded-key" illustration above, but as a  */
/* repeated, clickable control rather than a one-off result: smaller.      */
/* Every dimension below is the TextCueS value scaled by the same 0.65.    */
/* --------------------------------------- */

.wexa-key-piano-key.coded-key {
    min-width: 6.5rem;    /* 10rem */
    min-height: 3.25rem;  /* 5rem */
}

.wexa-key-piano-key > span {
    font-size: calc(0.78 * var(--font-size));  /* 1.2 * var(--font-size) */
}

.wexa-key-piano-key .key-illus {
    margin-top: 0.65rem;  /* 1rem */
}

.wexa-key-piano-key .key-illus figcaption {
    font-size: calc(0.78 * var(--font-size));  /* 1.2 * var(--font-size) */
    margin-left: 0.65rem;   /* 1rem */
    margin-right: 0.65rem;  /* 1rem */
    height: 1.15rem;        /* 1.8rem */
    min-width: 5.2rem;      /* 8rem */
}

.wexa-key-piano-key img.hand-img {
    width: 5.2rem;   /* 8rem */
}

.wexa-key-piano-key img.face-img {
    width: 6.5rem;   /* 10rem */
}

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

#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 {
    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;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

#select_result_level, #select_position_model, #select_angle_model, #select_timing_model {
    padding: 0.5em;
}

#submit_models {
    margin: 0 auto;
}

/* ----------------------------------------------------------------------- */
/* Toggle group: the component of togglegroup.css, drawn for a form instead */
/* of a nav bar. A ".menuitem" is cut for a nav item -- fixed height, fixed */
/* width, no ground of its own once it is written outside a nav -- so what  */
/* the form needs is given here, and nothing else.                          */
/* ----------------------------------------------------------------------- */

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

.toggle-group > .menuitem {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 3rem;
    /* togglegroup.css pulls each item over its neighbour to fold two nav
       borders into one: the items of this group carry a single separator. */
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 3.2rem 0.6rem 1rem;
    cursor: pointer;
    background-color: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
    font-weight: var(--font-weight-normal);
}

.toggle-group > .menuitem:not(:last-child) {
    border-right: var(--border-width) solid var(--border-color);
}

.toggle-group > .menuitem:has(:checked) {
    font-weight: var(--font-weight-bold);
    box-shadow: inset 0 0 0.7rem var(--shadow-color);
}

/* The chosen item is named by a mark, not by its color alone. */
.toggle-group > .menuitem:has(:checked)::after {
    content: '\2714';
    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;
}

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

@media (max-width: 820px) {
    .toggle-group {
        width: 100%;
        margin: 1rem 0;
        flex-direction: column;
    }

    .toggle-group > .menuitem {
        justify-content: flex-start;
        text-align: left;
        padding: 0.8rem 3.4rem 0.8rem 1rem;
        min-height: 3.2rem;
        border-radius: 0;
    }

    .toggle-group > .menuitem:not(:last-child) {
        border-right: none;
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .toggle-group > .menuitem:first-child {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .toggle-group > .menuitem:last-child {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
}

#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;
}

/* --------------------------------------- */
/* The textarea or input of a piano entry  */
/* --------------------------------------- */

.cue-textarea {
    width: 100%;
    height: 4rem;
    box-sizing: border-box;
    text-align: center;
    font-size: calc(var(--font-size) * 2);
    font-weight: var(--font-weight-semibold);
    border: none;
    background: var(--bg-color-alt);
    color: var(--fg-color-alt);
}