/*
 * One system for the whole site.
 *
 * The theme grew with many hands and every page brought its own buttons
 * and its own cards. This file gathers them into one: one pair of
 * buttons, one card, one corner scale, one look for a link, one way for
 * the page to answer the pointer and one ring of light around the thing
 * that has the attention.
 *
 * The names of the colours, the distances and the corners are in
 * tokens.css.
 */

/* ---------------------------------------------------------------------------
   The signs
   --------------------------------------------------------------------------- */

.tlv-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.tlv-icon--fill {
    fill: currentColor;
    stroke: none;
}

/* A sign that carries a colour of its own. */
.tlv-icon--gold { color: var(--tlv-accent); }
.tlv-icon--navy { color: var(--tlv-primary); }
.tlv-icon--green { color: var(--tlv-success); }
.tlv-icon--red { color: var(--tlv-danger); }
.tlv-icon--muted { color: var(--tlv-muted); }

.tlv-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--tlv-radius-pill);
    background: var(--tlv-primary-soft);
    color: var(--tlv-primary);
}

.tlv-icon-badge--gold { background: var(--tlv-accent-soft); color: var(--tlv-accent-dark); }
.tlv-icon-badge--green { background: var(--tlv-success-soft); color: var(--tlv-success); }
.tlv-icon-badge--red { background: var(--tlv-danger-soft); color: var(--tlv-danger); }

/* ---------------------------------------------------------------------------
   The buttons
   --------------------------------------------------------------------------- */

.tlv-btn,
.tlv-btn-primary,
.tlv-btn-secondary,
.tlv-btn-ghost,
.cta-button,
.tlv-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--tlv-radius);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--tlv-move) var(--tlv-ease),
        border-color var(--tlv-move) var(--tlv-ease),
        color var(--tlv-move) var(--tlv-ease),
        transform var(--tlv-move-fast) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease);
}

.tlv-btn-primary,
.cta-button,
.tlv-submit {
    background: var(--tlv-accent);
    color: var(--tlv-primary);
    box-shadow: var(--tlv-shadow-sm);
}

.tlv-btn-primary:hover,
.cta-button:hover,
.tlv-submit:hover {
    background: var(--tlv-accent-dark);
    color: var(--tlv-primary);
    transform: translateY(-2px);
    box-shadow: var(--tlv-shadow);
}

.tlv-btn-secondary {
    background: var(--tlv-primary);
    color: #fff;
}

.tlv-btn-secondary:hover {
    background: var(--tlv-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--tlv-shadow);
}

.tlv-btn-ghost {
    background: transparent;
    color: var(--tlv-primary);
    border-color: var(--tlv-line-strong);
}

.tlv-btn-ghost:hover {
    border-color: var(--tlv-primary);
    background: var(--tlv-primary-softer);
    color: var(--tlv-primary);
}

.tlv-btn:active,
.cta-button:active,
.tlv-submit:active {
    transform: translateY(0);
}

.tlv-btn[disabled],
.tlv-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ---------------------------------------------------------------------------
   The links
   --------------------------------------------------------------------------- */

