/* InsurEco component stylesheet. Every value resolves through tokens.css. */

.iec-focusable:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Button ------------------------------------------------------------ */
.iec-btn {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; line-height: 1.4;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.iec-btn:hover { border-color: var(--focus-ring); color: var(--focus-ring); }
.iec-btn--primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.iec-btn--primary:hover { background: var(--navy-lift); border-color: var(--navy-lift); color: var(--on-navy); }
.iec-btn--accent { border-color: var(--border); color: var(--text-muted); }
.iec-btn--accent:hover { border-color: var(--magenta); color: var(--magenta); }
.iec-btn[disabled] { color: var(--text-dim); border-color: var(--border); background: transparent; cursor: not-allowed; }
.iec-btn[disabled]:hover { color: var(--text-dim); border-color: var(--border); }

/* ---- Tag --------------------------------------------------------------- */
.iec-tag {
  font-family: var(--font-mono); font-size: 10.4px; line-height: 1.4;
  color: var(--text-muted); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  display: inline-block; white-space: nowrap;
}

/* ---- Eyebrow ----------------------------------------------------------- */
.iec-eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; display: block;
  font-size: 10.4px; letter-spacing: .18em; line-height: 1.4; color: var(--text-muted);
}
.iec-eyebrow--role { font-size: 11.2px; letter-spacing: .1em; color: var(--magenta); }

/* ---- GradientRule ------------------------------------------------------ */
.iec-rule { height: 3px; width: 100%; border: 0; margin: 0; display: block;
  background: linear-gradient(135deg, var(--navy) 0%, var(--magenta) 55%, var(--yellow) 100%); }

/* ---- Element tile ------------------------------------------------------ */
.iec-el {
  width: 70px; height: 70px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--text-muted); background: transparent;
  transition: background-color .2s;
}
.iec-el__sym { font-size: 19.2px; font-weight: 700; line-height: 1; }
.iec-el__nm { font-size: 9.6px; letter-spacing: .04em; margin-top: var(--space-1); opacity: .75; }

/* ---- StackCard --------------------------------------------------------- */
.iec-stack {
  padding: var(--space-6); background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-none);
  transition: border-color .3s, box-shadow .3s, transform .3s; display: block; text-align: left;
}
.iec-stack:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.iec-stack__icon { font-size: 22.4px; line-height: 1; margin-bottom: var(--space-3); }
.iec-stack__title { font-family: var(--font-mono); font-size: 16px; font-weight: 600; letter-spacing: .02em;
  color: var(--text); margin: 0 0 var(--space-2); }
.iec-stack__body { font-size: 12.8px; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ---- LayerCard --------------------------------------------------------- */
.iec-layer {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--space-8);
  padding: var(--space-10); background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); align-items: start; box-shadow: var(--shadow-none);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.iec-layer:hover { border-color: var(--focus-ring); box-shadow: var(--shadow-layer); transform: translateY(-2px); }
.iec-layer__num { font-family: var(--font-mono); font-size: 40px; font-weight: 700; line-height: 1;
  color: var(--border-strong); transition: color .3s; }
.iec-layer:hover .iec-layer__num { color: var(--focus-ring); }
.iec-layer__title { font-size: 22.4px; font-weight: 600; line-height: 1.25; color: var(--text);
  margin: 0 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); }
.iec-layer__arrow { font-size: 14.4px; color: var(--text-muted); }
.iec-layer:hover .iec-layer__arrow { color: var(--focus-ring); }
.iec-layer__desc { font-size: 15.2px; line-height: 1.7; color: var(--text-muted); max-width: 600px;
  margin: 0 0 var(--space-4); }
.iec-layer__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- StatusBadge ------------------------------------------------------- */
.iec-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 12.8px; line-height: 1.4; font-weight: 500;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid; white-space: nowrap;
}
.iec-badge__dot { width: 7px; height: 7px; border-radius: var(--radius-round); flex: none; }

/* Role presets for the badge: one modifier sets all four colours from a role-*
 * set. Always keep the word beside the dot — status is never colour alone.
 * <span class="iec-badge iec-status--good"><i class="iec-badge__dot"></i>Paid</span> */
