/* Extend the existing spell-school workbench; the painted lineage carries the hierarchy. */
.familiar-progress { margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid #a28c60; color: #392f24; }
.familiar-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.familiar-progress h3 { margin: 0; font: 800 1.5rem 'Barlow Condensed', sans-serif; }
.familiar-progress-heading p, .familiar-bond-copy, .familiar-damage-note { margin: 6px 0 14px; color: #51432d; font-size: .88rem; line-height: 1.5; }
.familiar-form-label { color: #77521a; font-weight: 700; font-size: .85rem; }
.familiar-evolution-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 16px 0; list-style: none; gap: 18px; }
.familiar-evolution-track li { min-width: 0; border-top: 2px solid #a28c60; padding-top: 8px; }
.familiar-evolution-track li.current { border-color: #77521a; }
.familiar-evolution-track canvas { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 6px; }
.familiar-evolution-track li > span { color: #51432d; font-size: .77rem; }
.familiar-evolution-track li.current > span { color: #77521a; }
.familiar-evolution-track h4 { margin: 4px 0 8px; font: 800 1.15rem 'Barlow Condensed', sans-serif; }
.familiar-evolution-track strong { color: #77521a; font-size: .87rem; }
.familiar-evolution-track p { margin: 5px 0 0; color: #51432d; font-size: .84rem; line-height: 1.5; }
.familiar-set-forms { padding: 12px 0; border-top: 1px solid #a28c60; }
.familiar-set-forms summary { cursor: pointer; font-weight: 700; color: #77521a; padding: 6px 0; }
.familiar-set-forms summary:focus-visible { outline: 2px solid #77521a; outline-offset: 4px; }
.familiar-set-forms > p { font-size: .87rem; color: #51432d; line-height: 1.5; }
.familiar-set-forms > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.familiar-set-forms figure { margin: 0; min-width: 0; }
.familiar-set-forms canvas { display: block; width: 100%; max-width: 240px; height: auto; margin: auto; }
.familiar-set-forms figcaption { display: grid; gap: 4px; text-align: center; font-size: .87rem; }
.familiar-set-forms figcaption span, .familiar-set-forms figcaption small { color: #51432d; }
.familiar-evolution-notice { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border: 1px solid #c8902d; border-radius: 8px; background: #14243a; color: #f7efda; text-align: center; font-weight: 700; z-index: 12; pointer-events: none; }
.familiar-evolution-notice[hidden] { display: none; }
@media (max-width: 560px) {
  .familiar-progress-heading { align-items: start; flex-direction: column; gap: 2px; }
  .familiar-evolution-track { grid-template-columns: 1fr; gap: 18px; }
  .familiar-evolution-track li { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .familiar-evolution-track canvas { grid-column: 1; grid-row: 1 / 5; align-self: center; }
  .familiar-evolution-track li > span, .familiar-evolution-track h4, .familiar-evolution-track strong, .familiar-evolution-track p { grid-column: 2; }
  .familiar-set-forms > div { gap: 12px; }
}