/* Issue checklist (assets/js/checklist.js): the editor on the issue form,
   the tick list on the worksheet card / issue drawer / review queue, the
   "3/5" badge, and the "criteria still open" confirmation.

   Layout uses logical properties (inline-start / inline-end), so the whole
   component mirrors for right-to-left languages; each criterion carries
   dir="auto" so mixed-script text reads in its own direction. */

.chk,
.chk-edit,
.chk-empty,
.chk-badge,
.chk-swal {
    --chk-ink: var(--ink);
    --chk-ink-2: var(--ink-3);
    --chk-mute: var(--muted-ink);
    --chk-line: var(--line);
    --chk-line-2: var(--line-strong);
    --chk-surface: #FFFFFF;
    --chk-soft: var(--surface-2);
    --chk-acc: var(--primary);
    --chk-acc-ink: var(--primary-ink);
    --chk-acc-soft: #EEF0FF;
    --chk-ok: var(--success);
    --chk-ok-ink: var(--success-ink);
    --chk-ok-soft: var(--success-soft);
    --chk-ok-tint: #F6FEF9;
    --chk-warn: var(--warning-ink);
    --chk-red: var(--danger);
    --chk-red-soft: var(--danger-soft);
    --chk-radius: 12px;
    --chk-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── shared bits ─────────────────────────────────────────────── */
.chk .sr-only,
.chk-badge .sr-only,
.chk__live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.chk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.chk-btn:focus-visible,
.chk-icon-btn:focus-visible,
.chk__toggle:focus-visible,
.chk-edit__add:focus-visible {
    outline: 2px solid var(--chk-acc);
    outline-offset: 2px;
}

.chk-btn--primary {
    background: var(--chk-acc);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.chk-btn--primary:hover {
    background: var(--chk-acc-ink);
}

.chk-btn--ghost {
    background: var(--chk-surface);
    border-color: var(--chk-line-2);
    color: var(--chk-ink-2);
}

.chk-btn--ghost:hover {
    background: var(--chk-soft);
    color: var(--chk-ink);
}

.chk-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--chk-mute);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.chk-icon-btn:hover:not(:disabled) {
    background: var(--chk-soft);
    color: var(--chk-ink);
}

.chk-icon-btn:disabled {
    opacity: .35;
    cursor: default;
}

.chk-icon-btn--danger:hover:not(:disabled) {
    background: var(--chk-red-soft);
    color: var(--chk-red);
}

/* ── the editor on the issue form ────────────────────────────── */
#issueModal .ip-check {
    padding: 18px 18px 14px;
}

.chk-edit__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 12px;
}

.chk-edit__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--chk-acc-soft);
    color: var(--chk-acc);
}

.chk-edit__icon svg,
.chk-empty__icon svg {
    width: 20px;
    height: 20px;
}

.chk-edit__titles {
    flex: 1;
    min-width: 0;
}

.chk-edit__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--chk-ink);
}

.chk-edit__count {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--chk-acc-soft);
    color: var(--chk-acc-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
}

.chk-edit__sub {
    margin: 3px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--chk-mute);
}

.chk-edit__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chk-edit__row {
    display: grid;
    grid-template-columns: 16px 26px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding-block: 6px;
    padding-inline: 2px 6px;
    border-radius: 10px;
    transition: background-color .15s;
}

.chk-edit__row:hover,
.chk-edit__row:focus-within {
    background: var(--chk-soft);
}

.chk-edit__row.is-dragging {
    opacity: .45;
}

.chk-edit__row.is-drop-before {
    box-shadow: inset 0 2px 0 var(--chk-acc);
}

.chk-edit__row.is-drop-after {
    box-shadow: inset 0 -2px 0 var(--chk-acc);
}

.chk-edit__handle {
    display: grid;
    place-items: center;
    height: 38px;
    color: var(--chk-mute);
    font-size: var(--fs-md);
    cursor: grab;
    opacity: 0;
    user-select: none;
    transition: opacity .15s;
}

.chk-edit__row:hover .chk-edit__handle,
.chk-edit__row:focus-within .chk-edit__handle {
    opacity: 1;
}

.chk-edit__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-block-start: 6px;
    border-radius: 50%;
    background: var(--chk-surface);
    border: 1px solid var(--chk-line-2);
    color: var(--chk-ink-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chk-edit__row.is-met .chk-edit__num {
    background: var(--chk-ok);
    border-color: var(--chk-ok);
    color: #FFFFFF;
}

.chk-edit__input {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--chk-line-2);
    border-radius: 9px;
    background: var(--chk-surface);
    color: var(--chk-ink);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    field-sizing: content;   /* grows with its lines; checklist.js measures where unsupported */
    text-align: start;
    transition: border-color .15s, box-shadow .15s;
}

.chk-edit__input::placeholder {
    color: var(--faint-ink);
}

.chk-edit__input:focus {
    outline: none;
    border-color: var(--chk-acc);
    box-shadow: 0 0 0 3px var(--chk-acc-soft);
}

.chk-edit__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--fs-xs);
}

.chk-edit__meta:not(:empty) {
    margin-block-start: 4px;
}

