/* 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); }
.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; gap: 9px; margin-bottom: 12px; }
.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; 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%; 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; gap: 7px; }
.companion .cmp-out { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 9px; border-radius: 8px; border: 1px solid transparent; }
.companion .cmp-out span { color: var(--muted, #6b6b6b); font-size: .8rem; }
.companion .cmp-out b { font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
.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: 981px) {
  .art-side .companion { position: sticky; top: 18px; z-index: 5; }
  .art-side .companion ~ .toc-card { position: static; }
}

@media (max-width: 980px) {
  .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; }
}