:root {
    /* Background in light mode, text in dark mode */
    --light: hsl(198, 100%, 95%);
    --light-shade: hsl(198, 100%, 93%);

    /* Background in dark mode, text in light mode */
    --dark: hsl(198, 100%, 5%);
    --dark-shade: hsl(198, 100%, 7%);

    /* Primary colour used for logo, buttons, etc */
    --primary: hsl(198, 100%, 50%);

    /* Primary alternative used for pressed buttons */
    --primary-alt: hsl(205, 100%, 40%);

    /* Primary colour suitable for text in light and dark mode */
    --primary-text: hsl(205, 79%, 48%);

    /* Button shadows */
    --shadow-default: 2px 2px 4px hsla(0, 0%, 20%, 0.4);
    --shadow-hover: 2px 2px 4px hsla(0, 0%, 20%, 0.5);

    /* Various grays */
    --gray: hsl(0, 0%, 50%);
    --gray-light: hsl(0, 0%, 75%);
    --gray-dark: hsl(0, 0%, 25%);
    --gray-transparent: hsla(0, 0%, 50%, 0.25);

    /* Secondary colour just for help and abbreviations */
    --secondary: hsl(158, 100%, 35%);

    /* Frequency heatmap  */
    --freq0: hsla(198, 90%, 50%, 0.10);
    --freq1: hsla(200, 90%, 50%, 0.20);
    --freq2: hsla(202, 90%, 50%, 0.30);
    --freq3: hsla(204, 90%, 50%, 0.40);
    --freq4: hsla(206, 90%, 50%, 0.50);
    --freq5: hsla(208, 90%, 50%, 0.60);
    --freq6: hsla(210, 90%, 50%, 0.70);
    --freq7: hsla(212, 90%, 50%, 0.80);
    --freq8: hsla(214, 90%, 50%, 0.90);
    --freq9: hsla(216, 90%, 50%, 1.00);
    --freq10: hsla(218, 90%, 50%, 1.00);
}



body {
    font-family: "Inter", "sans-serif";
}

h3 {
    font-size: 130%;
    margin-top: 10px;
    margin-bottom: 1px;
}

div.dpd {
    border: 2px solid var(--primary);
    border-radius: 7px;
    line-height: 150%;
    margin: 0px 0px;
    overflow: auto;
    padding: 3px 7px;
    text-align: left;
}


p {
    line-height: 150%;
    margin: 0px 0px;
    vertical-align: middle;
    text-align: left;
}

b {
    font-weight: 700;
}

.epd {
    color: var(--primary-text);
}

.epd:hover {
    color: var(--primary-alt);
    text-decoration: underline;
}

a {
    color: var(--primary)
}

p.heading {
    margin: 0px 0px;
    padding: 2px 0px;
}

.underlined {
    border-bottom: 1px solid var(--primary);
    margin-bottom: 5px;
}

.overlined {
    border-top: 1px solid var(--primary);
    margin-top: 5px;
}

p.heading b {
    font-weight: 700;
}

p.footer {
    border-top: 1px solid var(--primary);
    font-size: 80%;
    padding: 5px 0px;
    margin-top: 5px;
}

hr {
    background-color: var(--gray-transparent);
    width: 100%;
    border: none;
    height: 1px;
    margin: 0;
    padding: 0;
    display: block;
}

/* tables */

table {
    margin: 3px 0px;

}

table.grammar {
    border: none;
}

table.grammar td,
table.grammar th {
    text-align: left;
    vertical-align: top;
    padding: 0px 0px;
}

table.grammar th {
    color: var(--primary-text);
    font-weight: 700;
    white-space: nowrap;
    padding: 0px 5px 2px 0px
}

table.grammar b {
    font-weight: 700;
}

/* sutta */

p.sutta {
    color: var(--primary-text);
    font-style: italic;
    padding: 0px 0px 3px 0px;
}

a.sutta_link {
    color: var(--primary-text);
    font-style: italic;
    text-decoration: none;
    font-weight: bold
}

a.sutta_link:hover {
    color: var(--primary-alt);
    text-decoration: underline;
}

/* inflection tables */

