/* Early Church Fathers components. Requires tokens.css. Every value comes from a token. */

/* ---------- BASE ---------- */
.ecf { container-type: inline-size; box-sizing: border-box; min-height: 100%; color: var(--ecf-color-ink); background-color: var(--ecf-color-bg); background-image: var(--ecf-texture-page); background-size: 768px 768px; box-shadow: var(--ecf-shadow-vignette); font-family: var(--ecf-font-book); font-size: var(--ecf-text-body); line-height: var(--ecf-leading-body); }
.ecf *, .ecf *::before, .ecf *::after { box-sizing: border-box; }
.ecf a { color: var(--ecf-color-rubric); text-underline-offset: 3px; }
.ecf a:hover { color: var(--ecf-color-rubric-strong); }
.ecf a:focus-visible, .ecf button:focus-visible, .ecf input:focus-visible, .ecf select:focus-visible, .ecf summary:focus-visible, .ecf .is-focus { outline: 3px solid var(--ecf-color-focus); outline-offset: 2px; }
.ecf p { margin: 0; text-wrap: pretty; }
.ecf-main { max-width: var(--ecf-page-max); margin: 0 auto; padding: var(--ecf-space-7) var(--ecf-gutter) var(--ecf-space-8); display: flex; flex-direction: column; gap: var(--ecf-space-7); }
.ecf-narrow { max-width: 760px; width: 100%; }
.ecf-stack { display: flex; flex-direction: column; gap: var(--ecf-space-4); }
.ecf-stack--lg { gap: var(--ecf-space-6); }
.ecf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecf-space-2) var(--ecf-space-4); }
.ecf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--ecf-space-5) var(--ecf-space-6); }
.ecf-split { display: flex; flex-wrap: wrap; gap: var(--ecf-space-6) var(--ecf-space-7); align-items: flex-start; }
.ecf-split > .ecf-aside { flex: 1 1 240px; min-width: 0; }
.ecf-split > .ecf-content { flex: 999 1 520px; min-width: 0; }

/* type */
.ecf-h1 { margin: 0; font-family: var(--ecf-font-display); font-weight: 700; font-size: clamp(30px, 4.6cqi, var(--ecf-text-3xl)); line-height: var(--ecf-leading-tight); text-wrap: balance; }
.ecf-h2 { margin: 0; font-family: var(--ecf-font-display); font-weight: 700; font-size: clamp(22px, 3cqi, var(--ecf-text-xl)); line-height: 1.2; letter-spacing: 0.02em; }
.ecf-h3 { margin: 0; font-family: var(--ecf-font-display); font-weight: 700; font-size: var(--ecf-text-lg); line-height: 1.25; letter-spacing: 0.03em; }
.ecf-eyebrow { font-family: var(--ecf-font-display); font-weight: 500; font-size: var(--ecf-text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ecf-color-rubric); }
.ecf-lede { font-size: 21px; color: var(--ecf-color-ink-muted); max-width: 60ch; }
.ecf-muted { color: var(--ecf-color-ink-muted); }
.ecf-ui { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-md); line-height: var(--ecf-leading-ui); }
.ecf-small { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); line-height: var(--ecf-leading-ui); color: var(--ecf-color-ink-muted); }
.ecf-mock-note { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-xs); color: var(--ecf-color-ink-muted); }

