/* FC article companion styles. Uses --accent (mockup) with --brand fallback (suite). */
.companion { --cmp-acc: var(--accent, var(--brand, #2563c9)); background: var(--surface, #fff); border: 1px solid var(--line, #e5e2da); border-radius: 14px; padding: 16px 16px 14px; margin-bottom: 18px; font-size: .92rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.companion .cmp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.companion .cmp-head b { font-size: .98rem; }
.companion .cmp-badge { margin-left: auto; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cmp-acc); border: 1px solid color-mix(in srgb, var(--cmp-acc) 40%, transparent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.companion .cmp-sub { color: var(--muted, #6b6b6b); margin: 0 0 12px; font-size: .82rem; line-height: 1.45; }
.companion .cmp-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-bottom: 12px; }
.companion .cmp-in { min-width: 0; }
.companion .cmp-in > span { display: block; font-size: .74rem; font-weight: 700; color: var(--muted, #6b6b6b); margin-bottom: 3px; }
.companion .cmp-shell { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; border: 1px solid var(--line, #ddd); border-radius: 9px; padding: 0 10px; background: var(--bg, #fff); }
.companion .cmp-shell:focus-within { border-color: var(--cmp-acc); outline: 2px solid color-mix(in srgb, var(--cmp-acc) 25%, transparent); }
.companion .cmp-shell b { color: var(--muted, #888); font-weight: 600; font-size: .85rem; }
.companion .cmp-shell input, .companion .cmp-shell select { border: 0; outline: 0; width: 100%; min-width: 0; padding: .5em 0; font: inherit; background: transparent; color: inherit; }
.companion .cmp-note { background: color-mix(in srgb, var(--cmp-acc) 9%, transparent); border-left: 3px solid var(--cmp-acc); border-radius: 0 8px 8px 0; padding: 9px 11px; font-size: .85rem; line-height: 1.5; margin-bottom: 12px; }
.companion .cmp-note[hidden] { display: none; }
.companion .cmp-outputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.companion .cmp-out { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; min-width: 0; padding: 6px 9px; border-radius: 8px; border: 1px solid transparent; }
.companion .cmp-out span { color: var(--muted, #6b6b6b); font-size: .8rem; min-width: 0; overflow-wrap: anywhere; }
.companion .cmp-out b { font-size: 1.02rem; letter-spacing: -.01em; white-space: normal; overflow-wrap: anywhere; min-width: 0; text-align: right; }
.companion .cmp-out.hot { border-color: color-mix(in srgb, var(--cmp-acc) 45%, transparent); background: color-mix(in srgb, var(--cmp-acc) 7%, transparent); }
.companion .cmp-out.hot b { color: var(--cmp-acc); }
.companion .cmp-toggle { display: none; }
.companion .cmp-foot { margin: 10px 0 0; font-size: .68rem; color: var(--muted, #999); }

@media (min-width: 961px) {
  /* Sidebar is ONE internally-scrollable sticky column. Prevents a long calculator from pinning to the
     top and clipping the TOC/CTA below it (they were unreachable). No nested sticky, no double scrollbar. */
  .art-side { max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
  .art-side .companion { position: static; z-index: 5; }
  .art-side .companion ~ .toc-card { position: static; }
  .art-side .toc-card { max-height: none; overflow: visible; }
}

@media (max-width: 960px) {
  .companion { position: fixed; left: 10px; right: 10px; bottom: 0; z-index: 60; margin: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.14); transform: translateY(calc(100% - 46px)); transition: transform .28s ease; max-height: 72vh; overflow: auto; }
  .companion.open { transform: translateY(0); }
  .companion .cmp-head { cursor: pointer; min-height: 30px; }
  .companion .cmp-toggle { display: block; background: var(--cmp-acc); color: #fff; border: 0; border-radius: 999px; font: inherit; font-size: .72rem; font-weight: 800; padding: 4px 12px; margin-left: auto; cursor: pointer; }
  .companion .cmp-badge { display: none; }
}

/* fc-fix: sidebar grid item must be allowed to shrink so companion content never spills */
.art-side { min-width: 0; }
.art-side .companion, .art-side .toc-card { max-width: 100%; box-sizing: border-box; }