table.inflection {
    width: 100%;
    padding: 0 0 5px 0px;
    border-radius: 7px;
    border-collapse: separate;
    border: none;
    /* border-spacing: 0; */
}

table.inflection td,
table.inflection th {
    border-collapse: separate;
    border-radius: 7px;
    /* border-spacing: 0; */
    border: 1px solid var(--gray);
    line-height: 150%;
    padding: 5px 5px;
    text-align: center;
    vertical-align: middle;
}

table.inflection th {
    border: 1px solid var(--primary);
    color: var(--primary-text);
    font-weight: 700;
    white-space: nowrap;
}

table.inflection tr:first-child th:first-child {
    border-top-left-radius: 7px;
}

table.inflection tr:first-child th:last-child {
    border-top-right-radius: 7px;
}

table.inflection tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

table.inflection tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

span.gray {
    color: var(--gray);
}

a.jump {
    color: var(--primary);
    text-decoration: none;
    font-weight: bold;
}

/* family tables */

table.family {
    border: none;
}

table.family td,
table.family th {
    text-align: left;
    vertical-align: top;
}

table.family th {
    color: var(--primary-text);
    font-weight: 700;
    white-space: nowrap;
}

table.family td {
    padding-right: 7px;
}

table.family b {
    font-weight: 700;
}

/* buttons */