/* ---------- FRAME ---------- */
.ecf-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecf-space-2) var(--ecf-space-6); padding: var(--ecf-space-3) var(--ecf-gutter); border-bottom: 3px double var(--ecf-color-rubric); font-family: var(--ecf-font-ui); color: var(--ecf-color-ink); }
.ecf-brand { display: flex; align-items: center; gap: var(--ecf-space-3); min-height: var(--ecf-touch); font-family: var(--ecf-font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; }
.ecf .ecf-brand, .ecf-brand { color: var(--ecf-color-ink); }
.ecf-mark { width: 26px; height: 32px; fill: var(--ecf-color-rubric); flex: none; }
.ecf-header .ecf-search { flex: 1 1 260px; max-width: 420px; }
.ecf-nav { display: flex; gap: var(--ecf-space-5); margin-left: auto; font-size: 16px; overflow-x: auto; max-width: 100%; }
.ecf-nav a { display: flex; align-items: center; min-height: var(--ecf-touch); white-space: nowrap; }
.ecf .ecf-nav a, .ecf-nav a { color: var(--ecf-color-ink); }
.ecf-nav a[aria-current="page"] { text-decoration-thickness: 2px; text-decoration-color: var(--ecf-color-rubric); font-weight: 600; }
.ecf-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ecf-space-2) var(--ecf-space-6); padding: var(--ecf-space-5) var(--ecf-gutter) var(--ecf-space-6); border-top: 3px double var(--ecf-color-rubric); font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); color: var(--ecf-color-ink-muted); }
.ecf-footer nav { display: flex; flex-wrap: wrap; gap: var(--ecf-space-1) var(--ecf-space-5); }
.ecf-footer a { display: inline-flex; align-items: center; min-height: var(--ecf-touch); }
@container (max-width: 719px) { .ecf-nav { margin-left: 0; width: 100%; } .ecf-header .ecf-search { max-width: none; flex-basis: 100%; } }

/* ---------- BUTTONS, INPUTS ---------- */
.ecf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ecf-space-2); min-height: 48px; padding: 0 var(--ecf-space-5); font-family: var(--ecf-font-ui); font-size: var(--ecf-text-md); font-weight: 600; text-decoration: none; border-radius: var(--ecf-radius-sm); border: 1px solid transparent; cursor: pointer; }
.ecf-btn svg, .ecf-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ecf-btn--primary, .ecf a.ecf-btn--primary { background: var(--ecf-color-rubric); color: var(--ecf-color-on-rubric); }
.ecf-btn--primary:hover, .ecf-btn--primary.is-hover, .ecf a.ecf-btn--primary:hover { background: var(--ecf-color-rubric-strong); color: var(--ecf-color-on-rubric); }
.ecf-btn--primary:active, .ecf-btn--primary.is-active { background: var(--ecf-color-rubric-strong); transform: translateY(1px); }
.ecf-btn--secondary, .ecf a.ecf-btn--secondary { background: transparent; color: var(--ecf-color-ink); border-color: var(--ecf-color-ink); }
.ecf-btn--secondary:hover, .ecf-btn--secondary.is-hover { background: var(--ecf-color-surface-raised); }
.ecf-btn--secondary:active, .ecf-btn--secondary.is-active { background: var(--ecf-color-surface); transform: translateY(1px); }
.ecf-btn--text { background: transparent; color: var(--ecf-color-rubric); padding: 0 var(--ecf-space-2); text-decoration: underline; text-underline-offset: 3px; }
.ecf-btn--text:hover, .ecf-btn--text.is-hover { color: var(--ecf-color-rubric-strong); }
.ecf-btn:disabled, .ecf-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ecf-btn.is-loading { cursor: progress; }
.ecf-btn.is-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ecf-spin 0.9s linear infinite; }
.ecf-btn--lg { min-height: 58px; padding: 0 28px; }
.ecf-btn--sm { min-height: var(--ecf-touch); padding: 0 var(--ecf-space-4); font-size: 16px; }
.ecf-input, .ecf-select { width: 100%; min-height: 48px; padding: 0 var(--ecf-space-4); font-family: var(--ecf-font-book); font-size: 18px; color: var(--ecf-color-ink); background: var(--ecf-color-surface-raised); border: 1px solid var(--ecf-color-rule-strong); border-radius: var(--ecf-radius-sm); }
.ecf-input::placeholder { color: var(--ecf-color-ink-muted); opacity: 1; }
.ecf-input:hover, .ecf-input.is-hover, .ecf-select:hover { border-color: var(--ecf-color-ink); box-shadow: 0 0 0 1px var(--ecf-color-ink); }
.ecf-input:disabled, .ecf-select:disabled { opacity: 0.5; cursor: not-allowed; }
.ecf-input.is-error { border-color: var(--ecf-color-fail); box-shadow: 0 0 0 1px var(--ecf-color-fail); }
.ecf-field { display: flex; flex-direction: column; gap: var(--ecf-space-1); min-width: 0; flex: 1 1 180px; }
.ecf-field > label, .ecf-label { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); font-weight: 600; }
.ecf-field-error { display: flex; align-items: center; gap: var(--ecf-space-1); font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); color: var(--ecf-color-fail); }
.ecf-search { display: flex; flex-wrap: wrap; gap: var(--ecf-space-2); width: 100%; }
.ecf-search .ecf-input { flex: 1 1 220px; width: auto; min-width: 0; }
.ecf-search--lg { max-width: 620px; }
.ecf-search--lg .ecf-input { min-height: 58px; font-size: var(--ecf-text-body); }
.ecf-search--compact .ecf-input { min-height: var(--ecf-touch); font-size: 16px; flex-basis: 140px; }
.ecf-search--compact .ecf-btn { min-height: var(--ecf-touch); padding: 0 var(--ecf-space-3); }
@keyframes ecf-spin { to { transform: rotate(360deg); } }
@keyframes ecf-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ecf-btn.is-loading::before, .ecf-skeleton > * { animation: none; } }

