/* 流派・背景・忍法・奥義・忍具の入力フォーム（重ねて出す）と、その狭い画面での形 */

/* ---- forms ---- */
#form-base {
  z-index: 101;
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  background: rgba(50, 50, 60, .6);
}
#form-base.active {
  display: flex;
  pointer-events: all;
}
body:has(#form-base.active) {
  overflow: hidden;
}
#form-base .form-content {
  display: none;
  background-color: var(--color-bg);
}
#form-base .form-content.active {
  display: flex;
}
#belongs-name-form {
  height: 120px;
  width: 260px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 10px 20px 10px;
}
#belongs-name-form > * {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 10px;
}
#belongs-name-form-option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
#belongs-name-form-option > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 90px;
}
#belongs-name-form-option > div + div {
  margin-left: 15px;
}
#belongs-name-form-option > div > label {
  width: 70px;
}
#belongs-name-form-option-present,
#belongs-name-form-option-sengoku {
  width: 15px;
  margin-right: 5px;
}
#belongs-name-form-present,
#belongs-name-form-sengoku {
  display: none;
  height: 50px;
  width: 100%;
  border: var(--border-enabled);
  padding-left: 10px;
}
#belongs-name-form-option:has( #belongs-name-form-option-present:checked) +
.ctrl > #belongs-name-form-present,
#belongs-name-form-option:has( #belongs-name-form-option-sengoku:checked) +
.ctrl > #belongs-name-form-sengoku {
  display: block;
}
#background-form {
  height: 90vh;
  width: 60%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  font-size: 16px;
}
#background-form label > input {
  margin-right: 5px;
}
#background-form .ctrl {
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px dashed gray;
  margin-bottom: 10px;
}
#background-form .ctrl .tab {
  height: 100%;
  width: 130px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
