/* css/record.css — extra styles for the FrameCast docs page (record/index.html).
   Plain CSS on top of style.css, using the same colour tokens, so no Tailwind rebuild is needed. */

.rc-nav-links a:not(.btn) { font-size: 15px; color: var(--slate); text-decoration: none; transition: color .2s; }
.rc-nav-links a:not(.btn):hover { color: var(--ink); }
@media (max-width: 767px) { .rc-nav-links a:not(.btn) { display: none; } }

.rc-note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--slate); }

.rc-shot { margin-top: clamp(36px, 6vw, 64px); border: 1px solid var(--line); background: var(--surface); padding: clamp(8px, 1.2vw, 14px); }
.rc-shot img { width: 100%; height: auto; }
.rc-shot figcaption { font-size: 13.5px; color: var(--slate); padding: 12px 4px 2px; }

.rc-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.rc-head p { max-width: 46ch; font-size: 16px; color: var(--slate); }
@media (min-width: 768px) { .rc-head p { margin-left: auto; } }

/* feature grid */
.rc-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .rc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rc-grid { grid-template-columns: repeat(3, 1fr); } }
.rc-feature { background: var(--paper); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.rc-feature h3 { font-size: 1.12rem; letter-spacing: -.015em; display: flex; align-items: center; gap: 12px; }
.rc-feature p { font-size: 15px; color: var(--slate); }

/* layouts */
.rc-layouts { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .rc-layouts { grid-template-columns: repeat(3, 1fr); } }
.rc-layout { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.rc-layout svg { width: 100%; max-width: 240px; height: auto; margin-bottom: 6px; }
.rc-layout p { font-size: 15px; color: var(--slate); }

/* numbered steps */
.rc-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.rc-steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--line-soft); }
.rc-steps li:last-child { border-bottom: 1px solid var(--line-soft); }
.rc-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--clay); padding-top: 4px; }
.rc-steps h3 { font-size: 1.1rem; letter-spacing: -.015em; }
.rc-steps p { font-size: 15.5px; color: var(--slate); max-width: 68ch; }

.rc-split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 64px); }
@media (min-width: 900px) { .rc-split { grid-template-columns: .9fr 1.1fr; } }

/* tables */
.rc-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.rc-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.rc-table th, .rc-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.rc-table thead th { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); background: var(--surface); }
.rc-table tbody tr:last-child td { border-bottom: 0; }
.rc-table td:first-child { font-weight: 500; color: var(--ink); }
.rc-table td { color: var(--slate); }
.rc-yes { color: var(--success); font-weight: 500; }
.rc-part { color: var(--warning); font-weight: 500; }
.rc-no { color: var(--danger); font-weight: 500; }

/* FAQ */
.rc-faq { border-top: 1px solid var(--line); }
.rc-faq details { border-bottom: 1px solid var(--line); }
.rc-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 20px 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary::after { content: '+'; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--clay); font-size: 18px; transition: transform .2s; }
.rc-faq details[open] summary::after { transform: rotate(45deg); }
.rc-faq .rc-answer { padding: 0 0 22px; max-width: 70ch; color: var(--slate); font-size: 15.5px; display: grid; gap: 10px; }
.rc-faq code, .rc-code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; background: var(--surface); border: 1px solid var(--line); padding: 1px 6px; color: var(--ink); }
.rc-pre { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; overflow-x: auto; color: var(--ink); white-space: pre; }

.rc-privacy { display: grid; grid-template-columns: 1fr; gap: 18px 30px; }
@media (min-width: 640px) { .rc-privacy { grid-template-columns: repeat(2, 1fr); } }
.rc-privacy h3 { font-size: 1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rc-privacy p { font-size: 15px; color: var(--slate); }

.rc-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.rc-cta-actions .btn-ghost { color: var(--deep-ink); border-color: var(--deep-line); }
.rc-cta-actions .btn-ghost:hover { background: transparent; border-color: var(--deep-ink); color: var(--deep-ink); }

/* inline text links on this page darken on hover */
main a.text-clay:hover { color: var(--clay-ink); text-decoration: underline; }