/* Poshesh form runtime — the controls and chrome the shared form script drives.
   Deliberately theme-neutral: it is loaded inside the public theme, the workflow runner's card and
   the sign-in panel, so every colour comes from a variable with a sane fallback and nothing here
   sets a font. RTL-first, no build step, no inline styles. */

.pfx-form {
    --pfx-accent: var(--poshesh-primary, var(--vz-primary, #405189));
    --pfx-accent-soft: color-mix(in srgb, var(--pfx-accent) 12%, transparent);
    --pfx-muted: var(--poshesh-muted, var(--vz-secondary-color, #878a99));
    --pfx-border: var(--poshesh-border, var(--vz-border-color, #e3e6ea));
    --pfx-danger: var(--vz-danger, #e11d48);
    --pfx-radius: .6rem;
}

/* A field the runtime hid must actually disappear. The user-agent's `[hidden]` rule has the same
   specificity as any author rule and loses to a later one, so a stylesheet that gives these
   elements a `display` would silently defeat the whole conditional-field feature. (pitfall 103) */
.pfx-form [hidden],
.pfx-step-page[hidden] { display: none !important; }

/* Deliberately unscoped, unlike the rule above. A multi-step form's submit button belongs to
   whichever screen hosts the form, and two of the three put it outside `[data-poshesh-form]` —
   so a rule scoped to `.pfx-form` cannot reach it, and their own `.btn`/`.poshesh-flow-btn`
   display rules would win against the user agent's `[hidden]` anyway. */
[data-pfx-hidden] { display: none !important; }

/* ---------------- layout elements ---------------- */

.pfx-spacer { display: block; width: 100%; }
.pfx-html { min-width: 0; }
.pfx-html img { max-width: 100%; height: auto; }
.pfx-html table { max-width: 100%; }

/* ---------------- multi-step ---------------- */

.pfx-steps {
    display: flex; flex-wrap: wrap; gap: .35rem; width: 100%;
    margin: 0 0 1.1rem; padding: 0 0 .85rem;
    border-bottom: 1px solid var(--pfx-border);
}
.pfx-step-dot {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--pfx-border); background: transparent; color: var(--pfx-muted);
    border-radius: 2rem; padding: .3rem .75rem; font-size: .8rem; line-height: 1.6;
    cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pfx-step-dot:hover { border-color: var(--pfx-accent); color: var(--pfx-accent); }
.pfx-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--pfx-border); color: inherit; font-size: .72rem; font-weight: 700;
}
.pfx-step-dot.is-active {
    border-color: var(--pfx-accent); color: var(--pfx-accent); background: var(--pfx-accent-soft);
}
.pfx-step-dot.is-active .pfx-step-num { background: var(--pfx-accent); color: #fff; }
.pfx-step-dot.is-done { color: var(--pfx-accent); }
.pfx-step-dot.is-done .pfx-step-num { background: var(--pfx-accent); color: #fff; }
.pfx-step-caption { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pfx-step-actions { display: flex; gap: .5rem; width: 100%; margin: .35rem 0 .9rem; }
.pfx-step-back, .pfx-step-next {
    border: 1px solid var(--pfx-border); background: transparent; color: inherit;
    border-radius: var(--pfx-radius); padding: .5rem 1.1rem; font: inherit; cursor: pointer;
}
.pfx-step-next {
    margin-inline-start: auto;
    background: var(--pfx-accent); border-color: var(--pfx-accent); color: #fff;
}
.pfx-step-back:hover { border-color: var(--pfx-accent); color: var(--pfx-accent); }
.pfx-step-next:hover { filter: brightness(1.06); }

/* ---------------- rating ---------------- */

/* Radio inputs styled as stars: the control works with JavaScript switched off, keyboard
   navigation is the browser's own, and the posted value is a plain number. */
.pfx-rating { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.pfx-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.pfx-rating label {
    cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--pfx-border);
    transition: color .12s ease, transform .12s ease;
}
.pfx-rating label::before { content: "★"; }
.pfx-rating label:hover,
.pfx-rating label:hover ~ label,
.pfx-rating input:checked ~ label { color: #f7b924; }
.pfx-rating input:focus-visible + label { outline: 2px solid var(--pfx-accent); outline-offset: 2px; }
.pfx-rating label:hover { transform: scale(1.08); }

/* ---------------- range ---------------- */

.pfx-range { display: flex; align-items: center; gap: .6rem; }
.pfx-range input[type="range"] { flex: 1 1 auto; accent-color: var(--pfx-accent); min-width: 0; }
.pfx-range-value {
    min-width: 3.2rem; text-align: center; font-weight: 700; font-size: .85rem;
    color: var(--pfx-accent); background: var(--pfx-accent-soft);
    border-radius: 2rem; padding: .15rem .5rem;
}

/* ---------------- checkbox group ---------------- */

.pfx-choices { display: grid; gap: .3rem; }
.pfx-choices.is-inline { grid-auto-flow: column; grid-auto-columns: max-content; }
.pfx-choice { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.pfx-choice input { flex: 0 0 auto; margin: 0; }

/* ---------------- attachments ---------------- */

.pfx-upload__drop {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    border: 1.5px dashed var(--pfx-border); border-radius: var(--pfx-radius);
    padding: 1.1rem .8rem; text-align: center; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pfx-upload__drop:hover, .pfx-upload__drop.is-over {
    border-color: var(--pfx-accent); background: var(--pfx-accent-soft);
}
.pfx-upload__drop i { font-size: 1.5rem; color: var(--pfx-accent); }
.pfx-upload__drop small { color: var(--pfx-muted); font-size: .7rem; direction: ltr; }
.pfx-upload__input { position: absolute; opacity: 0; width: 0; height: 0; }
.pfx-upload.is-full .pfx-upload__drop { opacity: .5; pointer-events: none; }
.pfx-upload.is-busy .pfx-upload__drop { opacity: .6; pointer-events: none; }

.pfx-upload__list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.pfx-upload__item {
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid var(--pfx-border); border-radius: var(--pfx-radius);
    padding: .35rem .6rem; font-size: .8rem;
}
.pfx-upload__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-upload__item small { flex: 0 0 auto; color: var(--pfx-muted); font-size: .7rem; }
.pfx-upload__remove {
    flex: 0 0 auto; border: 0; background: transparent; color: var(--pfx-muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.pfx-upload__remove:hover { color: var(--pfx-danger); }
.pfx-upload__error { color: var(--pfx-danger); font-size: .75rem; margin: .35rem 0 0; }

/* ---------------- misc ---------------- */

.pfx-counter { display: block; font-size: .72rem; color: var(--pfx-muted); text-align: end; }
.pfx-hint-format { font-size: .72rem; color: var(--pfx-muted); }
.pfx-error { color: var(--pfx-danger); font-size: .78rem; margin: .25rem 0 0; }
.pfx-ltr { direction: ltr; text-align: start; }