.icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.brand__mark {
    position: relative;
    display: inline-grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 2px solid var(--brand);
    border-radius: 50%;
}

.brand__mark > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

.brand__mark::after {
    position: absolute;
    right: -3px;
    bottom: -1px;
    width: 7px;
    height: 7px;
    content: "";
    background: var(--gold);
    border: 2px solid var(--paper);
    border-radius: 50%;
}

.brand__mark--small {
    width: 17px;
    height: 17px;
    border-width: 1.5px;
}

.brand__mark--small > span {
    width: 5px;
    height: 5px;
}

.brand__mark--small::after {
    width: 6px;
    height: 6px;
}

/* Логотип інспектора в шапці звіту і його сторінки, поруч зі знаком Caroche */
.brand-co {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.brand-co__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 34px;
    object-fit: contain;
}

.brand-co__sep {
    width: 1px;
    height: 22px;
    background: var(--line);
}

.btn {
    display: inline-flex;
    min-height: 48px;
    padding: 0 21px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    font-weight: 690;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

.btn--primary {
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    box-shadow: var(--shadow-button);
}

.btn--primary:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.btn--secondary {
    color: var(--brand-dark);
    background: var(--surface);
    border: 1px solid var(--line-strong);
}

.btn--secondary:hover:not(:disabled) {
    background: var(--brand-soft);
}

.btn--danger {
    color: #fff;
    background: var(--danger);
    border: 1px solid var(--danger);
}

.btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 88%, #17242c);
    border-color: color-mix(in srgb, var(--danger) 88%, #17242c);
}

.btn--text {
    padding-inline: 8px;
    color: var(--brand);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.btn--text:hover:not(:disabled) {
    background: var(--brand-soft);
}

.card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field > span,
.field > label {
    font-size: 12px;
    font-weight: 670;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 13px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    outline: none;
}

.field input,
.field select {
    min-height: 47px;
}

.field textarea {
    min-height: 96px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(47, 96, 116, .1);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
    border-color: var(--danger);
}

.field__error,
.field.is-invalid > small {
    color: var(--danger);
    font-size: 12px;
}

.field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    accent-color: var(--brand);
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: var(--radius-tag);
    background: var(--surface-soft);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
}

.chip--coordination {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.chip--scheduled {
    background: var(--remark-soft);
    color: var(--remark);
}

.chip--inspection {
    background: var(--brand);
    color: #fff;
}

.chip--report_submitted {
    background: var(--ok-soft);
    color: var(--ok);
}

.chip--ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.chip--remark {
    background: var(--remark-soft);
    color: var(--remark);
}

.chip--important {
    background: var(--important-soft);
    color: var(--important);
}

.chip--empty {
    background: var(--empty-soft);
    color: var(--empty);
}