/* Shared form. Each concept sets the --f-* tokens on its [data-lvf] wrapper. */
[data-lvf] [hidden] { display: none !important; }
[data-lvf] {
  --f-bg: #fff; --f-ink: #0d0d0d; --f-mute: #555; --f-line: rgba(13,13,13,.1);
  --f-tile: #f5f6f4; --f-tile-on: #e3fbef; --f-accent: #18E299; --f-accent-ink: #0d0d0d;
  --f-key: #fff; --f-radius: 22px;
  background: var(--f-bg); color: var(--f-ink);
  border-radius: var(--f-radius); padding: clamp(22px, 3vw, 34px);
  font-size: 17px; position: relative;
}
.lvf-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--f-mute); flex-wrap: wrap; font-variant-numeric: tabular-nums; } /* equal-width digits: the head wraps the same way on every step */
.lvf-head b { color: var(--f-ink); }
.lvf-time { display: inline-flex; align-items: center; gap: 6px; }
.lvf-bar { height: 4px; border-radius: 4px; background: var(--f-line); margin: 12px 0 22px; overflow: hidden; }
.lvf-bar i { display: block; height: 100%; background: var(--f-accent); border-radius: 4px; transition: width .3s cubic-bezier(.32,.72,0,1); }
.lvf-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.lvf-q { font-size: clamp(21px, 2.1vw, 25px); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 18px; padding: 0; }
.lvf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvf-tile {
  display: flex; align-items: center; gap: 12px; text-align: left;
  min-height: 64px; padding: 14px 16px; border-radius: 16px;
  background: var(--f-tile); color: var(--f-ink); border: 1.5px solid transparent;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.3; cursor: pointer;
  transition: background .25s cubic-bezier(.32,.72,0,1), border-color .25s, transform .15s;
}
.lvf-tile > svg.i:first-child{font-size:28px;flex:none;color:var(--f-ink)}
.lvf-key { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--f-key); border: 1px solid var(--f-line); font: 600 13px/1 'JetBrains Mono', monospace; }
.lvf-tile span { flex: 1; }
svg.lvf-tick { opacity: 0; font-size: 20px; transition: opacity .2s; }
.lvf-tile:hover { border-color: var(--f-accent); }
.lvf-tile:active { transform: scale(.98); }
.lvf-tile:focus-visible, .lvf-submit:focus-visible, .lvf-back:focus-visible, .lvf-fields input:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 3px; }
.lvf-tile.is-on { background: var(--f-tile-on); border-color: var(--f-accent); }
.lvf-tile.is-on svg.lvf-tick { opacity: 1; }
.lvf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lvf-fields label { display: grid; gap: 6px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--f-mute); }
.lvf-fields em { font-style: normal; font-weight: 400; }
.lvf-fields input { font: inherit; font-size: 17px; color: var(--f-ink); background: var(--f-tile); border: 1.5px solid transparent; border-radius: 12px; padding: 13px 14px; min-height: 50px; width: 100%; min-width: 0; }
.lvf-fields input:focus { border-color: var(--f-accent); outline: none; }
.lvf-wide { grid-column: 1 / -1; }
.lvf-submit {
  margin-top: 18px; width: 100%; min-height: 58px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--f-accent); color: var(--f-accent-ink); font: inherit; font-weight: 600; font-size: 17px;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 8px 6px 24px;
  transition: transform .15s;
}
.lvf-submit:active { transform: scale(.98); }
.lvf-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(13,13,13,.1); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.lvf-submit:hover .lvf-arrow { transform: translateX(3px); }
.lvf-fine { font-size: 14px; color: var(--f-mute); margin: 12px 0 0; line-height: 1.5; }
.lvf-back { margin-top: 16px; background: none; border: 0; color: var(--f-mute); font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 4px; }
.lvf-done > svg.i{font-size:44px;color:var(--green-deep)}
.lvf-done p { line-height: 1.55; color: var(--f-mute); }
.lvf-done .lvf-q { color: var(--f-ink); margin-top: 8px; }
.lvf-fields input[aria-invalid=true]{border-color:#b3261e}
.lvf-change{margin:-8px 0 14px;font-size:15px;color:var(--f-mute)}
.lvf-change-btn{background:none;border:0;padding:0 2px;font:inherit;font-weight:600;color:var(--f-ink);text-decoration:underline;cursor:pointer;min-height:44px}
.lvf-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--f-mute);line-height:1.45}
.lvf-consent input{margin-top:3px;width:20px;height:20px;flex:none}
.lvf-consent span,.lvf-fine{text-wrap:pretty}
.lvf-err{color:#b3261e;font-size:15px;margin:10px 0 0}
.lvf-err:empty{margin:0;min-height:0}
.lvf-fallback{font-size:17px;line-height:1.55}
.lvf-fallback a{font-weight:600}
[data-lvf] .job{padding:0}
/* One size for every step, at every width (2026-09-29 spec §9): the steps share one grid cell, so the card is as
   tall as the tallest step (step 4); inactive steps and Back keep their space but are invisible, unfocusable and
   hidden from screen readers (Back only while the form is there, not under the live job widget). On the shorter
   tile steps the tiles grow to fill the card, so no blank band sits under them (2026-09-30 gate 4, ruling g,
   which replaces PF17's top-aligned tiles); the card itself keeps its one size. */
[data-lvf] form { display: grid; }
[data-lvf] form > .lvf-step { grid-area: 1 / 1; display: flex; flex-direction: column; }
[data-lvf] form > .lvf-step[hidden] { display: flex !important; visibility: hidden; }
[data-lvf] form ~ .lvf-back[hidden] { display: inline-flex !important; visibility: hidden; }
.lvf-tiles { flex: 1; grid-auto-rows: 1fr; }
.lvf-submit { white-space: nowrap; }
@media (min-width: 861px) {
  [data-lvf] { padding-block: 24px; }
  .lvf-bar { margin: 10px 0 14px; }
  .lvf-q { margin-bottom: 14px; }
  .lvf-back { margin-top: 6px; }
  .lvf-submit { margin-top: 12px; min-height: 52px; }
  .lvf-tiles { grid-template-columns: 1fr; }
  .lvf-tile { position: relative; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 14px 18px; font-size: 18px; font-weight: 600; line-height: 1.25; }
  .lvf-tile > svg.i:first-child { font-size: 32px; }
  .lvf-tile .lvf-key { width: 32px; height: 32px; font-size: 14px; }
  .lvf-tile span { flex: 1; }
  .lvf-tile svg.lvf-tick { position: absolute; top: 50%; right: 18px; translate: 0 -50%; font-size: 22px; }
  .lvf-fields { gap: 8px 10px; }
  .lvf-fields label { gap: 3px; }
  .lvf-fields input { min-height: 44px; padding: 8px 14px; line-height: 1.25; }
  .lvf-consent { font-size: 13.5px; line-height: 1.4; margin-top: 10px; }
  .lvf-fine { font-size: 13px; margin-top: 8px; }
}
@media (max-width: 860px) {
  [data-lvf] { padding: 16px; }
  .lvf-head { font-size: 13px; }
  .lvf-bar { margin: 6px 0 10px; }
  .lvf-q { font-size: 19px; margin-bottom: 10px; }
  .lvf-tile { min-height: 56px; padding: 10px 14px; }
  .lvf-fields { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .lvf-fields label { gap: 2px; font-size: 13px; line-height: 1.2; }
  .lvf-fields input { min-height: 44px; padding: 6px 12px; font-size: 16px; }
  .lvf-consent { font-size: 13px; line-height: 1.3; margin-top: 8px; }
  .lvf-submit { margin-top: 10px; min-height: 52px; padding-left: 20px; }
  .lvf-fine { font-size: 13px; line-height: 1.35; margin-top: 6px; }
  .lvf-back { margin-top: 0; }
}
@media (max-width: 560px) {
  .lvf-tiles { grid-template-columns: 1fr; }
}
/* Tablet: fields three to a row, so step 4 (the step that sets the card's height) is one row shorter */
@media (min-width: 561px) and (max-width: 860px) {
  .lvf-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .lvf-fields { grid-template-columns: 1fr; }
  .lvf-submit { font-size: 16px; padding-left: 16px; gap: 8px; }
}