/* Block: argos/accordion-list */
.accordion-grid { grid-template-columns: .78fr 1.22fr; }
.accordion-grid .sticky-copy { top: 130px; }
.accordion-callout { margin-top: 34px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.accordion-callout span { color: var(--violet); font-size: .63rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.accordion-callout p { margin: 8px 0 0; color: var(--muted); font-size: .84rem; }
.pattern-list { border-top: 1px solid var(--line); }
.pattern-row { border-bottom: 1px solid var(--line); }
.pattern-row summary { min-height: 96px; display: grid; grid-template-columns: 44px 1fr 28px; gap: 16px; align-items: center; cursor: pointer; list-style: none; }
.pattern-row summary::-webkit-details-marker { display: none; }
.pattern-row summary > span { color: var(--violet); font-size: .78rem; font-weight: 900; }
.pattern-row summary strong { font-size: 1.16rem; }
.pattern-row summary i { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; position: relative; }
.pattern-row summary i::before, .pattern-row summary i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 1px; background: var(--ink); }
.pattern-row summary i::after { transform: rotate(90deg); transition: transform 160ms ease; }
.pattern-row[open] summary i::after { transform: none; }
.pattern-row > div { padding: 0 44px 30px 60px; }
.pattern-row > div p { color: var(--muted); }
.pattern-row > div p b, .pattern-row > div p strong { color: var(--ink); }
.pattern-row .text-link { color: var(--violet); }
.pattern-row summary:focus-visible { outline: 3px solid rgba(97,24,215,.3); outline-offset: 4px; border-radius: 8px; }
.accordion-note { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); }
.accordion-note b, .accordion-note strong { color: var(--ink); }
.accordion-note--box { margin-top: 40px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-glass); }
.accordion-callout--dark { border-color: transparent; padding: 22px; border-radius: 17px; color: var(--white); background: var(--charcoal); }
.accordion-callout--dark span { color: #f0a84a; font-size: .62rem; letter-spacing: .1em; }
.accordion-callout--dark p { color: rgba(255,255,255,.72); font-size: .82rem; }

/* Style: cards (bordered cards on a colour spine, optional tag) */
.pattern-list--cards { position: relative; padding-left: 28px; border-top: 0; }
.pattern-list--cards::before { content: ""; position: absolute; left: 5px; top: 26px; bottom: 26px; width: 4px; border-radius: 9px; background: linear-gradient(180deg, var(--mint), #f0a84a, var(--violet)); }
.pattern-list--cards .pattern-row { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--card-glass); transition: box-shadow 180ms ease, border-color 180ms ease; }
.pattern-list--cards .pattern-row[open] { border-color: rgba(97,24,215,.25); box-shadow: 0 16px 34px rgba(40,28,56,.07); }
.pattern-list--cards .pattern-row summary { min-height: 86px; padding: 0 18px; grid-template-columns: 38px 1fr auto 27px; gap: 13px; }
.pattern-list--cards .pattern-row summary > span { font-size: .78rem; }
.pattern-list--cards .pattern-row summary strong { font-size: 1.05rem; }
.pattern-list--cards .pattern-row summary em { color: var(--muted); font-size: .59rem; font-style: normal; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.pattern-list--cards .pattern-row summary i { width: 27px; height: 27px; }
.pattern-list--cards .pattern-row > div { padding: 0 56px 24px 69px; }

/* Style: plain (no numbers) */
.pattern-list--plain .pattern-row summary { min-height: 94px; grid-template-columns: 1fr 28px; gap: 20px; font-size: 1.14rem; }
.pattern-list--plain .pattern-row summary strong { font-size: inherit; }
.pattern-list--plain .pattern-row summary i { width: 28px; height: 28px; }
.pattern-list--plain .pattern-row > div { padding: 0 50px 28px 0; }

/* Scale illustration */
.change-scale { margin-top: 36px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.change-scale i { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--mint), #f0a84a, var(--violet)); }
.on-dark .change-scale { color: rgba(255,255,255,.72); }

/* Orbit illustration */
.system-orbit { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-top: 40px; border: 1px dashed rgba(97,24,215,.24); border-radius: 50%; }
.system-orbit::before, .system-orbit::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(97,24,215,.13); border-radius: 50%; }
.system-orbit::after { inset: 31%; background: linear-gradient(145deg, var(--violet), var(--violet-dark)); box-shadow: 0 20px 50px rgba(97,24,215,.24); }
.system-orbit > span { position: absolute; z-index: 2; left: 50%; top: 50%; width: 120px; transform: translate(-50%, -50%); color: white; font-size: .7rem; font-weight: 900; text-align: center; }
.system-orbit i { position: absolute; z-index: 3; min-width: 74px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .68rem; font-style: normal; font-weight: 900; text-align: center; }
.system-orbit i:nth-of-type(1) { left: 50%; top: 0; transform: translateX(-50%); }
.system-orbit i:nth-of-type(2) { right: -4%; top: 24%; }
.system-orbit i:nth-of-type(3) { right: 2%; bottom: 19%; }
.system-orbit i:nth-of-type(4) { left: 50%; bottom: -1%; transform: translateX(-50%); }
.system-orbit i:nth-of-type(5) { left: 2%; bottom: 19%; }
.system-orbit i:nth-of-type(6) { left: -4%; top: 24%; }

/* Dark themes */
.on-dark .pattern-list, .on-dark .pattern-row, .on-dark .accordion-note { border-color: rgba(255,255,255,.16); }
.on-dark .pattern-row summary > span { color: var(--mint); }
.on-dark .pattern-row summary i { border-color: rgba(255,255,255,.3); }
.on-dark .pattern-row summary i::before, .on-dark .pattern-row summary i::after { background: var(--white); }
.on-dark .pattern-row > div p { color: rgba(255,255,255,.82); }
.on-dark .pattern-row > div p b, .on-dark .pattern-row > div p strong, .on-dark .pattern-row .text-link { color: var(--white); }
.on-dark .accordion-callout { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.on-dark .accordion-callout span { color: var(--mint); }

@media (max-width: 1100px) {
  .accordion-grid { grid-template-columns: 1fr; }
  .system-orbit { margin-inline: auto; }
}

@media (max-width: 760px) {
  .pattern-row summary { grid-template-columns: 36px 1fr 28px; }
  .pattern-row > div { padding-left: 52px; padding-right: 0; }
  .pattern-list--cards { padding-left: 18px; }
  .pattern-list--cards::before { left: 0; }
  .pattern-list--cards .pattern-row summary { min-height: 96px; grid-template-columns: 32px 1fr 27px; }
  .pattern-list--cards .pattern-row summary em { display: none; }
  .pattern-list--cards .pattern-row > div { padding-left: 51px; padding-right: 24px; }
  .pattern-list--plain .pattern-row summary { grid-template-columns: 1fr 28px; }
  .pattern-list--plain .pattern-row > div { padding-left: 0; }
  .system-orbit { width: 310px; max-width: 88vw; }
  .system-orbit i { min-width: 63px; font-size: .5rem; }
}