.iec-status--good      { color: var(--role-good-fg);      background: var(--role-good-bg);      border-color: var(--role-good-bd); }
.iec-status--bad       { color: var(--role-bad-fg);       background: var(--role-bad-bg);       border-color: var(--role-bad-bd); }
.iec-status--warn      { color: var(--role-warn-fg);      background: var(--role-warn-bg);      border-color: var(--role-warn-bd); }
.iec-status--attention { color: var(--role-attention-fg); background: var(--role-attention-bg); border-color: var(--role-attention-bd); }
.iec-status--pending   { color: var(--role-pending-fg);   background: var(--role-pending-bg);   border-color: var(--role-pending-bd); }
.iec-status--active    { color: var(--role-active-fg);    background: var(--role-active-bg);    border-color: var(--role-active-bd); }
.iec-status--info      { color: var(--role-info-fg);      background: var(--role-info-bg);      border-color: var(--role-info-bd); }
.iec-status--neutral   { color: var(--role-neutral-fg);   background: var(--role-neutral-bg);   border-color: var(--role-neutral-bd); }
.iec-status--good .iec-badge__dot      { background: var(--role-good-dot); }
.iec-status--bad .iec-badge__dot       { background: var(--role-bad-dot); }
.iec-status--warn .iec-badge__dot      { background: var(--role-warn-dot); }
.iec-status--attention .iec-badge__dot { background: var(--role-attention-dot); }
.iec-status--pending .iec-badge__dot   { background: var(--role-pending-dot); }
.iec-status--active .iec-badge__dot    { background: var(--role-active-dot); }
.iec-status--info .iec-badge__dot      { background: var(--role-info-dot); }
.iec-status--neutral .iec-badge__dot   { background: var(--role-neutral-dot); }

/* ======================================================================== *
 * Content blocks (#24). Usable in any kit. Tokens only, so data-theme and
 * data-brand restyle them. Where iec-ui.js adds behaviour, the block reads
 * correctly without it: tabs show every panel, copy buttons stay hidden,
 * sortable tables stay in source order.
 * ======================================================================== */

/* ---- Visually hidden (for labels a screen reader still needs) ---------- */
.iec-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Stat row: a few headline figures inside a page -------------------- */
/* <div class="iec-statrow"><div class="iec-stat"><span class="iec-stat__value">$1.24M</span>
 *   <span class="iec-stat__label">Collected</span><span class="iec-stat__note">▲ 8% vs Q2</span></div>…</div> */
.iec-statrow { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 var(--space-6); }
.iec-stat { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4) 0; border-top: 1px solid var(--border-strong); }
.iec-stat__value { font-family: var(--font-sans); font-weight: 300; font-size: 36px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.iec-stat__label { font-family: var(--font-mono); font-size: 11.2px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.iec-stat__note { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .iec-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iec-stat__value { font-size: 28px; } }

/* ---- Comparison matrix: options across, criteria down ------------------ */
/* <table class="iec-compare"> … <th class="iec-compare__pick">Option B</th> … <td class="iec-compare__pick">…
 * Marks carry a word: <span class="iec-mark iec-mark--yes">Yes</span> (--no, --partial). */
.iec-compare { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.iec-compare th, .iec-compare td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.iec-compare thead th { font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text); background: var(--bg-inset); }
.iec-compare tbody th { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .03em; color: var(--text-muted); background: transparent; }
.iec-compare .iec-compare__pick { background: var(--brand-wash); }
.iec-compare thead .iec-compare__pick { box-shadow: inset 0 3px 0 var(--brand-accent-ink); }
.iec-compare__tag { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent-ink); }
.iec-mark { display: inline-flex; align-items: baseline; gap: .4em; font-weight: 600; }
.iec-mark::before { font-family: var(--font-mono); font-weight: 700; }
.iec-mark--yes { color: var(--role-good-fg); }     .iec-mark--yes::before { content: "✓"; }
.iec-mark--no { color: var(--role-bad-fg); }       .iec-mark--no::before { content: "✕"; }
.iec-mark--partial { color: var(--role-warn-fg); } .iec-mark--partial::before { content: "◐"; }

/* ---- Pros and cons ---------------------------------------------------- */
/* <div class="iec-proscons"><div class="iec-proscons__col iec-proscons__col--pro"><h4>For</h4><ul>…</ul></div>
 *   <div class="iec-proscons__col iec-proscons__col--con"><h4>Against</h4><ul>…</ul></div></div> */
.iec-proscons { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 var(--space-6); }
.iec-proscons__col { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); background: var(--bg-raised); }
.iec-proscons__col > h4, .iec-proscons__col > .iec-eyebrow { margin: 0 0 var(--space-3); }
.iec-proscons__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.iec-proscons__col li { position: relative; padding-left: 1.5em; margin: 0; }
.iec-proscons__col li::before { position: absolute; left: 0; font-family: var(--font-mono); font-weight: 700; }
.iec-proscons__col--pro li::before { content: "+"; color: var(--role-good-fg); }
.iec-proscons__col--con li::before { content: "−"; color: var(--role-bad-fg); }