/* ---------- SHEET AND READING ---------- */
.ecf-sheet { background-color: var(--ecf-color-surface); background-image: var(--ecf-texture-sheet); background-size: 768px 768px; border: 1px solid var(--ecf-color-rule); box-shadow: var(--ecf-shadow-sheet); padding: clamp(18px, 4.5cqi, 44px) clamp(18px, 5cqi, 56px); }
.ecf-sheet--tight { padding: var(--ecf-space-5); }
.ecf-passage { max-width: var(--ecf-measure); font-size: var(--ecf-text-read); line-height: var(--ecf-leading-read); }
.ecf-passage p + p { margin-top: var(--ecf-leading-read); }
.ecf-passage--ruled { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--ecf-ruling) 33px, var(--ecf-ruling) 34px); }
.ecf-initial { float: left; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin: 4px 14px 2px 0; font-family: var(--ecf-font-display); font-weight: 700; font-size: 62px; line-height: 1; color: #4E170E; background: radial-gradient(circle at 32% 24%, #EDD083 0, #D8B055 60%, #BF9438 100%); border: 2px solid #9E1F14; outline: 1px solid #4E170E; outline-offset: -6px; }
.ecf-initial--plain { width: auto; height: auto; margin: 6px 10px 0 0; background: none; border: 0; outline: 0; font-size: 78px; line-height: 0.82; color: var(--ecf-color-rubric); }
.ecf-fn-mark { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-xs); font-weight: 600; padding: 0 3px; vertical-align: super; line-height: 0; }
.ecf-footnotes { max-width: var(--ecf-measure); margin: 0; padding: var(--ecf-space-4) 0 0 var(--ecf-space-5); border-top: 1px solid var(--ecf-color-rule-strong); font-size: 16px; line-height: 1.55; color: var(--ecf-color-ink-muted); }
.ecf-footnotes li + li { margin-top: var(--ecf-space-2); }
.ecf-citation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecf-space-2) var(--ecf-space-3); font-size: 18px; color: var(--ecf-color-rubric); }
.ecf-citation cite { font-style: normal; }
/* Who is speaking. Three treatments that differ in label, shape and type, not color alone. */
.ecf-source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--ecf-radius-sm); white-space: nowrap; }
.ecf-source--father { color: var(--ecf-color-on-rubric); background: var(--ecf-color-rubric); border: 1px solid var(--ecf-color-rubric); }
.ecf-source--editor { color: var(--ecf-color-ink); background: transparent; border: 1px dashed var(--ecf-color-ink); }
.ecf-source--translator { color: var(--ecf-color-ink-muted); background: transparent; border: 0; border-bottom: 1px solid var(--ecf-color-ink-muted); border-radius: 0; padding: 2px 0; }
.ecf-editor-note { max-width: var(--ecf-measure); padding: var(--ecf-space-4) var(--ecf-space-5); border: 1px dashed var(--ecf-color-ink-muted); font-family: var(--ecf-font-ui); font-size: var(--ecf-text-md); line-height: 1.55; color: var(--ecf-color-ink-muted); }
.ecf-pagemark { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-xs); font-weight: 600; color: var(--ecf-color-ink-muted); border: 1px solid var(--ecf-color-rule-strong); border-radius: var(--ecf-radius-sm); padding: 0 5px; margin: 0 4px; white-space: nowrap; vertical-align: 2px; }
.ecf-printlink { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ecf-touch); font-family: var(--ecf-font-ui); font-size: 16px; font-weight: 600; }
.ecf-chip, .ecf a.ecf-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); color: var(--ecf-color-ink); text-decoration: none; border: 1px solid var(--ecf-color-rule-strong); border-radius: var(--ecf-radius-pill); background: var(--ecf-color-surface-raised); }
.ecf a.ecf-chip:hover, .ecf-chip.is-hover { border-color: var(--ecf-color-rubric); color: var(--ecf-color-rubric); }
.ecf-chip-hit { display: inline-flex; align-items: center; min-height: var(--ecf-touch); }
.ecf-prevnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--ecf-space-4); }
.ecf-prevnext a { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: var(--ecf-space-3) var(--ecf-space-4); border: 1px solid var(--ecf-color-rule); background: var(--ecf-color-surface); text-decoration: none; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); }
.ecf-prevnext a b { font-family: var(--ecf-font-book); font-weight: 400; font-size: var(--ecf-text-md); color: var(--ecf-color-ink); }
.ecf-prevnext a:hover { border-color: var(--ecf-color-rubric); }
.ecf-prevnext a[rel="next"] { text-align: right; }