#background-form .ctrl .button {
  height: 100%;
  width: calc(100% - 130px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  font-size: 14px;
}
#background-form .ctrl .button input {
  height: 70%;
  width: 100px;
  border: 1px solid gray;
  text-align: center;
}
#background-form .ctrl .tab label + label {
  margin-left: 10px;
}
#background-form .good-points,
#background-form .bad-points {
  display: none;
}
#background-form:has( #bg-g:checked) .good-points,
#background-form:has( #bg-b:checked) .bad-points {
  display: flex;
}
#background-form .form-content-values {
  height: calc(100% - 60px);
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5px;
  overflow: auto;
}
#background-form .form-content-values .item {
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
#background-form .form-content-values .item label {
  padding: 5px 10px 5px 0px;
}
#background-form .form-content-values .item + .item {
  margin-top: 5px;
}
#background-form .form-content-values .item:nth-child(even) {
  background: rgba(50, 50, 50, .2);
}
#background-form .form-content-values .item input[type="text"] {
  display: none;
}
#background-form .form-content-values .item label:has( input[option]) {
  display: none;
}
#background-form .form-content-values .item label:has( .taima)::after {
  content: ' [退]';
  font-size: 0.8em;
  color: var(--color-tag-taima);
  padding-bottom: 5px;
}
#background-form .form-content-values .item label:has( .present)::after {
  content: ' [現]';
  font-size: 0.8em;
  color: var(--color-tag-present);
  padding-bottom: 5px;
}
#background-form .form-content-values .item label:has( .sengoku)::after {
  content: ' [戦]';
  font-size: 0.8em;
  color: var(--color-tag-sengoku);
  padding-bottom: 5px;
}
#background-form .form-content-values .item input[type="checkbox"]:checked + input[type="text"] {
  display: inline-block;
  height: 90%;
  width: 100px;
  font-size: 0.9em;
  margin-left: 5px;
  padding: 2px 2px 2px 5px;
  border: 1px solid gray;
  background: var(--color-bg);
}
#ninpo-form {
  height: 90vh;
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  font-size: 16px;
}
#ninpo-form-ctrl {
  padding-bottom: 15px;
  border-bottom: 1px dashed gray;
}
#ninpo-form-values .ninpo-item {
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
#ninpo-form-values .ninpo-item input,
#ninpo-form-values .ninpo-item select {
  height: 100%;
  border: 1px solid gray;
}
#ninpo-form-values .ninpo-item select {
  padding-top: 3px;
  padding-right: 1px;
}
#ninpo-form-values .ninpo-item span {
  padding-top: 5px;
}
#ninpo-form-values .ninpo-item input[type="number"] {
  width: 50px;
  text-align: center;
  padding-top: 2px;
  padding-left: 6px;
}
#ninpo-form-values .ninpo-item > * + * {
  margin-left: 10px;
}
#ninpo-form-values .ninpo-item span {
  height: 100%;
  padding-top: 7px;
}
#ninpo-form-values .ninpo-item .name {
  width: 200px;
  padding-left: 5px;
}
#ninpo-form-values .ninpo-item .category {
  width: 50px;
  text-align: center;
}
#ninpo-form-values .ninpo-item .skill {
  display: none;
  width: 120px;
  text-align: start;
}
#ninpo-form-values .ninpo-item .skill option[data-acquired] {
  color: white;
  background-color: var(--color-enabled);
}
#ninpo-form-values .ninpo-item input[type="number"] {
  padding-left: 12px;
}
#ninpo-form-values .ninpo-item .note {
  width: calc(100% - 587px);
  margin-left: 20px;
  padding-left: 5px;
}
#ninpo-form-values .ninpo-item .damage-category {
  width: 50px;
  text-align: center;
}
#ninpo-form-values .ninpo-item .cost,
#ninpo-form-values .ninpo-item .range,
#ninpo-form-values .ninpo-item .damage,
#ninpo-form-values .ninpo-item .damage-category {
  display: none;
}
/* 特技・コスト・間合いを出す忍法の種類（GAS 版は 攻・サ と決め打ち。今は選択肢の withRoll で決まり、data-roll に入る） */
#ninpo-form-values .ninpo-item .category[data-roll="true"] ~ .skill,
#ninpo-form-values .ninpo-item .category[data-roll="true"] ~ .cost,
#ninpo-form-values .ninpo-item .category[data-roll="true"] ~ .range {
  display: inline-block;
}
/* 
#ninpo-form-values .ninpo-item .category[value="攻"] ~ .damage,
#ninpo-form-values .ninpo-item .category[value="攻"] ~ .damage-category
*/
#ninpo-form-values .ninpo-item .category[value=""] ~ .note {
  display: none;
}
#ninpo-form-values .ninpo-item .category[value="攻"] ~ .note {
  /* width: calc(100% - 736px); */
}
#ninpo-form-values .ninpo-item .category[data-roll="false"] ~ .note {
  width: calc(100% - 282px);
}
#ougi-form {
  height: 90vh;
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  font-size: 16px;
}
#ninpo-form-ctrl,
#ougi-form-ctrl {
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}
#ninpo-form-ctrl input,
#ougi-form-ctrl input {
  height: 40px;
  width: 40px;
  text-align: center;
  border: 1px solid gray;
  border-radius: 50%;
}
#ninpo-form-ctrl input[disabled],
#ougi-form-ctrl input[disabled] {
  background-color: var(--color-disabled);
}
#ninpo-form-ctrl input + input,
#ougi-form-ctrl input + input {
  margin-left: 10px;
}
#ninpo-form-values,
#ougi-form-values {
  height: calc(100% - 80px);
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
#ninpo-form-values .ninpo-item,
#ougi-form-values .ougi-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 15px 0 15px 0;
}
#ougi-form-values .ougi-item {
  border-top: 1px dashed gray;
}
#ougi-form-values .ougi-item .name-container {
  height: 30px;
  width: 170px;
  max-width: calc(100% - 300px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#ougi-form-values .ougi-item .name-container .name {
  height: 100%;
  width: 100%;
  border-bottom: 1px solid gray;
}
#ougi-form-values .ougi-item .skill-container {
  height: 30px;
  width: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
}
#ougi-form-values .ougi-item .skill-container .skill {
  height: 100%;
  width: 100%;
  padding: 5px;
}
#ougi-form-values .ougi-item .category-container {
  height: 30px;
  width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#ougi-form-values .ougi-item .category-container .category {
  width: 100%;
  height: 30px;
  padding: 5px;
}
#ougi-form-values .ougi-item .strong-container {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
#ougi-form-values .ougi-item .weak-container {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
#ougi-form-values .ougi-item .strong-container label,
#ougi-form-values .ougi-item .weak-container label {
  margin-right: 10px;
  padding: 5px 0px 5px 0px;
}
#ougi-form-values .ougi-item .strong-container label input,
#ougi-form-values .ougi-item .weak-container label input {
  margin-right: 5px;
  padding-bottom: 2px;
}
/* 分野を選ぶ欄のある弱み（GAS 版は「分野限定」と決め打ち。今は選択肢の withField で決まり、data-with-field が付く） */
#ougi-form-values .ougi-item .weak-container input[data-with-field] ~ select {
  display: none;
  height: 90%;
  width: auto;
  text-align: left;
  font-size: 0.9em;
}
#ougi-form-values .ougi-item .weak-container input[data-with-field]:checked ~ select {
  display: inline-block;
}
#ougi-form-values .ougi-item .note-container {
  margin-top: 10px;
  width: 100%;
}
#ougi-form-values .ougi-item .note-container textarea {
  height: 80px;
  width: 100%;
  resize: vertical;
  border: 1px solid gray;
  font-size: 14px;
  padding: 5px;
}
#ningu-form {
  height: 500px;
  width: 240px;
  display: flex;
  flex-direction: column;
  padding: 5px 15px 5px 15px;
  font-size: 16px;
}
#ningu-form .ctrl {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px dashed gray;
}
#ningu-form .ctrl input {
  height: 100%;
  width: 20%;
  text-align: center;
  border: 1px solid gray;
  border-radius: 5px;
}
#ningu-form .ctrl input[disabled] {
  background-color: var(--color-disabled);
}
#ningu-form .ctrl input + input {
  margin-left: 10px;
}
#ningu-form .ctrl #ningu-form-ctrl-reset {   /* ＋－より小さい「リセット」 */
  width: 80px;
  margin-left: 20px;
  font-size: 12px;
  padding-top: 3px;
}
#ningu-form .values {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
}
#ningu-form .values > div {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#ningu-form .values > div + div {
  margin-top: 10px;
}
#ningu-form .values input[type="text"] {
  height: 90%;
  width: 75%;
  border: 1px solid gray;
  padding: 5px 5px 3px 5px;
}
#ningu-form .values input[type="number"] {
  height: 90%;
  width: 20%;
  padding-left: 5px;
}

/* ---- responsive-forms ---- */
/* 入力補助の窓：狭い画面では画面いっぱいに出し、横に長い行は横にスクロールする */
@media screen and (max-width: 999px) {
  #background-form,
  #ninpo-form,
  #ougi-form {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }
  #ninpo-form-values,
  #ougi-form-values {
    overflow: auto;
  }
  #ninpo-form-values .ninpo-item {
    min-width: 760px;
  }
}