/**
 * Field help: the desktop card and the mobile bottom sheet. Both render the
 * same `.vo-help__*` parts; only the container differs.
 */

/* Anchored against the window by `Vo.Help` from the sheet the field stands on,
   and outside the zoomed wrap, so it reads 1:1 whatever the Vordruck is scaled
   to. It has no height of its own: it is as tall as it needs to be and no
   taller than the window, which is what keeps most fields off a scrollbar.
   Width and max-height are the starting point Vo.Help overrides. */
.vo-card {
    position: fixed;
    left: 0;
    top: var(--sp-5);
    z-index: var(--z-card);
    width: var(--measure-xs);
    max-height: calc(100vh - var(--sp-5) * 2);
    display: flex;
    background: var(--bg-surface);
    border: var(--bw) solid var(--border-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-help);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--sp-3) * -1));
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                visibility 0s linear var(--t-base);
}

.vo-card[data-shown="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
}

.vo-help {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    width: 100%;
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    overflow: auto;
}

.vo-help__header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: var(--bw-thick) solid var(--chrome-accent);
}

.vo-help__title {
    flex: 1;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--chrome-accent-dark);
}

.vo-help--empty .vo-help__title {
    color: var(--text-faint);
}

.vo-help__section-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.vo-help__section-body {
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--text);
    white-space: pre-wrap;
}

.vo-help__examples {
    list-style: none;
    padding: 0;
    margin-top: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Each example is the value it offers: pressing it writes it into the field. */
.vo-help__example {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: var(--sp-3) var(--sp-5);
    background: var(--ok-bg);
    border: var(--bw) solid var(--ok-accent);
    border-radius: var(--r-sm);
    white-space: pre-wrap;
    text-align: left;
    color: var(--ok-fg);
    cursor: pointer;
}

.vo-help__example:hover {
    background: var(--ok-accent);
    color: var(--text-on-dark);
}

.vo-help__status {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-sm);
}

.vo-help__status[data-valid="true"] {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.vo-help__status[data-valid="false"] {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.vo-help__hint {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--text-muted);
    margin-top: var(--sp-3);
}

.vo-help__rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.vo-help__rule {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text);
}

/* A rule nothing has judged yet is a bullet in muted ink: an untouched field
   has not failed its conditions, it has not been asked. */
.vo-help__rule-mark {
    flex: 0 0 auto;
    width: var(--sp-6);
    font-weight: var(--fw-bold);
    text-align: center;
    color: var(--chrome-muted);
}

.vo-help__rule[data-status="pass"] .vo-help__rule-mark {
    color: var(--ok-border);
}

.vo-help__rule[data-status="fail"] .vo-help__rule-mark {
    color: var(--err-strong);
}

.vo-help__rule[data-status="fail"] {
    color: var(--err-fg);
    font-weight: var(--fw-semibold);
}

/* The summary is the section's own title, so folded it reads as one more
   heading rather than as something missing. */
.vo-help__fold > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.vo-help__fold > summary::-webkit-details-marker {
    display: none;
}

.vo-help__fold > summary::after {
    content: '';
    width: var(--sp-3);
    height: var(--sp-3);
    border-right: var(--bw-thick) solid currentColor;
    border-bottom: var(--bw-thick) solid currentColor;
    transform: translateY(calc(var(--sp-1) * -1)) rotate(45deg);
}

.vo-help__fold[open] > summary::after {
    transform: translateY(var(--press-shift)) rotate(225deg);
}

.vo-help__fold > summary:hover {
    color: var(--chrome-accent-dark);
}

.vo-help__fold[open] > summary {
    margin-bottom: var(--sp-3);
}

.vo-help__change {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.vo-help__change li {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--text);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-sm);
    border-left: var(--bw-stripe) solid var(--text-faint);
    background: var(--bg-row);
}

