.fp-errors{background:#fee;border:1px solid #f99;padding:.75rem;margin:.75rem 0;}
.fp-errors ul{list-style:none;padding-left:0;margin:0;}
.fp-success{background:#f0fff4;border:1px solid #9ae6b4;padding:.75rem;margin:.75rem 0;}
.fp-table{width:100%;border-collapse:collapse}
.fp-table th,.fp-table td{border:1px solid #ddd;padding:.5rem}
.fp-table .fp-date{white-space:nowrap;width:11rem;}
.fp-table-wrap{overflow-x:auto;}
.fp-actions button{margin-right:.5rem}
.fp-heading{margin:.25rem 0 .75rem;font-size:1.25rem;font-weight:700;}
.fp-del-btn{background:#fff;border:1px solid #e11;color:#e11;padding:.25rem .5rem;border-radius:4px;cursor:pointer;}
.fp-del-btn:hover{background:#fee;}
/* char count */
.fp-charcount{font-size:.9rem;color:#555;text-align:right;margin:.25rem 0 1rem;}
/* align charcount width with textarea */
.fp-form .fp-charcount{display:block;width:100%;max-width:720px;}

/* --- Dark mode for inputs / tables --- */
/* High-contrast field colors (beat theme overrides; avoid mid-gray on dark bg) */
.fp-form{
  --fp-field-bg:#1e293b;
  --fp-field-fg:#f8fafc;
  --fp-field-border:#64748b;
  --fp-field-placeholder:#94a3b8;
}
/* --- Light defaults (explicit) --- */
/* ブラウザの自動ダーク化・拡張機能による再着色への耐性を持たせるため、
   ライト時の配色を明示的に固定する。ダーク時はクラス起動式ルール
   （下記 :is(...) ブロック群）が specificity で上書きする。 */
.fp-form{ color-scheme: light; }
.fp-form input[type="text"],
.fp-form input[type="url"],
.fp-form input[type="email"],
.fp-form input[type="search"],
.fp-form input[type="number"],
.fp-form select,
.fp-form textarea,
.fp-form .wp-editor-area{
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827;
  caret-color:#111827;
}
.fp-form input::placeholder,
.fp-form textarea::placeholder{
  color:#9ca3af !important;
  -webkit-text-fill-color:#9ca3af;
  opacity:1;
}
/* Class / attribute based dark (themes + WP Dark Mode plugin) */
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-form{ color-scheme:dark; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-form :is(
  input[type="text"],
  input[type="url"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea,
  .wp-editor-area
){
  background:var(--fp-field-bg) !important;
  color:var(--fp-field-fg) !important;
  -webkit-text-fill-color:var(--fp-field-fg);
  caret-color:var(--fp-field-fg);
  border:1px solid var(--fp-field-border) !important;
}
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-form :is(input, textarea)::placeholder{
  color:var(--fp-field-placeholder) !important;
  -webkit-text-fill-color:var(--fp-field-placeholder);
  opacity:1;
}
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-form .fp-charcount{ color:#cbd5e1; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-form .wp-editor-container{
  background:var(--fp-field-bg);
  border-color:var(--fp-field-border);
}
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-actions button{ background:#2563eb; color:#fff; border:1px solid transparent; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-errors{ background:#3b1f1f; border-color:#b91c1c; color:#fee2e2; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-success{ background:#0f2f1a; border-color:#10b981; color:#d1fae5; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-table :is(th, td){ border-color:#475569; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-table th{ background:#0f172a; color:#f8fafc; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-table td{ background:#1e293b; color:#f8fafc; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-del-btn{ background:#1e293b; border-color:#f87171; color:#fecaca; }
:is(
  html.dark,
  body.dark,
  [data-theme="dark"],
  html.wp-dark-mode-active,
  html[data-wp-dark-mode-active]
) .fp-del-btn:hover{ background:#450a0a; }

/* === FP input block (content + counter) === */
.fp-form .fp-input-block { position: relative; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block textarea,
.fp-form .fp-input-block .wp-editor-wrap,
.fp-form .fp-input-block .wp-editor-container { display:block; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block .fp-charcount { position:absolute; right:.5rem; bottom:-1.2rem; font-size:.9rem; line-height:1; white-space:nowrap; }
@media (max-width: 768px){
  .fp-form .fp-input-block,
  .fp-form .fp-input-block textarea,
  .fp-form .fp-input-block .wp-editor-wrap,
  .fp-form .fp-input-block .wp-editor-container { max-width:100%; }
}

/* === 1.0.10: counter sits under the input, width synced by JS === */
.fp-form .fp-input-block .fp-charcount{
  position: static !important;
  white-space: nowrap;
  text-align: right;
  display: block;
}

/* === 1.0.12: label on its own line, inputs always below === */
.fp-form p { display:block; clear:both; }
.fp-form label { display:block !important; margin:0 0 .4rem; white-space:normal; float:none !important; }
.fp-form .fp-input-block { display:block; clear:both; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block textarea,
.fp-form .fp-input-block .wp-editor-wrap,
.fp-form .fp-input-block .wp-editor-container { display:block; width:100%; max-width:720px; box-sizing:border-box; }
.fp-form .fp-input-block .fp-charcount{ display:block; text-align:right; margin:.25rem 0 0 0; }
@media (max-width:768px){
  .fp-form .fp-input-block,
  .fp-form .fp-input-block textarea,
  .fp-form .fp-input-block .wp-editor-wrap,
  .fp-form .fp-input-block .wp-editor-container { max-width:100%; }
}