/*
 * Contract template pages: a one-line task, a jump and three steps, then the
 * tool, then the guide. Logical properties only, so Arabic mirrors without
 * an RTL override.
 */
.hzct__opener {
    margin-block: 4px 8px;
}

.hzct__task {
    margin: 0 0 12px;
    max-inline-size: 40rem;
    font-size: 1.0625rem;
    line-height: 1.45;
}

.hzct__jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 20px;
    border-radius: 10px;
    background: var(--hagzi-primary, #0745D9);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.hzct__jump,
.hzct__jump:hover,
.hzct__jump:visited {
    color: #fff;
}

.hzct__steps {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: hzct-step;
}

.hzct__steps li {
    flex: 1 1 0;
    min-inline-size: 0;
    padding: 10px 12px;
    border: 1px solid #dfe3eb;
    border-radius: 12px;
    background: #f7f8fb;
    font-size: 0.875rem;
    line-height: 1.35;
}

.hzct__steps li::before {
    counter-increment: hzct-step;
    content: counter(hzct-step);
    display: block;
    margin-block-end: 2px;
    color: var(--hagzi-primary, #0745D9);
    font-weight: 700;
}

#hzct-form,
#hzct-downloads,
#hzct-guide {
    scroll-margin-top: 96px;
}
.hzct__notice {
    margin-block: 16px;
    padding: 14px 16px;
    border: 1px solid #f1c27d;
    border-radius: 12px;
    background: #fff8eb;
}

.hzct__notice strong {
    display: block;
    margin-block-end: 4px;
}

.hzct__guide h2,
.hzct__form h2 {
    margin-block: 28px 10px;
    font-size: 1.25rem;
}

.hzct__guide p,
.hzct__guide li {
    line-height: 1.75;
}

.hzct__guide ul,
.hzct__guide ol {
    padding-inline-start: 22px;
}

.hzct__faq details {
    border-block-end: 1px solid #e6e9f0;
}

.hzct__faq summary {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    font-weight: 600;
    cursor: pointer;
}

.hzct__faq details p {
    margin: 0 0 12px;
    line-height: 1.75;
}

.hzct__sources a {
    word-break: break-word;
}

.hzct__checked {
    color: #4b5263;
    font-size: 0.9rem;
}

.hzct__form,
.hzct__panel {
    margin-block: 16px;
    padding: 20px;
    border: 1px solid #dfe3eb;
    border-radius: 16px;
    background: #fff;
}

.hzct__form fieldset {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.hzct__form legend {
    margin-block-end: 10px;
    font-weight: 700;
}

.hzct__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
}

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

.hzct__field--wide {
    grid-column: 1 / -1;
}

.hzct__field label {
    font-weight: 600;
}

.hzct__field input,
.hzct__field select,
.hzct__field textarea {
    min-block-size: 44px;
    padding: 8px 12px;
    border: 1px solid #c9cfdb;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.hzct__field [aria-invalid="true"] {
    border-color: #b42318;
}

.hzct__error,
.hzct__errors {
    color: #b42318;
    font-size: 0.9rem;
}

.hzct__confirm {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-block: 8px 16px;
}

.hzct__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hzct__actions button {
    min-block-size: 44px;
    padding-inline: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--hagzi-primary, #0745D9);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hzct__actions button[value="word"] {
    border: 1px solid var(--hagzi-primary, #0745D9);
    background: #fff;
    color: var(--hagzi-primary, #0745D9);
}

.hzct__form :focus-visible,
.hzct a:focus-visible {
    outline: 3px solid var(--hagzi-focus, rgba(82, 50, 137, 0.28));
    outline-offset: 2px;
}

.hzct__notice p {
    margin: 0 0 8px;
}

.hzct__notice p:last-child {
    margin-block-end: 0;
}

.hzct__cite {
    font-size: 0.72em;
    line-height: 1.2;
    color: #4b5263;
    margin-inline-start: 2px;
}

.hzct__cite a {
    color: inherit;
    text-decoration: underline dotted;
}

.hzct__library {
    margin-block: 28px 8px;
}

.hzct__library h2 {
    font-size: 1.15rem;
    margin-block-end: 8px;
}

.hzct__library ul {
    padding-inline-start: 22px;
    line-height: 1.9;
}

.hzct__panel h2 {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.hzct__downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 12px 0;
}

.hzct__downloads a {
    padding: 10px 16px;
    border-radius: 10px;
    background: #0e7a5f;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.hzct__checklist {
    width: 100%;
    border-collapse: collapse;
}

.hzct__checklist th,
.hzct__checklist td {
    padding: 6px 8px;
    border-block-end: 1px solid #dfe3eb;
    text-align: start;
    vertical-align: middle;
}

.hzct__checklist select,
.hzct__checklist input {
    width: 100%;
}