/* Load Global Font Settings */
@import "fonts.css";

/* Reset browser defaults within each shadow root */
* {
    margin: 0;
    padding: 0;
}

/* All Global CSS Variables */
:root, :host {
    /* Sizing Variables */
    --header-height: 3rem;
    --header-border-radius: 0.2rem;
    --border-radius-small: 4px;
    --border-radius-large: 8px;
    --body-padding: 2.5rem;
    --content-inset: 2.5rem;
    --h1-font-size: 2rem;
    --standard-font-size: 1.25rem;
    --panel-edge-padding: calc(var(--standard-font-size) / 2);
    --small-details-font-size: calc(var(--standard-font-size) / 1.5);
    --handle-size: 0.2rem;
    --nav-panel-width: 12rem;
    --dialog-content-padding: var(--standard-font-size);

    /* Color Variables */
    --primary-color: rgb(234,234,234);
    --secondary-color: rgb(208,208,208);
    --highlighted-color: rgb(187,203,235);
    --selected-color: rgb(158,193,240);

    --tertiary-color: #61c6c6;
    --complementary-color: #d17b96;

    --standard-text-color: rgba(0,0,0,1);
    --standard-contrast-color: rgba(255,255,255,1);
    --standard-background-color: rgba(255,255,255,1);
    --contrast-background-color: rgba(0,0,0,1);
    --dimmed-background-color: rgba(220,220,220,1);
    --dimmed-background-transparent: rgba(220,220,220,0.5);
    --low-transparent-dark: rgba(0,0,0,0.75);
    --highly-transparent-dark: rgba(0,0,0,0.33);
    --fully-transparent-light: rgba(255,255,255,0);
    --fully-transparent-dark: rgba(0,0,0,0);
    --info-background-color: rgb(170, 170, 170);
    --shadow-color: rgb(125, 125, 125);
    --subdued-text-color: rgb(115, 115, 115);
    --selected-text-color: rgb(136, 181, 240);
    --strong-text-color: rgb(0, 0, 0);
    --dividing-line-color: rgb(220, 220, 220);

    --highlighting: rgba(250, 247, 158, 1);
    --highlighting-underline: rgb(255, 196, 1);
    --highlighting-error: rgb(250, 170, 158);
    --highlighting-error-underline: rgb(255, 65, 1);

    --subtle-link: rgb(12,33,64);
    --subtle-link-visited: rgb(36, 12, 64);
    --subtle-link-hover: rgb(53, 18, 93);

    --badge-color: var(--selected-text-color);
    --warning-color: rgb(253, 44, 44);
    --warning-font-color: rgb(255, 255, 255);
    --annette-color: rgb(255,105,180);

    --nav-text-color: rgb(100, 100, 100);
    --nav-hover-color: rgb(150, 150, 150);
    --toggle-on-color: #3f9145;
    --toggle-off-color: rgb(192, 70, 70);

    /* Effects */
    --header-shadow: 0px 6px 8px var(--shadow-color);
    --main-header-breakpoint: 1000px;
}

.badge {
    --badge-tint: var(--badge-color);
    display: inline-block;
    border-radius: var(--border-radius-small);
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--badge-tint) 14%, white);
    color:            color-mix(in srgb, var(--badge-tint) 60%, black);
    border: 1px solid color-mix(in srgb, var(--badge-tint) 30%, white);
}

.context-menu {
    position: absolute;
    /* z-index: 10; */
    padding-top: calc(var(--standard-font-size) / 4);
    padding-bottom: calc(var(--standard-font-size) / 4);
    padding-left: calc(var(--standard-font-size) / 4);
    padding-right: calc(var(--standard-font-size) / 4);
    background: var(--secondary-color);
    border-radius: var(--border-radius-small);
    border: 1px solid var(--primary-color);
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,.2);
}

.context-menu-option {
    font-size: 1rem;
    /* padding-top: calc(var(--standard-font-size) / 8); */
    padding-bottom: calc(var(--standard-font-size) / 6);
    padding-left: calc(var(--standard-font-size) / 6);
    padding-right: calc(var(--standard-font-size) / 6);
    border-radius: var(--border-radius-small);
    cursor: default;
}

.context-menu-option:hover {
    background: var(--selected-color);
}

/* Remove all coloring for links */
a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: var(--standard-text-color);
}

/* No underline for insertions ever */
ins {
    text-decoration: none;
}

div.warning-message {
    background-color: var(--warning-color);
    border-radius: var(--header-border-radius);
    color: var(--warning-font-color);
    width: fit-content;
    padding: calc(var(--standard-font-size) / 6) 0.5em;
    display: flex;
    direction: ltr;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.warning-actions {
    display: flex;
    gap: 0.6em;
}

.warning-actions button + button {
    border-left: 1px solid var(--warning-font-color);
    padding-left: 0.6em;
}

.warning-actions button {
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    white-space: nowrap;
    text-decoration: underline;
}

.warning-actions button::before {
    content: '\2192\00a0';
}

.warning-actions button:hover {
    text-decoration: none;
}

@media (max-width: 1000px) {
    .warning-actions .compare-button {
        display: none;
    }
}

/* Sidebar drawer toggle button — shared across all container components.
   On mobile (≤768px) this is hidden by mobile_bottom_sheet.js in favour of a FAB. */
label.drawer-toggle {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 6px 6px 0;
    background: rgba(180, 180, 180, 0.35);
    border: none;
    box-shadow: none;
    z-index: 100;
    transition: background 150ms;
}

label.drawer-toggle::after {
    content: '\276E';
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
}

label.drawer-toggle:hover {
    background: rgba(180, 180, 180, 0.6);
}

input[type=checkbox]:checked ~ label.drawer-toggle::after {
    content: '\276F';
}

/* Drag-resize divider — thin line with centered pill handle */
div.h-divider {
    height: 20px;
    margin: 0;
    background: none;
    cursor: row-resize;
    touch-action: none;
    position: relative;
}

div.h-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--dividing-line-color);
}

div.h-divider::after {
    content: '';
    display: block;
    width: 48px;
    height: 8px;
    background: var(--subdued-text-color);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -35%);
    z-index: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: background 150ms;
}

div.h-divider:hover::after {
    background: var(--strong-text-color);
}

@media (max-width: 1000px) {
    :root, :host {
        --content-inset: 0.5rem;
    }
}

@media (max-width: 430px) {
    :root, :host {
        --content-inset: 0.25rem;
    }
}