.tlv-link,
a.tlv-link {
    color: var(--tlv-primary);
    text-decoration: none;
    background-image: linear-gradient(var(--tlv-accent), var(--tlv-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size var(--tlv-move) var(--tlv-ease),
        color var(--tlv-move) var(--tlv-ease);
}

.tlv-link:hover,
a.tlv-link:hover {
    color: var(--tlv-accent-dark);
    background-size: 100% 2px;
}

/* ---------------------------------------------------------------------------
   The cards
   --------------------------------------------------------------------------- */

.tlv-card {
    background: var(--tlv-paper);
    border: 1px solid var(--tlv-line);
    border-radius: var(--tlv-radius-lg);
    padding: var(--tlv-space-5);
    box-shadow: var(--tlv-shadow-sm);
    transition: transform var(--tlv-move) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease),
        border-color var(--tlv-move) var(--tlv-ease);
}

a.tlv-card:hover,
.tlv-card--link:hover {
    transform: translateY(-2px);
    box-shadow: var(--tlv-shadow);
    border-color: var(--tlv-primary-soft);
}

/* ---------------------------------------------------------------------------
   The light of the attention
   --------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--tlv-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The ring of the theme is kept for the parts that already have one. */
.skip-link:focus,
.tlv-btn:focus-visible,
.tlv-card:focus-visible {
    box-shadow: var(--tlv-ring);
    outline: none;
}

/* ---------------------------------------------------------------------------
   The forms
   --------------------------------------------------------------------------- */

.tlv-form input[type="text"],
.tlv-form input[type="email"],
.tlv-form input[type="tel"],
.tlv-form input[type="date"],
.tlv-form input[type="number"],
.tlv-form select,
.tlv-form textarea {
    min-height: 44px;
    border: 1px solid var(--tlv-line-strong);
    border-radius: var(--tlv-radius-sm);
    background: var(--tlv-paper);
    color: var(--tlv-ink);
    transition: border-color var(--tlv-move) var(--tlv-ease),
        box-shadow var(--tlv-move) var(--tlv-ease);
}

.tlv-form input:focus,
.tlv-form select:focus,
.tlv-form textarea:focus {
    border-color: var(--tlv-primary);
    box-shadow: var(--tlv-ring);
    outline: none;
}

/* The name of a field is always seen. */
.tlv-form label {
    color: var(--tlv-ink-soft);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The notices
   --------------------------------------------------------------------------- */

.tlv-form-notice {
    border-radius: var(--tlv-radius);
    padding: var(--tlv-space-4) var(--tlv-space-5);
    margin: 0 0 var(--tlv-space-5);
    font-weight: 600;
}

.tlv-form-notice--sent {
    background: var(--tlv-success-soft);
    border: 1px solid #86efac;
    border-left: 4px solid var(--tlv-success);
    color: var(--tlv-success);
}

.tlv-form-notice--error {
    background: var(--tlv-danger-soft);
    border: 1px solid #fca5a5;
    border-left: 4px solid var(--tlv-danger);
    color: var(--tlv-danger);
}

/* ---------------------------------------------------------------------------
   The entrance of the page
   --------------------------------------------------------------------------- */

@keyframes tlv-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

[data-enter] {
    animation: tlv-rise var(--tlv-move-slow) var(--tlv-ease) both;
}

[data-enter="2"] { animation-delay: 90ms; }
[data-enter="3"] { animation-delay: 180ms; }

/* ---------------------------------------------------------------------------
   The marks of the ministry in the administration
   --------------------------------------------------------------------------- */

.tlv-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--tlv-radius-sm);
    color: var(--tlv-faint);
    text-decoration: none;
    transition: color var(--tlv-move) var(--tlv-ease),
        background-color var(--tlv-move) var(--tlv-ease),
        transform var(--tlv-move-fast) var(--tlv-ease);
}

.tlv-star:hover,
.tlv-star:focus-visible {
    color: var(--tlv-accent);
    background: var(--tlv-accent-soft);
    transform: translateY(-1px);
}

.tlv-star--on {
    color: var(--tlv-accent);
}

/* The mark of the country beside the name of the country. */
.tlv-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--tlv-line);
    background: var(--tlv-surface);
    color: var(--tlv-muted);
    font-size: 11px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   The list of the submissions
   --------------------------------------------------------------------------- */

.tlv-answer {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--tlv-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--tlv-surface);
    color: var(--tlv-muted);
}

.tlv-answer--yes { background: var(--tlv-success-soft); color: var(--tlv-success); }
.tlv-answer--no { background: var(--tlv-surface); color: var(--tlv-muted); }
.tlv-answer--urgent { background: var(--tlv-danger-soft); color: var(--tlv-danger); }

.tlv-submission-box__badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--tlv-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--tlv-surface);
    color: var(--tlv-ink-soft);
}

.tlv-submission-box__badge--publish { background: var(--tlv-success-soft); color: var(--tlv-success); }
.tlv-submission-box__badge--pending { background: var(--tlv-warning-soft); color: var(--tlv-warning); }

.tlv-submission-box__line { margin: 0 0 14px 0; }
.tlv-submission-box__line textarea { font-size: 13px; }
.tlv-submission-details th { font-weight: 600; }
.tlv-submission-details td { word-break: break-word; }