/* ---- Timeline / roadmap ------------------------------------------------ */
/* <ol class="iec-timeline"><li class="iec-timeline__item iec-timeline__item--done">
 *   <span class="iec-timeline__when">Q3 2026</span><h4 class="iec-timeline__title">…</h4><p>…</p></li>…</ol>
 * States: --done, --current, --next (default). The state is also a word in .iec-timeline__when or a badge. */
.iec-timeline { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-6); }
.iec-timeline__item { position: relative; padding-left: var(--space-8); margin: 0; }
.iec-timeline__item::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: calc(-1 * var(--space-6)); width: 2px; background: var(--border); }
.iec-timeline__item:last-child::before { display: none; }
.iec-timeline__item::after { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: var(--radius-round); border: 2px solid var(--border-strong); background: var(--bg); }
.iec-timeline__item--done::after { background: var(--role-good-fg); border-color: var(--role-good-fg); }
.iec-timeline__item--done::before { background: var(--role-good-bd); }
.iec-timeline__item--next::after { border-style: dashed; }
.iec-timeline__item--current::after { background: var(--brand-accent-ink); border-color: var(--brand-accent-ink); box-shadow: 0 0 0 4px var(--brand-wash); }
.iec-timeline__when { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.iec-timeline__title { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--text); }
.iec-timeline__item > p { margin: 0; color: var(--text-muted); }

/* ---- Checklist -------------------------------------------------------- */
/* <ul class="iec-checklist"><li class="iec-check iec-check--done"><span class="iec-check__state">Done</span> Text</li>…</ul>
 * --done, --todo, --blocked. The state word is visible text, never colour alone. */
.iec-checklist { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }
.iec-check { position: relative; padding-left: 1.7em; margin: 0; }
.iec-check::before { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 700; line-height: inherit; }
.iec-check--done::before { content: "✓"; color: var(--role-good-fg); }
.iec-check--todo::before { content: "○"; color: var(--text-muted); }
.iec-check--blocked::before { content: "✕"; color: var(--role-bad-fg); }
.iec-check__state { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: var(--space-2); }
.iec-check--done > :not(.iec-check__state) { color: var(--text-muted); }

/* ---- Pull quote ------------------------------------------------------- */
/* <figure class="iec-pullquote"><blockquote>…</blockquote><figcaption>Name, role</figcaption></figure> */
.iec-pullquote { margin: 0 0 var(--space-8); padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 3px solid var(--brand-accent-ink); }
.iec-pullquote blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--text); }
.iec-pullquote figcaption { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--text-muted); }

/* ---- People ----------------------------------------------------------- */
/* <ul class="iec-people"><li class="iec-person"><span class="iec-person__avatar" aria-hidden="true">DL</span>
 *   <span class="iec-person__name">Derek Lovrenich</span><span class="iec-person__role">Owner</span></li>…</ul> */
.iec-people { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.iec-person { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; margin: 0; }
.iec-person__avatar { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--brand-wash); color: var(--brand-accent-ink); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 13px; font-weight: 700; overflow: hidden; }
.iec-person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.iec-person__name { font-weight: 600; color: var(--text); line-height: 1.3; }
.iec-person__role { font-size: 13.6px; color: var(--text-muted); line-height: 1.3; }

/* ---- Disclosure / FAQ ------------------------------------------------- */
/* <div class="iec-faq"><details class="iec-details"><summary>Question?</summary><div class="iec-details__body"><p>…</p></div></details>…</div> */
.iec-faq { margin: 0 0 var(--space-6); border-top: 1px solid var(--border); }
.iec-details { border-bottom: 1px solid var(--border); }
.iec-details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; font-weight: 600; color: var(--text); }
.iec-details > summary::-webkit-details-marker { display: none; }
.iec-details > summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-weight: 400; color: var(--brand-accent-ink); }
.iec-details[open] > summary::after { content: "−"; }
.iec-details > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.iec-details__body { padding: 0 0 var(--space-4); color: var(--text-muted); }
.iec-details__body > :last-child { margin-bottom: 0; }

