/* Small layer on top of Bootstrap 5.3 (main.css). The darker accent shade is used where white text
   sits on it, for sufficient contrast. */
:root {
    --tpf-accent: #f04e23;
    --tpf-accent-strong: #c43d14;
    --tpf-accent-hover: #a8330f;
    --tpf-page: #f6f6f4;
    --tpf-line: #e4e4df;
    --bs-link-color: var(--tpf-accent-strong);
    --bs-link-color-rgb: 196, 61, 20;
    --bs-link-hover-color: var(--tpf-accent-hover);
    --bs-link-hover-color-rgb: 168, 51, 15;
}

body {
    background-color: var(--tpf-page);
    border-top: 3px solid var(--tpf-accent);
}

.app-header {
    background-color: #fff;
    border-bottom: 1px solid var(--tpf-line);
}

.app-container {
    max-width: 1080px;
}

.app-home {
    font-weight: 600;
    text-decoration: none;
}

.app-narrow {
    max-width: 420px;
}

.card {
    border-color: var(--tpf-line);
}

.app-section-title {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .75rem;
}

.app-link-list li + li {
    margin-top: .4rem;
}

.btn-primary {
    --bs-btn-bg: var(--tpf-accent-strong);
    --bs-btn-border-color: var(--tpf-accent-strong);
    --bs-btn-hover-bg: var(--tpf-accent-hover);
    --bs-btn-hover-border-color: var(--tpf-accent-hover);
    --bs-btn-active-bg: var(--tpf-accent-hover);
    --bs-btn-active-border-color: var(--tpf-accent-hover);
    --bs-btn-disabled-bg: var(--tpf-accent-strong);
    --bs-btn-disabled-border-color: var(--tpf-accent-strong);
    --bs-btn-focus-shadow-rgb: 196, 61, 20;
}

.form-control:focus,
.form-select:focus {
    border-color: #ec9a80;
    box-shadow: 0 0 0 .25rem rgba(240, 78, 35, .2);
}

.app-blacklist td {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.app-details > summary {
    cursor: pointer;
    list-style-position: inside;
}

.is-busy {
    pointer-events: none;
    opacity: .65;
}