/* ---------- SEARCH AND BROWSE ---------- */
.ecf-result { display: flex; flex-direction: column; gap: var(--ecf-space-3); padding: var(--ecf-space-5); border: 1px solid var(--ecf-color-rule); background-color: var(--ecf-color-surface); background-image: var(--ecf-texture-sheet); background-size: 768px 768px; }
.ecf-result:hover, .ecf-result.is-hover { border-color: var(--ecf-color-rubric); }
.ecf-result .ecf-snippet { font-size: 18px; line-height: 1.6; max-width: var(--ecf-measure); }
.ecf mark { background: var(--ecf-color-mark); color: inherit; box-shadow: inset 0 -2px 0 var(--ecf-color-rubric); padding: 0 2px; }
.ecf-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-xs); font-weight: 600; border-radius: var(--ecf-radius-sm); white-space: nowrap; }
.ecf-tag--era { color: var(--ecf-color-ink); border: 1px solid var(--ecf-color-ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.ecf-tag--author { color: var(--ecf-color-ink); background: var(--ecf-color-surface-raised); border: 1px solid var(--ecf-color-rule); }
.ecf-filters { display: flex; flex-wrap: wrap; gap: var(--ecf-space-3) var(--ecf-space-4); align-items: flex-end; }
.ecf-count { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-md); color: var(--ecf-color-ink-muted); }
.ecf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ecf-color-rule); }
.ecf-list-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--ecf-space-5); min-height: 52px; padding: var(--ecf-space-3) var(--ecf-space-1); border-bottom: 1px solid var(--ecf-color-rule); }
.ecf-list-row > a { font-size: var(--ecf-text-body); text-decoration: none; }
.ecf-list-row > a:hover { text-decoration: underline; }
.ecf-list-row > span { font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); color: var(--ecf-color-ink-muted); }
.ecf-chapters { display: flex; flex-wrap: wrap; gap: var(--ecf-space-2); list-style: none; margin: 0; padding: 0; }
.ecf-chapters a { display: flex; align-items: center; justify-content: center; min-width: var(--ecf-touch); min-height: var(--ecf-touch); padding: 0 var(--ecf-space-2); font-family: var(--ecf-font-ui); font-size: 16px; text-decoration: none; border: 1px solid var(--ecf-color-rule); background: var(--ecf-color-surface); }
.ecf-chapters a:hover { border-color: var(--ecf-color-rubric); }
.ecf-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--ecf-space-2); list-style: none; margin: 0; padding: 0; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); }
.ecf-breadcrumb li { display: flex; align-items: center; gap: var(--ecf-space-2); min-height: 32px; }
.ecf-breadcrumb li + li::before { content: "\203A"; color: var(--ecf-color-ink-muted); }
.ecf-breadcrumb [aria-current] { color: var(--ecf-color-ink-muted); }

