.input-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
}

.input-wrapper__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--md-on-surface-variant);
}

/* A label that IS its control: the box and the words it belongs to, on one
   line and aligned to each other rather than to the text baseline. Used
   wherever a boolean is offered — the action parameter form and the
   canvas inspector. The class was on those labels from the start with no
   rule anywhere behind it, so the box sat wherever the default baseline
   put it and the words wrapped underneath it at narrow widths. */
.checkbox {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 13px;
    color: var(--md-on-surface);
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    flex: none;
    margin: 0;
    cursor: pointer;
}

/* A hover/focus explanation beside a label whose input alone cannot carry
   one — the credential name field's free text, so far. The native title
   attribute is the whole mechanism: no script, and it renders the
   caller's newline-separated lines as a multi-line tooltip in every
   current browser. */
.info-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: var(--md-shape-full);
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-style: normal;
    cursor: help;
}

.info-hint:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}

.input-wrapper__input {
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-xs);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--md-surface);
    color: var(--md-on-surface);
}

.input-wrapper__input::placeholder {
    color: var(--md-on-surface-variant);
}

.input-wrapper__input:hover {
    border-color: var(--md-on-surface);
}

.input-wrapper__input:focus {
    outline: none;
    border: 2px solid var(--md-primary);
    padding: 11px 13px;
}

.input-wrapper__hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--md-on-surface-variant);
}

.input-wrapper__hint code {
    font-family: var(--md-font-mono);
    font-size: 11px;
    color: var(--md-on-surface-variant);
    background: var(--md-surface-container-highest);
    padding: 1px 6px;
    border-radius: var(--md-shape-xs);
}

.input-wrapper__hint-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--md-on-surface-variant);
}

/* A hint whose content is an ORDER: the numbers are the point, so they stay
   and sit inside the field's own left edge rather than hanging out past it,
   which is where a bare <ol> with the reset's zero padding puts them. */
.input-wrapper__hint-steps {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--md-on-surface-variant);
}

.input-wrapper__hint-steps code {
    font-family: var(--md-font-mono);
    font-size: 11px;
    color: var(--md-on-surface-variant);
    background: var(--md-surface-container-highest);
    padding: 1px 6px;
    border-radius: var(--md-shape-xs);
}

.input-wrapper__hint-list strong {
    font-weight: 600;
    color: var(--md-on-surface);
}

/* One action's key catalogue: a label, then the keys as chips. A row per
   question rather than one run-on sentence, because the three are read
   separately — "what must arrive" is checked while authoring, "what it
   produces" while wiring a data edge to the next node. */
.key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
}

.key-row__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-right: 2px;
}

.input-wrapper__hint-list code {
    font-family: var(--md-font-mono);
    font-size: 11px;
    color: var(--md-on-surface-variant);
    background: var(--md-surface-container-highest);
    padding: 1px 6px;
    border-radius: var(--md-shape-xs);
}

/* A hint and a list of hints sit in the same field and must read as one
   thing, so they take their colour from one declaration.
   NOTE: that colour is a literal rather than a token, and this block also
   restates .input-wrapper__hint above it — pre-existing, left alone here
   because moving it to --md-on-surface-variant would re-colour every hint in
   the console, which is a look-and-feel decision rather than a fix to make in
   passing. */
.input-wrapper__hint,
.input-wrapper__hint-list {
    font-size: 12px;
    color: #8a97a8;
}