.vo-help__change-tag {
    align-self: flex-start;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.vo-help__change li[data-change-type="unterschrift"] {
    border-left-color: var(--err-border);
    background: var(--err-bg);
}

.vo-help__change li[data-change-type="unterschrift"] .vo-help__change-tag {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.vo-help__change li[data-change-type="einvernehmen"] {
    border-left-color: var(--warn-border);
    background: var(--warn-bg);
}

.vo-help__change li[data-change-type="einvernehmen"] .vo-help__change-tag {
    background: var(--warn-tag-bg);
    color: var(--warn-fg);
}

.vo-help__change li[data-change-type="information"] {
    border-left-color: var(--ok-border);
    background: var(--ok-bg);
}

.vo-help__change li[data-change-type="information"] .vo-help__change-tag {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.vo-help__change-condition {
    line-height: var(--lh-loose);
}

.vo-help__change-facts {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-2) 0 0;
    padding-top: var(--sp-4);
    border-top: var(--bw) solid var(--border-soft);
}

.vo-help__change-facts dt {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    line-height: var(--lh-loose);
    white-space: nowrap;
}

.vo-help__change-facts dd {
    margin: 0;
    line-height: var(--lh-normal);
}

.vo-help__change li.vo-help__change-source {
    padding: 0;
    border-left: none;
    background: none;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.vo-help__change li.vo-help__deadline {
    gap: var(--sp-4);
    border-left-color: var(--chrome-muted);
    background: var(--bg-section);
}

.vo-help__change li[data-change-type="deadline"] .vo-help__change-tag {
    background: var(--bg-row);
    color: var(--text-muted);
}

.vo-help__deadline-short {
    font-weight: var(--fw-semibold);
}

.vo-help__deadline-long {
    line-height: var(--lh-normal);
    color: var(--text-soft);
}

.vo-help__deadline-source {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--text-muted);
}

#help-backdrop,
#help-sheet {
    display: none;
}

@media (max-width: 768px) {
    /* Mobile answers a field in the bottom sheet, whatever the view. */
    .vo-card {
        display: none;
    }

    #help-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-backdrop);
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base) var(--ease);
    }

    #help-backdrop[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
    }

    #help-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sheet);
        background: var(--bg-surface);
        color: var(--text);
        font-family: var(--font-ui);
        font-size: var(--fs-base);
        border-top-left-radius: var(--r-xl);
        border-top-right-radius: var(--r-xl);
        box-shadow: var(--shadow-bottomsheet);
        padding: var(--sp-4) var(--sp-7) calc(var(--sp-8) + env(safe-area-inset-bottom));
        max-height: 70vh;
        max-height: 70dvh;
        transform: translateY(100%);
        transition: transform var(--t-slow) var(--ease);
    }

    #help-sheet[data-open="true"] {
        transform: translateY(0);
    }

    /* The bar is drawn in the padding box, so the grip stays a comfortable
       target while reading as a thin line. */
    .vo-help-sheet__handle {
        align-self: center;
        width: calc(var(--sp-11) + var(--sp-10));
        height: var(--sp-9);
        padding: var(--sp-5) var(--sp-8);
        margin: calc(var(--sp-2) * -1) 0 var(--sp-2);
        cursor: grab;
        background-clip: content-box;
        background-color: var(--border-control);
        border-radius: var(--r-pill);
        touch-action: none;
    }

    .vo-help-sheet__handle:active {
        cursor: grabbing;
    }

    .vo-help-sheet__header {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        padding-bottom: var(--sp-4);
        border-bottom: var(--bw) solid var(--border-soft);
    }

    .vo-help-sheet__title {
        flex: 1 1 auto;
        font-size: var(--fs-xl);
        font-weight: var(--fw-bold);
        color: var(--chrome-accent-dark);
        margin: 0;
    }

    .vo-help-sheet__body {
        overflow: auto;
        padding-top: var(--sp-5);
        display: flex;
        flex-direction: column;
        gap: var(--sp-6);
    }

    .vo-help-sheet__text {
        font-size: var(--fs-base);
        line-height: var(--lh-normal);
        color: var(--text);
        margin: 0 0 var(--sp-3);
    }

    .vo-help-sheet__section h3 {
        font-size: var(--fs-xs);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ls-caps);
        color: var(--text-muted);
        margin: 0 0 var(--sp-3);
    }

    .vo-help-sheet__examples {
        list-style: disc inside;
        font-size: var(--fs-xs);
        line-height: var(--lh-loose);
        color: var(--text-soft);
        padding: 0;
        margin: 0;
    }

    .vo-help-sheet__change {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }

    .vo-help-sheet__change li {
        font-size: var(--fs-base);
        line-height: var(--lh-normal);
        color: var(--text);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding: var(--sp-4) var(--sp-5);
        border-radius: var(--r-sm);
        background: var(--bg-section);
    }

    .vo-help-sheet__change li[data-change-type="unterschrift"] {
        background: var(--err-tag-bg);
        color: var(--err-fg);
    }

    .vo-help-sheet__change li[data-change-type="einvernehmen"] {
        background: var(--warn-tag-bg);
        color: var(--warn-fg);
    }

    .vo-help-sheet__change li[data-change-type="information"] {
        background: var(--ok-bg);
        color: var(--ok-fg);
    }

    .vo-help-sheet__change-tag {
        font-size: var(--fs-xs);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ls-caps);
    }
}