/* ---------- CONNECT AND REFERENCE ---------- */
.ecf-copyfield { display: flex; flex-wrap: wrap; gap: var(--ecf-space-2); align-items: stretch; }
.ecf-copyfield code { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: var(--ecf-space-2) var(--ecf-space-4); font-family: var(--ecf-font-mono); font-size: 15px; color: var(--ecf-color-ink); background: var(--ecf-color-surface-raised); border: 1px solid var(--ecf-color-rule); border-radius: var(--ecf-radius-sm); overflow-wrap: anywhere; }
.ecf-tabs { display: flex; gap: var(--ecf-space-1); border-bottom: 1px solid var(--ecf-color-rule-strong); overflow-x: auto; }
.ecf-tab { min-height: 48px; padding: 0 var(--ecf-space-5); font-family: var(--ecf-font-ui); font-size: var(--ecf-text-md); font-weight: 600; color: var(--ecf-color-ink-muted); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--ecf-radius-md) var(--ecf-radius-md) 0 0; cursor: pointer; white-space: nowrap; }
.ecf-tab:hover, .ecf-tab.is-hover { color: var(--ecf-color-ink); background: var(--ecf-color-surface-raised); }
.ecf-tab[aria-selected="true"] { color: var(--ecf-color-rubric); background: var(--ecf-color-surface); border-color: var(--ecf-color-rule-strong); box-shadow: inset 0 3px 0 var(--ecf-color-rubric); }
.ecf-steps { list-style: none; counter-reset: ecf-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ecf-space-4); }
.ecf-steps > li { counter-increment: ecf-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--ecf-space-4); align-items: start; }
.ecf-steps > li::before { content: counter(ecf-step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-family: var(--ecf-font-display); font-weight: 700; font-size: 18px; color: var(--ecf-color-rubric); border: 1px solid var(--ecf-color-rubric); border-radius: 50%; }
.ecf-code { margin: 0; padding: var(--ecf-space-4); font-family: var(--ecf-font-mono); font-size: 14px; line-height: 1.6; color: var(--ecf-color-ink); background: var(--ecf-color-surface-raised); border: 1px solid var(--ecf-color-rule); border-radius: var(--ecf-radius-sm); overflow-x: auto; white-space: pre; }
.ecf code { font-family: var(--ecf-font-mono); font-size: 0.85em; }
.ecf-table-wrap { overflow-x: auto; border: 1px solid var(--ecf-color-rule); background: var(--ecf-color-surface); }
.ecf-table { width: 100%; border-collapse: collapse; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); line-height: 1.4; }
.ecf-table th { text-align: left; font-weight: 600; padding: var(--ecf-space-3); border-bottom: 2px solid var(--ecf-color-rubric); white-space: nowrap; }
.ecf-table td { padding: var(--ecf-space-3); border-bottom: 1px solid var(--ecf-color-rule); vertical-align: top; }
.ecf-table tr:last-child td { border-bottom: 0; }
.ecf-table td:first-child { font-weight: 600; white-space: nowrap; }
/* phone: each row becomes a small card; the column name comes from data-label */
@container (max-width: 719px) {
  .ecf-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ecf-table--stack, .ecf-table--stack tbody, .ecf-table--stack tr, .ecf-table--stack td { display: block; width: 100%; }
  .ecf-table--stack tr { padding: var(--ecf-space-3); border-bottom: 1px solid var(--ecf-color-rule-strong); }
  .ecf-table--stack td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--ecf-space-3); padding: 3px 0; border: 0; white-space: normal; }
  .ecf-table--stack td::before { content: attr(data-label); font-weight: 600; color: var(--ecf-color-ink-muted); }
  .ecf-table--stack td:first-child { font-size: var(--ecf-text-md); }
}
.ecf-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ecf-font-ui); font-size: var(--ecf-text-sm); font-weight: 600; white-space: nowrap; }
.ecf-status svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ecf-status--pass { color: var(--ecf-color-pass); }
.ecf-status--fail { color: var(--ecf-color-fail); text-decoration: underline; text-decoration-style: double; }

