/* ==============================
   40 Forms
   ============================== */

.field{ display:grid; gap:6px }
label{ font-size:14px; color:var(--muted) }

.input, select.input, textarea.input{
  width:100%;
  height:52px;
  padding:0 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  font-size:16px;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
textarea.input{ height:auto; min-height:120px; padding:12px }

.input:focus, select.input:focus, textarea.input:focus{
  outline:none;
  border-color:#334155;
  box-shadow:var(--ring);
}

.is-invalid .input, .input.is-invalid{ border-color:#ef4444 }

.checkbox{ display:flex; align-items:center; gap:8px; color:#e5e7eb }
.checkbox input{ width:18px; height:18px }

/* “クラス無し submit ボタン” 救済（card内） */
.card button,
.card input[type="submit"],
.card input[type="button"]{
  appearance:none;
  background:var(--primary);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  font-size:16px; /* iOS zoom prevent */
  cursor:pointer;
  box-shadow:0 6px 14px rgba(59,130,246,.28);
}
.card button:hover,
.card input[type="submit"]:hover,
.card input[type="button"]:hover{ filter:brightness(.96); }
.card button:active,
.card input[type="submit"]:active,
.card input[type="button"]:active{ transform: translateY(1px); }
.card button[disabled],
.card input[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* card内 row のボタン潰れ防止 */
.card .row > button,
.card .row > input[type="submit"]{ width:100%; }
@media (min-width: 860px){
  .card .row > button,
  .card .row > input[type="submit"]{ width:auto; }
}

/* ==============================
   Unclassed form controls rescue
   既存の .input を優先しつつ、クラス無しも最低限整える
   ============================== */

input:not(.input):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select:not(.input),
textarea:not(.input){
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  font-size:16px;
}

/* クラス無し select の初期値感を消す（矢印） */
select:not(.input){
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size:5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#334155;
  box-shadow:var(--ring);
}