.chk-edit__met {
    color: var(--chk-ok-ink);
    font-weight: 600;
}

.chk-edit__met.is-changed {
    color: var(--chk-warn);
}

.chk-edit__chars {
    margin-inline-start: auto;
    color: var(--chk-mute);
    font-variant-numeric: tabular-nums;
}

.chk-edit__chars.is-over {
    color: var(--chk-red);
    font-weight: 700;
}

.chk-edit__tools {
    display: flex;
    gap: 2px;
    padding-block-start: 4px;
    opacity: 0;
    transition: opacity .15s;
}

.chk-edit__row:hover .chk-edit__tools,
.chk-edit__row:focus-within .chk-edit__tools {
    opacity: 1;
}

.chk-edit__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-block-start: 10px;
    padding-inline-start: 50px;
}

.chk-edit__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px dashed var(--chk-line-2);
    border-radius: 9px;
    background: transparent;
    color: var(--chk-acc);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.chk-edit__add:hover {
    background: var(--chk-acc-soft);
    border-color: var(--chk-acc);
}

.chk-edit__link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--chk-ink-2);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--chk-line-2);
    text-underline-offset: 3px;
    cursor: pointer;
}

.chk-edit__link:hover {
    color: var(--chk-acc);
}

.chk-edit__hint {
    margin-inline-start: auto;
    color: var(--chk-mute);
    font-size: var(--fs-xs);
}

.chk-edit__status {
    margin: 4px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--chk-soft);
    color: var(--chk-mute);
    font-size: var(--fs-sm);
}

.chk-edit__status--err {
    background: var(--chk-red-soft);
    color: var(--chk-red);
}

/* empty state */
.chk-empty {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    align-items: center;
    padding: 16px;
    border: 1.5px dashed var(--chk-line-2);
    border-radius: var(--chk-radius);
    background: linear-gradient(180deg, var(--chk-soft), var(--chk-surface));
}

.chk-empty__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--chk-acc-soft);
    color: var(--chk-acc);
}

.chk-empty__text {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--chk-mute);
}

.chk-empty__text b {
    font-size: var(--fs-md);
    color: var(--chk-ink);
}

.chk-empty__actions {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-inline-start: 56px;
}

/* ── the tick list ───────────────────────────────────────────── */
.chk {
    position: relative;
    margin-block-start: var(--sp-3);
    border: 1px solid var(--chk-line);
    border-radius: var(--chk-radius);
    background: var(--chk-surface);
    color: var(--chk-ink);
}

.chk__head {
    padding: 10px 12px 12px;
    border-bottom: 1px solid transparent;
}

.chk:has(.chk__toggle[aria-expanded="true"]) .chk__head {
    border-bottom-color: var(--chk-line);
}

/* The whole header is the open / close button. */
.chk__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.chk__titles {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: var(--lh-tight);
}

.chk .chk__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--chk-ink);
}

.chk__progress {
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--chk-mute);
}

.chk__progress.is-done {
    color: var(--chk-ok-ink);
    font-weight: 500;
}

.chk__count {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--chk-ink-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chk__count span {
    margin-inline: 1px;
    color: var(--chk-mute);
    font-weight: 400;
}

.chk__count.is-done {
    background: var(--chk-ok-soft);
    color: var(--chk-ok-ink);
}

.chk__caret {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--chk-mute);
    transition: transform .2s var(--chk-ease), background-color .15s;
}

.chk__caret svg {
    width: 14px;
    height: 14px;
}

.chk__toggle:hover .chk__caret {
    background: var(--surface-3);
    color: var(--chk-ink);
}

.chk__toggle[aria-expanded="false"] .chk__caret {
    transform: rotate(-90deg);
}

[dir="rtl"] .chk__toggle[aria-expanded="false"] .chk__caret {
    transform: rotate(90deg);
}

.chk__bar {
    height: 4px;
    margin-top: 10px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    overflow: hidden;
}

.chk__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--chk-acc);
    transition: width .45s var(--chk-ease);
}

.chk__bar.is-done i {
    background: var(--chk-ok);
}

/* progress ring */
.chk-ring {
    width: 22px;
    height: 22px;
    flex: none;
}

.chk-ring__track {
    fill: none;
    stroke: var(--surface-3);
    stroke-width: 3;
}

.chk-ring__fill {
    fill: none;
    stroke: var(--chk-acc);
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .5s var(--chk-ease), stroke .3s;
}

.chk:has(.chk__bar.is-done) .chk-ring__fill {
    stroke: var(--chk-ok);
}

.chk-ring__tick {
    fill: none;
    stroke: var(--chk-ok);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14;
    stroke-dashoffset: 0;
    animation: chk-draw .45s var(--chk-ease) both;
}

.chk__list {
    margin: 0;
    padding: 6px;
    list-style: none;
}

.chk__list[hidden] {
    display: none;
}

.chk-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding-block: 2px;
    padding-inline: 0 8px;
    border-radius: 8px;
    transition: background-color .15s;
}

.chk-item:hover {
    background: var(--chk-soft);
}