/* ---------- NOTICES AND STATES ---------- */
.ecf-notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--ecf-space-3); padding: var(--ecf-space-4); font-family: var(--ecf-font-ui); font-size: var(--ecf-text-md); line-height: var(--ecf-leading-ui); color: var(--ecf-color-ink); background: var(--ecf-color-surface); border: 1px solid currentColor; }
.ecf-notice svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ecf-notice b { display: block; }
.ecf-notice > div { color: var(--ecf-color-ink); }
.ecf-notice--info { color: var(--ecf-color-info); }
.ecf-notice--warn { color: var(--ecf-color-warn); border-style: dashed; }
.ecf-notice--error { color: var(--ecf-color-fail); border-width: 2px; }
.ecf-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ecf-space-4); padding: var(--ecf-space-8) var(--ecf-space-5); text-align: center; }
.ecf-empty > svg { width: 64px; height: 64px; fill: none; stroke: var(--ecf-color-rubric); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ecf-empty p { max-width: 46ch; color: var(--ecf-color-ink-muted); }
.ecf-skeleton { display: flex; flex-direction: column; gap: var(--ecf-space-3); padding: var(--ecf-space-5); border: 1px solid var(--ecf-color-rule); background: var(--ecf-color-surface); }
.ecf-skeleton > * { height: 14px; background: var(--ecf-color-rule); border-radius: var(--ecf-radius-sm); animation: ecf-pulse 1.6s ease-in-out infinite; }
.ecf-skeleton > :first-child { width: 40%; } .ecf-skeleton > :last-child { width: 70%; }

/* ---------- ORNAMENT (fixed places only: header, dividers, first letter, corners, empty states) ---------- */
.ecf-headpiece { display: flex; align-items: center; gap: var(--ecf-space-3); color: var(--ecf-color-rubric); }
.ecf-headpiece::before, .ecf-headpiece::after { content: ""; flex: 1; height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.ecf-headpiece svg { width: 22px; height: 28px; fill: currentColor; }
.ecf-divider { height: 1px; border: 0; margin: 0; background: var(--ecf-color-rubric); }
.ecf-band { display: block; width: 100%; height: 26px; color: var(--ecf-color-rubric); }
.ecf-iconboard { padding: 14px; background: var(--ecf-color-bole); border-radius: 3px; }
.ecf-iconboard > div { background: radial-gradient(circle at 34% 22%, #EDD083 0, #D8B055 55%, #BF9438 100%); border: 2px solid #4E170E; }
.ecf-iconboard canvas { display: block; width: 100%; aspect-ratio: 22 / 25; }
.ecf-cornered { position: relative; }
.ecf-corner { position: absolute; width: 28px; height: 28px; fill: none; stroke: var(--ecf-color-rubric); stroke-width: 1.5; }
.ecf-corner--tl { top: 8px; left: 8px; } .ecf-corner--tr { top: 8px; right: 8px; transform: scaleX(-1); }
.ecf-corner--bl { bottom: 8px; left: 8px; transform: scaleY(-1); } .ecf-corner--br { bottom: 8px; right: 8px; transform: scale(-1, -1); }