/* =================================================================
 * Forms — browser-side form styling.
 *
 * Companion to forms.js. Targets the DOM structure that Forms.Form
 * builds:
 *
 *   .frm                       container set up by Forms.create()
 *     .frm-field                one per field
 *       .frm-label              <label>
 *       .frm-subtitle
 *       .frm-description
 *       .frm-input              type-module's UI lives here
 *         .frm-text-input | .frm-select-input | ...
 *       .frm-help
 *       .frm-errors
 *         .frm-error            one per failing validation rule
 *       .frm-text-replace       relevance effect="text" replacement
 *       .frm-children           nested fields (for chapters)
 *
 * Modifier classes on .frm-field:
 *   .frm-hidden                 relevance effect=hide / reset
 *   .frm-text-replacement       relevance effect=text
 *   .frm-invalid                at least one validation rule fired
 *
 * Per-type body classes are set via [data-field-type="..."] so we
 * can target chapter / text / select without polluting class names.
 * ================================================================= */

.frm								{font-family:Roboto, sans-serif;font-size:14px;color:#2a2f36;}
.frm *								{box-sizing:border-box;}

/* ====== Field wrapper ============================================ */
.frm-field							{margin-bottom:14px;}
/* !important here because renderField() sets an inline `display:inline-block`
 * when a layout.width is given, and inline styles otherwise win over class
 * rules regardless of specificity. */
.frm-field.frm-hidden				{display:none !important;}

/* Chapters get a soft card around themselves + their children */
.frm-field[data-field-type="chapter"]
									{padding:14px 16px;border:1px solid #e1e4e8;border-radius:6px;background-color:#fafbfc;margin-bottom:20px;}
.frm-field[data-field-type="chapter"] > .frm-label
									{font-size:16px;font-weight:500;color:#1f2d3a;margin-bottom:6px;display:block;}

/* ====== Layout zones =============================================
 * .frm-field         — sizing wrapper (layout.width %, inline-block).
 *                      Owns its own display/width via inline styles,
 *                      so we never set flex on it.
 *   └── .frm-box     — layout zone for label + container. Switch to
 *                      flex here to put the label in a side column.
 *       ├── .frm-label
 *       └── .frm-container
 */
.frm-box							{display:block;}
.frm-container						{display:block;}

/* Side-by-side label/container example — opt in by adding this class
 * (or by targeting your own selector). Kept commented out as the
 * default is the original stacked layout.
 *
 *   .frm-box { display:flex; gap:12px; align-items:flex-start; }
 *   .frm-box > .frm-label { flex:0 0 180px; }
 *   .frm-box > .frm-container { flex:1 1 auto; min-width:0; }
 */

/* ====== Labels, descriptions, help =============================== */
.frm-label							{display:block;font-weight:500;color:#1f2d3a;margin-bottom:4px;font-size:13px;}
.frm-subtitle						{font-size:12px;color:#6a7280;margin-bottom:4px;font-weight:400;}
.frm-description					{font-size:13px;color:#414955;margin-bottom:6px;line-height:1.4;}
.frm-help							{font-size:12px;color:#6a7280;margin-top:4px;font-style:italic;line-height:1.3;}

/* ====== Input area =============================================== */
.frm-input							{margin:4px 0;}
.frm-input-empty					{display:none;}

/* Generic text input */
.frm-text-input						{width:100%;padding:6px 10px;border:1px solid #d1d5da;border-radius:4px;font-family:inherit;font-size:14px;color:#2a2f36;background-color:#ffffff;transition:border-color 0.1s, box-shadow 0.1s;}
.frm-text-input:focus				{outline:none;border-color:#0f6c8c;box-shadow:0 0 0 2px rgba(15,108,140,0.15);}

/* Notes textarea — same look as .frm-text-input, vertical-resize only. */
.frm-notes							{margin-top:6px;}
.frm-notes-input					{display:block;width:100%;box-sizing:border-box;resize:vertical;height:calc(1.4em + 14px);min-height:calc(1.4em + 14px);padding:6px 10px;border:1px solid #d1d5da;border-radius:4px;font-family:inherit;font-size:14px;line-height:1.4;color:#2a2f36;background-color:#ffffff;transition:border-color 0.1s, box-shadow 0.1s;}
.frm-notes-input:focus				{outline:none;border-color:#0f6c8c;box-shadow:0 0 0 2px rgba(15,108,140,0.15);}

/* Select */
.frm-select-input					{padding:6px 10px;border:1px solid #d1d5da;border-radius:4px;font-family:inherit;font-size:14px;color:#2a2f36;background-color:#ffffff;min-width:240px;transition:border-color 0.1s, box-shadow 0.1s;}
.frm-select-input:focus				{outline:none;border-color:#0f6c8c;box-shadow:0 0 0 2px rgba(15,108,140,0.15);}

/* Number — wrapped in a row so prefix/suffix can sit alongside the input */
.frm-number-row						{display:inline-flex;align-items:center;gap:6px;}
.frm-number-input					{padding:6px 10px;border:1px solid #d1d5da;border-radius:4px;font-family:inherit;font-size:14px;color:#2a2f36;background-color:#ffffff;width:160px;transition:border-color 0.1s, box-shadow 0.1s;}
.frm-number-input:focus				{outline:none;border-color:#0f6c8c;box-shadow:0 0 0 2px rgba(15,108,140,0.15);}
.frm-number-prefix,
.frm-number-suffix					{font-size:13px;color:#6a7280;}

/* Date — uses native <input type="date"> */
.frm-date-input						{padding:6px 10px;border:1px solid #d1d5da;border-radius:4px;font-family:inherit;font-size:14px;color:#2a2f36;background-color:#ffffff;transition:border-color 0.1s, box-shadow 0.1s;}
.frm-date-input:focus				{outline:none;border-color:#0f6c8c;box-shadow:0 0 0 2px rgba(15,108,140,0.15);}

/* Calculation — read-only computed display */
.frm-calc-output					{padding:6px 10px;border:1px dashed #d1d5da;border-radius:4px;background-color:#f6f8fa;font-family:inherit;font-size:14px;font-weight:500;color:#1f2d3a;min-width:160px;display:inline-block;}

/* Unknown / unregistered type fallback */
.frm-unknown						{padding:6px 10px;background-color:#fff8e6;border:1px dashed #f0b859;border-radius:4px;color:#614a1f;font-size:13px;}

/* ====== Errors =================================================== */
.frm-errors							{margin-top:4px;}
.frm-errors:empty					{display:none;}
.frm-error							{color:#cc2030;font-size:12px;padding:2px 0;}

/* Invalid state ring around the input */
.frm-field.frm-invalid .frm-text-input,
.frm-field.frm-invalid .frm-select-input
									{border-color:#cc2030;}
.frm-field.frm-invalid .frm-text-input:focus,
.frm-field.frm-invalid .frm-select-input:focus
									{box-shadow:0 0 0 2px rgba(204,32,48,0.15);}

/* ====== Relevance: text replacement ============================== */
.frm-text-replace					{padding:8px 12px;background-color:#fff8e6;border-left:3px solid #f0b859;color:#614a1f;font-size:13px;border-radius:0 4px 4px 0;line-height:1.4;}

/* ====== Nested children (chapters etc.) ========================== */
.frm-children						{margin-top:10px;}
.frm-children:empty					{display:none;}

/* Top-level children sit flush; nested children get an indent */
.frm-field[data-field-type="chapter"] > .frm-children
									{margin-left:0;margin-top:12px;border-top:1px dashed #e1e4e8;padding-top:12px;}

/* ====== Layout helpers =========================================== */
.frm-break							{width:100%;display:block;clear:both;height:0;margin:0;padding:0;}
/* Right gutter for sub-100 % width fields that sit side-by-side.
 * box-sizing:border-box keeps the padding inside the percentage width. */
.frm-field-partial					{padding-right:12px;}

/* ====== Save button ============================================== */
.frm-save-bar						{margin-top:18px;padding-top:14px;border-top:1px solid #e1e4e8;display:flex;align-items:center;gap:12px;}
.frm-save-button					{padding:8px 18px;border:1px solid #0f6c8c;border-radius:4px;background-color:#0f6c8c;color:#ffffff;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color 0.1s, border-color 0.1s, opacity 0.1s;}
.frm-save-button:hover				{background-color:#0d5b76;border-color:#0d5b76;}
.frm-save-button:disabled			{opacity:0.6;cursor:wait;}
.frm-save-button.is-saved			{background-color:#2a8c4a;border-color:#2a8c4a;}
.frm-save-button.is-error			{background-color:#cc2030;border-color:#cc2030;}
.frm-save-icon						{display:inline-block;margin-right:4px;}
.frm-save-status					{color:#cc2030;font-size:13px;}