/* The checkbox: the real input stays in place (so keyboard, screen
   readers and forms all work) but is invisible over a drawn box. The
   label is a 36px target around an 18px box. */
.chk-item__check {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.chk-item__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.chk-item__box {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--chk-line-2);
    border-radius: 5px;
    background: var(--chk-surface);
    color: #FFFFFF;
    transition: background-color .18s, border-color .18s, transform .18s var(--chk-ease), box-shadow .18s;
}

.chk-item__box svg {
    width: 12px;
    height: 12px;
}

.chk-item__box path {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    transition: stroke-dashoffset .25s var(--chk-ease) .05s;
}

.chk-item__check:hover .chk-item__box {
    border-color: var(--chk-acc);
}

.chk-item__input:focus-visible + .chk-item__box {
    box-shadow: 0 0 0 3px var(--chk-acc-soft), 0 0 0 4.5px var(--chk-acc);
}

.chk-item__input:checked + .chk-item__box {
    border-color: var(--chk-ok);
    background: var(--chk-ok);
}

.chk-item__input:checked + .chk-item__box path {
    stroke-dashoffset: 0;
}

.chk-item__check:active .chk-item__box {
    transform: scale(.88);
}

.chk-item__input:disabled {
    cursor: not-allowed;
}

.chk-item__input:disabled + .chk-item__box {
    opacity: .55;
}

.chk-item__check:has(.chk-item__input:disabled) {
    cursor: not-allowed;
}

.chk-item.is-saving .chk-item__box {
    animation: chk-pulse .9s ease-in-out infinite;
}

.chk-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-block: 8px 6px;
}

.chk-item__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--chk-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-align: start;
}

.chk-item.is-met .chk-item__text {
    color: var(--chk-ink-2);
}

.chk-item__meta {
    font-size: var(--fs-2xs);
    color: var(--chk-mute);
    font-variant-numeric: tabular-nums;
}

.chk-item__meta::before {
    content: "✓ ";
    color: var(--chk-ok);
    font-weight: 700;
}

/* compact: the review queue */
.chk--compact .chk__head {
    padding-block: 8px 10px;
}

/* In the drawer and the review card the section sits in a flow of
   smaller type, so it keeps its own spacing. */
.drawer .chk,
.ws-card .chk {
    margin-block: 12px 4px;
}

/* ── the "3/5" badge ─────────────────────────────────────────── */
.chk-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 1px;
    padding-inline: 5px 7px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--chk-ink-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
}

.chk-badge svg {
    width: 12px;
    height: 12px;
}

.chk-badge.is-done {
    background: var(--chk-ok-soft);
    color: var(--chk-ok-ink);
}

/* ── "criteria still open" confirmation (SweetAlert) ─────────── */
.chk-confirm {
    max-height: 220px;
    margin: 4px 0 12px;
    padding-block: 10px;
    padding-inline: 30px 12px;
    overflow-y: auto;
    border: 1px solid var(--chk-line, var(--line));
    border-radius: 10px;
    background: var(--warning-soft);
    color: var(--ink);
    font-size: var(--fs-md);
    line-height: 1.5;
    text-align: start;
    white-space: pre-line;
}

.chk-confirm li + li {
    margin-block-start: 6px;
}

.chk-confirm__more {
    list-style: none;
    color: var(--muted-ink);
    font-weight: 600;
}

.chk-confirm__body {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--ink-3);
}

.chk-swal .swal2-textarea {
    min-height: 160px;
    font-size: var(--fs-md);
    line-height: 1.5;
    text-align: start;
}

.chk-swal .swal2-input-label {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--ink-3);
}

/* ── motion ──────────────────────────────────────────────────── */
@keyframes chk-draw {
    from {
        stroke-dashoffset: 20;
    }
}

@keyframes chk-pulse {
    50% {
        opacity: .45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chk *,
    .chk-edit *,
    .chk-empty * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── touch screens: tools always visible, bigger targets ─────── */
@media (hover: none) {
    .chk-edit__handle,
    .chk-edit__tools {
        opacity: 1;
    }

    .chk-icon-btn {
        width: 36px;
        height: 36px;
    }

    .chk-item__check {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 600px) {
    .chk-edit__row {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .chk-edit__handle {
        display: none;
    }

    /* On a phone the move / remove buttons appear under the item being
       edited rather than taking a row under every item. */
    .chk-edit__tools {
        display: none;
        grid-column: 2;
        justify-content: flex-end;
        padding-block-start: 0;
    }

    .chk-edit__row:focus-within .chk-edit__tools {
        display: flex;
    }

    .chk-edit__foot,
    .chk-empty__actions {
        padding-inline-start: 0;
    }

    .chk-edit__hint {
        display: none;
    }
}

/* ── Windows high-contrast / forced colours ──────────────────── */
@media (forced-colors: active) {
    .chk-item__box {
        border-color: ButtonText;
    }

    .chk-item__input:checked + .chk-item__box {
        background: Highlight;
        border-color: Highlight;
        color: HighlightText;
    }

    .chk__bar i {
        background: Highlight;
    }
}

/* Done was asked for with criteria still open: the checklist is ringed until it is dealt with. */
.chk.chk--need {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .15);
}