/*
 * Module: section-basic   ★ LOCKED INVARIANT — only color may change ★
 *
 * The bracketed-headline structure below (─| ticks, 60px horizontal,
 * 30px vertical centered, 20px gap to headline, italic+bold mix) is
 * the JSON-spec design. The user explicitly locked it after multiple
 * wrong iterations. Do NOT modify shape, geometry, or positioning
 * without explicit user direction. Only color and headline text vary
 * per issue.
 * See: ~/.claude/projects/.../feedback_basic_section_bracket_invariant.md
 *
 * From TEMPLATE_interpreted.json (the canonical geometry):
 *   - Panel rect 600×294 fill #A27E2D at y=704
 *   - Headline text  y=745 x=192 w=211  Merriweather 32px #673D09  "new SECTION"
 *   - White bracket pairs flanking headline:
 *       LEFT  vertical   x=175 y=746 h=30
 *       LEFT  horizontal x=114 y=761 w=60
 *       RIGHT vertical   x=425 y=746 h=30
 *       RIGHT horizontal x=425 y=761 w=60
 *   - Body text  y=804 x=36 w=528  Merriweather 16px #673D09
 *
 * Padding derived from JSON Y-deltas, not the spacing scale.
 * Top pad (panel→headline): 41px.
 * Headline→body gap: 27px (body_y − (head_y + head_size)).
 * Bracket tick height: 30px (vertical extends 15px above and 15px below the rule).
 * Headline-side bracket gaps: 20px each side (--fm-headline-bracket-gap), single-token.
 */

.fm-basic {
  width: 100%;
  background: var(--fm-color-basic-bg);
}

.fm-basic-pad-top    { height: var(--fm-basic-pad-top);    line-height: 1px; font-size: 1px; }
.fm-basic-pad-gap    { height: var(--fm-basic-pad-gap);    line-height: 1px; font-size: 1px; }
.fm-basic-pad-bottom { height: var(--fm-basic-pad-top);    line-height: 1px; font-size: 1px; }  /* mirror top for now */

.fm-basic-head { width: 100%; }

.fm-basic-head-rule-cell-l { vertical-align: middle; padding: 0; text-align: right; }
.fm-basic-head-rule-cell-r { vertical-align: middle; padding: 0; text-align: left; }

.fm-basic-head-rule {
  display: inline-block;
  width: var(--fm-basic-bracket-rule-w);
  height: 1px;
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-basic-head-tick-cell {
  width: 1px;
  padding: 0;
  vertical-align: middle;
}

.fm-basic-head-tick {
  width: 1px;
  height: var(--fm-basic-bracket-tick-h);
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-basic-head-text-cell-l { padding: 0; padding-left:  var(--fm-headline-bracket-gap); vertical-align: middle; text-align: left; }
.fm-basic-head-text-cell-r { padding: 0; padding-right: var(--fm-headline-bracket-gap); vertical-align: middle; text-align: right; }

.fm-basic-headline {
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-headline);
  line-height: 1;
  color: var(--fm-color-body-brown);
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  padding: 0;
}

.fm-basic-head-italic { font-style: italic; font-weight: 400; }
.fm-basic-head-bold   { font-style: normal; font-weight: 700; }

.fm-basic-body-cell {
  padding: 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: var(--fm-lh-body, 1.6);
  color: var(--fm-color-body-brown);
  text-align: left;
}

.fm-basic-body-cell p           { margin: 0; }
.fm-basic-body-cell p + p       { margin-top: 16px; }