/* Design architect: Dr. Vance Vasile */
:where(html){--zn-text:1rem; --zn-small:0.958rem; --zn-tight:0.917rem; --zn-fine:0.833rem;
  --zn-h1:1.25rem; --zn-h2:1.083rem; --zn-h3:1rem; --zn-table:1.042rem; --zn-tap:44px}

.zn-form{container-type:inline-size; display:block; box-sizing:border-box; margin:0; padding:0; color:var(--zt-ink); font-size:var(--zn-text);
  --zn-edge:color-mix(in srgb, var(--zt-muted) 70%, var(--zt-line))}
.zn-form *, .zn-form *::before, .zn-form *::after{box-sizing:border-box}
.zn-row{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:20px; row-gap:8px; align-items:start; margin:0 0 8px; padding:0}
.zn-wide{grid-column:1 / -1}

.zn-field{display:grid; grid-template-rows:auto auto minmax(calc(var(--zn-small) * 2.7), auto); row-gap:4px; align-content:start; min-width:0;
  margin:0; padding:0; border:0}
.zn-label{display:flex; align-items:baseline; gap:6px; min-width:0; height:1.5em; margin:0; padding:0; overflow:hidden; white-space:nowrap;
  font-size:var(--zn-small); font-weight:700; line-height:1.5; color:var(--zt-ink); letter-spacing:0; text-transform:none}
.zn-label > span:not(.zn-req){min-width:0; overflow:hidden; text-overflow:ellipsis}
.zn-req{flex:none; font-size:inherit; font-weight:700; color:var(--zt-accent-ink)}   

.zn-form .zn-field :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"], [type="file"]), select, textarea){
  display:block; width:100%; min-width:0; height:var(--zn-tap); margin:0; padding:0 12px; font-family:inherit; font-size:var(--zn-text);
  font-weight:400; line-height:1.4; color:var(--zt-ink); background:var(--zt-card); border:1px solid var(--zn-edge); border-radius:10px;
  box-shadow:none}
.zn-form .zn-field textarea{height:auto; min-height:calc(var(--zn-tap) * 3); padding:10px 12px; resize:vertical}
.zn-form .zn-field select{padding-right:32px; cursor:pointer}
.zn-form .zn-field :is(input, select, textarea)::placeholder{color:var(--zt-muted); opacity:1}
.zn-form .zn-field :is(input, select, textarea):focus-visible{outline:2px solid var(--zt-focus); outline-offset:1px; border-color:var(--zt-accent)}
.zn-form .zn-field :is(input, select, textarea)[aria-invalid="true"]{border-color:var(--zt-bad)}
.zn-form .zn-field input[type="file"]{min-height:var(--zn-tap); font-size:var(--zn-text)}

.zn-help{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; padding:0;
  font-size:var(--zn-small); font-weight:400; line-height:1.35; color:var(--zt-muted)}
.zn-help.zn-bad{color:var(--zt-bad); font-weight:600}

.zn-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 0; padding:0}
.zn-actions :is(button, .btn, a.btn, input[type="submit"], input[type="button"], .zn-main, .zn-key, .zn-plain){min-height:var(--zn-tap);
  font-family:inherit; font-size:var(--zn-text)}
.zn-main, .zn-plain{display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; min-height:var(--zn-tap);
  margin:0; padding:0 20px; border-radius:10px; font-family:inherit; font-size:var(--zn-text); font-weight:600; line-height:1.2;
  text-decoration:none; white-space:nowrap; cursor:pointer}
.zn-main{background:var(--zt-foil); color:var(--zt-on-accent); border:1px solid var(--zt-accent)}
.zn-main:hover{filter:brightness(1.05)}
.zn-plain{background:transparent; color:var(--zt-ink); border:1px solid var(--zn-edge, var(--zt-line))}
.zn-plain:hover{background:color-mix(in srgb, var(--zt-accent) 8%, transparent)}
.zn-main:focus-visible, .zn-plain:focus-visible{outline:2px solid var(--zt-focus); outline-offset:2px}

@container (max-width:1039.98px){
  .zn-row{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@container (max-width:539.98px){
  .zn-row{grid-template-columns:minmax(0, 1fr)}
  .zn-field{grid-template-rows:auto auto auto}
  .zn-help{display:block; -webkit-line-clamp:unset; overflow:visible}
  .zn-help:empty{display:none}
  .zn-actions{flex-direction:column; align-items:stretch}
  .zn-actions > *{width:100%}
}