div.button-box {
    margin: 2px 0px 3px 0px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Изменено: добавлен селектор a.dpd-button */
a.button,
a.dpd-button {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    color: var(--dark);
    cursor: pointer;
    display: inline-block;
    font-size: 80%;
    font-weight: 400;
    margin: 1px 1px 2px 1px;
    padding: 2px 5px;
    text-decoration: none;
    user-select: none;
    box-shadow: var(--shadow-default);
}

/* Изменено: добавлен селектор a.dpd-button.close */
a.button.close,
a.dpd-button.close {
    float: right;
    margin: 10px;
}

/* Изменено: добавлен селектор a.dpd-button.active */
a.button.active,
a.dpd-button.active {
    background-color: var(--primary-alt);
    border-color: var(--primary-alt);
    color: var(--light);
    user-select: none;
}

/* Изменено: добавлен селектор a.dpd-button:hover */
a.button:hover,
a.dpd-button:hover {
    box-shadow: var(--shadow-hover);
    border: 1px solid var(--primary-alt);
    background-color: var(--primary-alt);
    color: var(--light);
    user-select: none;
}

.link {
    color: var(--primary-text);
    font-weight: 700;
    text-decoration: none;
}

.link:hover {
    color: var(--primary-alt);
    text-decoration: underline;
}

.hidden {
    display: none;
}

/* freq tables */

table.freq {
    border-radius: 7px;
    border-collapse: separate;
    border: none;
}

.vertical-text {
    writing-mode: vertical-lr;
    text-orientation: upright;
    inline-size: fit-content;
}

table.freq thead th {
    text-align: center;
}

table.freq tbody th {
    border: 1px solid var(--primary);
    border-radius: 7px;
    padding: 5px;
    text-align: center;
    width: 12px;
    white-space: nowrap;
    vertical-align: middle;
}


table.freq td {
    border-collapse: separate;
    border-radius: 7px;
    border: 1px solid var(--gray-transparent);
    font-size: 0.8em;
    min-width: 30px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: 2.5em;
}

table.freq td.void {
    border: 0px solid transparent;
}

table.freq td.gap {
    border: 0px solid transparent;
    width: 10px;
}

table.freq td.gr0 {
    border: 1px solid var(--freq0);
    border-color: var(--gray-transparent);
    color: transparent;
}

.dark-mode table.freq td.gr0 {
    border: 1px solid var(--freq0);
    border-color: var(--gray-transparent);
    color: transparent;
}

table.freq td.gr1 {
    background-color: var(--freq1);
    border-color: var(--freq1);
    color: var(--dark);
}

table.freq td.gr2 {
    background-color: var(--freq2);
    border-color: var(--freq2);
    color: var(--dark);
}

table.freq td.gr3 {
    background-color: var(--freq3);
    border-color: var(--freq3);
    color: var(--dark);
}

table.freq td.gr4 {
    background-color: var(--freq4);
    border-color: var(--freq4);
    color: var(--dark);
}

table.freq td.gr5 {
    background-color: var(--freq5);
    border-color: var(--freq5);
    color: var(--dark);
}

table.freq td.gr6 {
    background-color: var(--freq6);
    border-color: var(--freq6);
    color: var(--light);
}

table.freq td.gr7 {
    background-color: var(--freq7);
    border-color: var(--freq7);
    color: var(--light);
}

table.freq td.gr8 {
    background-color: var(--freq8);
    border-color: var(--freq8);
    color: var(--light);
}

table.freq td.gr9 {
    background-color: var(--freq9);
    border-color: var(--freq9);
    color: var(--light);
}

table.freq td.gr10 {
    background-color: var(--freq10);
    border-color: var(--freq10);
    color: var(--light);
}

.dark-mode table.freq td {
    color: var(--light);
}

/* variant */

table.variants,
table.grammar_dict {
    border-collapse: collapse;
    border: none;
    line-height: 150%;
    margin: 0px;
    max-width: 100%;
    overflow: auto;
    padding: 2px 0px;
    text-align: left;
    vertical-align: top;
    width: auto;
}

.variants th,
.variants td,
.grammar_dict th,
.grammar_dict td {
    padding: 2px 10px 0px 0px;
    text-align: left;
    vertical-align: center;
}

.variants td:first-child,
.variants td:nth-child(2) {
    white-space: nowrap;
}

/* help */

div.tertiary {
    border: 2px solid var(--secondary);
    border-radius: 7px;
    line-height: 150%;
    margin: 0px 0px;
    overflow: auto;
    padding: 3px 5px;
    text-align: left;
}

table.help {
    border: none;
    width: 100%;
}

table.help td,
table.help th {
    line-height: 150%;
    padding: 0px 5px 0px 0px;
    text-align: left;
    vertical-align: top;
}

table.help th {
    color: var(--secondary);
    font-weight: 700;
    width: 10%;
}

table.help td {
    width: 90%;
}

table.help b {
    font-weight: 700;
}

/* roots */

table.root_info {
    border: none;
}

table.root_info td,
table.root_info th {
    text-align: left;
    vertical-align: top;
    padding: 0px 0px;
}

table.root_info th {
    color: var(--primary-text);
    font-weight: 700;
    white-space: normal;
    padding: 0px 5px 2px 0px
}

table.root_info b {
    font-weight: 700;
}

table.root_family td,
table.root_family th {
    text-align: left;
    vertical-align: top;
}

table.root_family th {
    color: var(--primary-text);
    font-weight: 700;
    white-space: nowrap;
}

table.root_family b {
    font-weight: 700;
}

table.root_matrix {
    width: 100%;
}

table.root_matrix th,
table.root_matrix td {
    border-radius: 5px;
    line-height: 150%;
    vertical-align: top;
    padding: 5px 5px;
    overflow: auto;
}

table.root_matrix th {
    border: 1px solid var(--primary);
    color: var(--primary-text);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

table.root_matrix td {
    border: 1px solid var(--gray-transparent);
    text-align: left;
}

table.root_matrix td b {
    color: var(--primary-text);
    font-weight: 700;
    white-space: nowrap;
}



/* Исключение для маленьких кнопок play (возле IPA) */
a.button.small,
a.dpd-button.small {
    background-color: transparent; /* Убираем синий фон */
    border: none;                  /* Убираем рамку */
    box-shadow: none;              /* Убираем тень */
    padding: 0 2px;                /* Убираем большие отступы */
    margin: 0;
    display: inline-flex;          /* Чтобы иконка стояла ровно в строке */
    vertical-align: middle;
    width: auto;
    color: var(--primary-text);    /* Цвет иконки (можно поменять на var(--primary)) */
}

/* При наведении на маленькую кнопку */
a.button.small:hover,
a.dpd-button.small:hover {
    background-color: transparent;
    color: var(--primary-alt);     /* Цвет при наведении */
    border: none;
    box-shadow: none;
    transform: scale(1.1);         /* Небольшое увеличение для красоты */
}