/* ---- Tabs ------------------------------------------------------------- */
/* <div class="iec-tabs"><div class="iec-tabs__list" role="tablist" aria-label="…">
 *   <button class="iec-tabs__tab" role="tab" id="t-a" aria-controls="p-a" aria-selected="true">A</button>…</div>
 *   <section class="iec-tabs__panel" role="tabpanel" id="p-a" aria-labelledby="t-a"><h3 class="iec-tabs__label">A</h3>…</section>…</div>
 * Without iec-ui.js the tab bar is hidden and every panel shows under its label. */
.iec-tabs { margin: 0 0 var(--space-6); }
.iec-tabs__list { display: none; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); overflow-x: auto; }
.iec-tabs[data-iec-ready] .iec-tabs__list { display: flex; }
.iec-tabs__tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-2) var(--space-4); min-height: 44px; white-space: nowrap; cursor: pointer; font: 400 14px/1.4 var(--font-sans); color: var(--text-muted); }
.iec-tabs__tab:hover { color: var(--text); }
.iec-tabs__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand-accent-ink); font-weight: 600; }
.iec-tabs__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.iec-tabs__panel + .iec-tabs__panel { margin-top: var(--space-8); }
.iec-tabs[data-iec-ready] .iec-tabs__panel + .iec-tabs__panel { margin-top: 0; }
.iec-tabs[data-iec-ready] .iec-tabs__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iec-tabs__panel > :last-child { margin-bottom: 0; }

/* ---- Code block with filename and copy -------------------------------- */
/* <figure class="iec-code"><figcaption class="iec-code__head"><span class="iec-code__file">catalog-info.yaml</span>
 *   <button class="iec-code__copy" type="button" hidden>Copy</button></figcaption><pre><code>…</code></pre></figure> */
.iec-code { margin: 0 0 var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-inset); overflow: hidden; }
.iec-code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); margin: 0; }
.iec-code__file { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.iec-code__copy { appearance: none; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); min-height: 32px; font: 400 12px/1 var(--font-mono); color: var(--text-muted); }
.iec-code__copy:hover { color: var(--text); border-color: var(--border-strong); }
.iec-code__copy:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.iec-code pre { margin: 0; padding: var(--space-4) var(--space-6); overflow-x: auto; background: transparent; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }
.iec-code pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ---- Sortable table (iec-ui.js adds the sort buttons) ----------------- */
/* <table class="iec-sortable"> — each <th> becomes a button; <td data-sort="1240000"> sorts by that value. */
.iec-sortable th { position: relative; }
.iec-sort-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: .4em; }
.iec-sort-btn::after { content: "↕"; opacity: .5; }
.iec-sortable th[aria-sort="ascending"] .iec-sort-btn::after { content: "↑"; opacity: 1; }
.iec-sortable th[aria-sort="descending"] .iec-sort-btn::after { content: "↓"; opacity: 1; }
.iec-sort-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Diagram: inline SVG drawn with tokens ---------------------------- */
/* <figure class="iec-diagram"><svg viewBox="0 0 600 160" role="img" aria-label="…">
 *   <rect class="iec-dg-node" …/><text class="iec-dg-label" …>…</text><path class="iec-dg-edge" …/></svg>
 *   <figcaption>…</figcaption></figure>
 * Shapes take their colour from the classes, so the drawing follows the theme. */
.iec-diagram { margin: 0 0 var(--space-8); }
.iec-diagram svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; font-family: var(--font-sans); }
.iec-dg-node { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 1; }
.iec-dg-node--accent { fill: var(--brand-wash); stroke: var(--brand-accent-ink); }
.iec-dg-node--muted { fill: var(--bg-inset); stroke: var(--border); stroke-dasharray: 4 3; }
.iec-dg-group { fill: none; stroke: var(--border); stroke-dasharray: 6 4; }
.iec-dg-edge { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.iec-dg-edge--accent { stroke: var(--brand-accent-ink); }
.iec-dg-arrow { fill: var(--text-muted); }
.iec-dg-label { fill: var(--text); font-size: 14px; font-weight: 600; }
.iec-dg-note { fill: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; }
.iec-diagram figcaption { margin-top: var(--space-3); font-size: 13.6px; color: var(--text-muted); }