/* Shared tutorial accordion, with isolated photographic details. */
.t3-integrated .relay-settings { background: var(--surface); }
.t3-integrated .relay-settings [id] { scroll-margin-top: 32px; }
.t3-integrated .relay-settings strong, .t3-integrated .relay-settings b { font-weight: 700; }
.t3-integrated .relay-settings__terminal { white-space: nowrap; }
.t3-integrated .relay-settings__overview {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6);
    align-items: center; margin-bottom: var(--space-5); padding: var(--space-5);
    border: 1px solid var(--border-light); border-radius: var(--radius);
    background: linear-gradient(125deg, var(--brand-soft), var(--surface) 75%);
    box-shadow: var(--shadow-soft);
}
.t3-integrated .relay-settings__full { display: grid; justify-items: center; gap: var(--space-3); }
.t3-integrated .relay-settings__full img { width: 180px; height: 220px; object-fit: contain; filter: drop-shadow(8px 8px 5px rgba(26,26,26,.12)); }
.t3-integrated .relay-settings__full > span { color: var(--brand-dark); font-size: 14px; text-align: center; }
.t3-integrated .relay-settings__intro h2 { margin: var(--space-2) 0 var(--space-4); }
.t3-integrated .relay-settings__intro > p:not(.eyebrow) { color: var(--text-secondary); max-width: 60ch; }
.t3-integrated .relay-settings__card { min-width: 0; overflow: hidden; border: 1px solid var(--border-light); border-top: 3px solid var(--brand); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.t3-integrated .relay-settings__figure { margin: 0; padding: var(--space-6); background: radial-gradient(ellipse at 45% 40%, var(--surface), transparent 70%), linear-gradient(140deg, var(--brand-soft), var(--brand-soft-2)); }
.t3-integrated .relay-settings__photo { display: block; max-width: 330px; margin-inline: auto; filter: drop-shadow(8px 12px 8px rgba(26,26,26,.12)); }
.t3-integrated .relay-settings__crop { display: block; position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.t3-integrated .relay-settings__crop img { position: absolute; max-width: none; height: auto; margin: 0; }
/* Only trim excess transparent canvas in the layout; all markings stay visible. */
.t3-integrated .relay-settings__photo--dials .relay-settings__crop { aspect-ratio: 920 / 1190; }
.t3-integrated .relay-settings__photo--dials img { width: 131.304%; left: -16.304%; top: -4.202%; }
.t3-integrated .relay-settings__photo--supply .relay-settings__crop { aspect-ratio: 936 / 900; }
.t3-integrated .relay-settings__photo--supply img { width: 164.103%; left: -32.051%; top: -10.556%; }
.t3-integrated .relay-settings__photo--contacts .relay-settings__crop { aspect-ratio: 960 / 1130; }
.t3-integrated .relay-settings__photo--contacts img { width: 125%; left: -11.458%; top: -3.54%; }
/* Show only the three controls of the matching 04744 photograph, preserving its original pixels. */
.t3-integrated .relay-settings__photo--04744 { max-width: 300px; }
.t3-integrated .relay-settings__photo--04744 .relay-settings__crop { aspect-ratio: var(--settings-ratio); border-radius: var(--radius); }
.t3-integrated .relay-settings__photo--04744 img { width: var(--settings-width); left: var(--settings-left); top: var(--settings-top); }
.t3-integrated .relay-settings__figure figcaption { max-width: 330px; margin: var(--space-3) auto 0; color: var(--text-secondary); font-size: 14px; }
.t3-integrated .relay-settings__body { padding: var(--space-6); }
.t3-integrated .relay-settings__steps { padding-left: var(--space-5); margin: 0; }
.t3-integrated .relay-settings__steps li { padding-left: var(--space-2); margin-bottom: var(--space-5); }
.t3-integrated .relay-settings__steps li::marker { color: var(--brand); font-weight: 700; }
.t3-integrated .relay-settings__steps strong, .t3-integrated .relay-settings__steps span { display: block; }
.t3-integrated .relay-settings__steps span { margin-top: var(--space-2); color: var(--text-secondary); }
.t3-integrated .relay-settings__example { padding: var(--space-4) var(--space-5); border-left: 4px solid var(--brand); background: var(--brand-soft); border-radius: var(--radius); }
.t3-integrated .relay-settings__example > strong, .t3-integrated .relay-settings__example > span { display: block; }
.t3-integrated .relay-settings__small { color: var(--text-secondary); font-size: 14px; margin-bottom: 0; }
.t3-integrated .relay-settings__contacts { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.t3-integrated .relay-settings__contacts > div { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius); }
.t3-integrated .relay-settings__contacts dt { flex: 0 0 auto; color: var(--brand-dark); font-weight: 700; }
.t3-integrated .relay-settings__contacts dd { margin: 0; }
.t3-integrated .relay-settings__key { padding-top: var(--space-4); border-top: 1px solid var(--border-light); margin-bottom: 0; }
@media (max-width: 900px) {
    .t3-integrated .relay-settings__overview { grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
    .t3-integrated .relay-settings__body { padding: var(--space-5); }
    .t3-integrated .relay-settings__full img { width: 160px; height: 200px; }
}
@media (max-width: 700px) {
    .t3-integrated .relay-settings__overview, .t3-integrated .relay-settings__panel { grid-template-columns: minmax(0, 1fr); }
    .t3-integrated .relay-settings__intro { display: contents; }
    .t3-integrated .relay-settings__overview { gap: var(--space-3); padding: var(--space-5); }
    .t3-integrated .relay-settings__intro .eyebrow { grid-row: 1; margin: 0; }
    .t3-integrated .relay-settings__intro h2 { grid-row: 2; margin: 0; }
    .t3-integrated .relay-settings__intro > p:not(.eyebrow):not(.relay-settings__hint) { grid-row: 3; margin: 0; }
    .t3-integrated .relay-settings__full { grid-row: 4; }
    .t3-integrated .relay-settings__full img { height: 170px; }
    .t3-integrated .relay-settings__figure { padding: var(--space-4); }
    .t3-integrated .relay-settings__body { padding: var(--space-5) var(--space-4); }
    .t3-integrated .relay-settings__contacts > div { gap: var(--space-3); }
}

.t3-integrated .relay-settings__intro .relay-settings__hint { color: var(--brand-dark); font-weight: 700; font-size: 16px; }
.t3-integrated .relay-settings__accordion { display: grid; gap: var(--space-3); }
.t3-integrated .relay-settings__card > summary { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); list-style: none; color: var(--brand-dark); }
.t3-integrated .relay-settings__card > summary::-webkit-details-marker { display: none; }
.t3-integrated .relay-settings__card > summary::after { content: ''; flex: 0 0 9px; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.t3-integrated .relay-settings__card[open] > summary::after { transform: rotate(225deg); }
.t3-integrated .relay-settings__card > summary h3 { margin: 0; font-size: 21px; line-height: 1.35; color: inherit; }
.t3-integrated .relay-settings__number { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 16px; }
.t3-integrated .relay-settings__card > summary:hover, .t3-integrated .relay-settings__card[open] > summary { background: var(--brand-soft); }
.t3-integrated .relay-settings__card > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: -4px; box-shadow: none; }
.t3-integrated .relay-settings__card[open] > summary { border-bottom: 1px solid var(--border-light); }
.t3-integrated .relay-settings__card[open] .relay-settings__number { background: var(--brand); color: var(--surface); }
.t3-integrated .relay-settings__panel { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(0, 1.65fr); align-items: center; }
.t3-integrated .relay-settings__card[open] .relay-settings__body { animation: relay-settings-fade .28s ease-out; }
@keyframes relay-settings-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
    .t3-integrated .relay-settings__panel { grid-template-columns: minmax(0, 1fr); }
    .t3-integrated .relay-settings__card > summary { padding: var(--space-4); gap: var(--space-3); }
    .t3-integrated .relay-settings__card > summary h3 { font-size: 18px; }
    .t3-integrated .relay-settings__intro .relay-settings__hint { margin: var(--space-2) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .t3-integrated .relay-settings__card[open] .relay-settings__body { animation: none; }
}