/* Shared styles for resra.com/help. Tokens and header/footer rules mirror
   terms.html so the help center reads as the same site. */
:root { --bg:#171717; --panel:#262626; --line:#404040; --ink:#f5f5f5; --ink-soft:#a3a3a3; --ink-mute:#737373; --blue:#2563eb; --blue-dark:#1d4ed8; --blue-light:#60a5fa; --amber:#fbbf24; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Karla',-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; font-size:17px; }
.wrap { max-width:760px; margin:0 auto; padding:0 24px; }
header { border-bottom:1px solid var(--line); padding:18px 0; }
header .wrap { display:flex; align-items:center; justify-content:space-between; max-width:1080px; }
.logo { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:22px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:12px; }
.logo a { text-decoration:none; display:block; }
.logo .help-home { color:var(--blue-light); font-size:17px; white-space:nowrap; }
.logo img { width:222px; height:auto; border-radius:8px; display:block; }
.nav-cta { background:var(--blue); color:#ffffff; text-decoration:none; padding:10px 20px; border-radius:6px; font-weight:700; font-size:15px; transition:background .15s ease; }
.nav-cta:hover { background:var(--blue-dark); }
@media (max-width:640px) {
  header .wrap { display:block; }
  /* Smaller than the landing page's 300px: on an article the reader came for
     the steps, and a full-width logo pushed them below the first screen. */
  header { padding:12px 0; }
  .logo { flex-direction:row; justify-content:center; gap:12px; }
  .logo img { width:120px; }
  .logo .help-home { font-size:17px; }
  .nav-cta { display:none; }
}
main { padding:36px 0 64px; }
.crumbs { font-size:14px; color:var(--ink-mute); margin-bottom:22px; }
.crumbs a { color:var(--blue-light); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
h1 { font-family:'Fraunces',Georgia,serif; font-size:clamp(28px,4vw,40px); line-height:1.2; margin-bottom:6px; }
.meta { color:var(--ink-mute); font-size:14px; margin-bottom:26px; }
h2 { font-family:'Fraunces',Georgia,serif; font-size:21px; line-height:1.3; margin:34px 0 10px; }
h3 { font-size:17px; color:var(--ink); margin:22px 0 6px; }
p, li { color:var(--ink-soft); margin-bottom:12px; }
ul, ol { padding-left:24px; margin-bottom:12px; }
li { padding-left:4px; }
a { color:var(--blue-light); }
strong { color:var(--ink); font-weight:700; }
/* A label exactly as it appears on screen. */
.ui { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 7px; font-size:.92em; white-space:nowrap; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px; overflow-wrap:anywhere; }
.lede { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 22px; color:var(--ink); margin-bottom:30px; }
.note { border-left:3px solid var(--amber); background:var(--panel); border-radius:0 8px 8px 0; padding:14px 18px; margin:18px 0; }
.note p:last-child { margin-bottom:0; }
.note strong:first-child { color:var(--amber); }
.tablewrap { overflow-x:auto; margin:14px 0 18px; border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:15px; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }
th { color:var(--ink); background:var(--panel); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
/* Index cards */
.group { margin-top:34px; }
.group > h2 { margin-top:0; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.card { display:block; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; text-decoration:none; transition:border-color .15s ease; }
.card:hover { border-color:var(--blue-light); }
.card b { display:block; color:var(--ink); font-size:17px; margin-bottom:4px; }
.card span { display:block; color:var(--ink-soft); font-size:15px; line-height:1.5; }
@media (max-width:640px) { .cards { grid-template-columns:1fr; } }
.next { margin-top:40px; padding-top:22px; border-top:1px solid var(--line); }
.next p { margin-bottom:6px; }
footer { border-top:1px solid var(--line); padding:26px 0 34px; font-size:13px; color:var(--ink-mute); text-align:center; }
footer a { color:var(--blue-light); }
.footer-logo { width:222px; height:auto; border-radius:10px; margin:0 auto 14px; display:block; }
@media (max-width:640px) { .footer-logo { width:min(60vw,222px); } }
/* Screenshots are captured at 2x from the demo site; max-width keeps a narrow
   card from being blown up to the full column. */
.shot { margin:18px 0 22px; }
.shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:10px; }
.shot.narrow img { max-width:420px; }
.shot figcaption { font-size:14px; color:var(--ink-mute); margin-top:8px; }
/* Embedded how-to video: responsive 16:9, same frame as screenshots. */
.video { margin:18px 0 22px; }
.video .frame { position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#1c1e1d; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video figcaption { font-size:14px; color:var(--ink-mute); margin-top:8px; }

/* The how-to strip on the index (help.js fills it). */
.videos { margin:18px 0 22px; }
.videos .player { margin-bottom:14px; }
.videos .player-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.videos .player-title { font-size:15px; color:var(--ink-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.videos .player.static .player-head { display:none; }
.videos .close { background:none; border:1px solid var(--line); color:var(--ink-soft); border-radius:8px; padding:2px 10px; font:inherit; font-size:14px; cursor:pointer; }
.videos .close:hover { color:var(--ink); border-color:var(--ink-mute); }
.videos .frame { position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000; }
.videos .frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.videos .strip { list-style:none; display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px; scroll-snap-type:x mandatory; }
.videos .strip li { flex:0 0 200px; scroll-snap-align:start; }
.videos .strip button { display:block; width:100%; background:none; border:0; padding:0; text-align:left; cursor:pointer; color:var(--ink-soft); font:inherit; }
.videos .cover { position:relative; display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; box-shadow:0 0 0 1px var(--line); }
.videos .strip button:hover .cover, .videos .strip button.on .cover { box-shadow:0 0 0 2px var(--blue-light); }
.videos .cover img { width:100%; height:100%; object-fit:cover; display:block; }
.videos .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.videos .play svg { width:40px; height:40px; padding:10px; box-sizing:border-box; border-radius:50%; background:rgba(0,0,0,.6); fill:#fff; }
.videos .strip button:hover .play svg, .videos .strip button.on .play svg { background:var(--blue-light); fill:#111; }
.videos .t { display:block; margin-top:6px; font-size:14px; line-height:1.35; color:var(--ink-soft); }
.videos .strip button:hover .t { color:var(--ink); }
.videos .videos-note { font-size:14px; color:var(--ink-mute); margin-top:8px; }