/* app_14_resources: the StarterKit page, EF-Apps, EF-Tools, the Resources bento and the magnet pages.
   Ported from the prototype's styles.css: the kit hero L911-949 and L1116, the drawn previews
   L461-476 and L1178, the spotlight and the ribbon L1992-2081, the bento L2343-2377, the magnet
   L2385-2394, the rail rows L2924-2925, L2987-2990 and L3066-3070.
   Every class carries the rs- prefix and every colour is a token: a class another app owns is never
   reused, or this app's look would depend on that app's stylesheet being on the page.
   No rule for a rendered document block: those move into the editor's own doc.css (0116). */

/* ---------- the shared pieces: the page head, the tone colours, one glyph ---------- */
.rs-head{margin-bottom:34px}   /* title and interactive share one .sec, so the h1 is not 200px away */
.rs-ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;color:var(--faint)}
.rs-t-ai{color:var(--c-ai)}
.rs-t-blog{color:var(--c-blog)}
.rs-t-docs{color:var(--c-docs)}
.rs-t-video{color:var(--c-video)}
.rs-mlabel{font:600 10px/1 var(--fm);letter-spacing:.2em;color:var(--faint)}

/* ================================================================
   RESOURCES: covers (Erik 2026-09-28, 0601: rs_index 04 promoted, then 02, the wide 16:9 cover).
   Three equal cards; each opens on a 16:9 cover, Erik's own picture when the row has one, else the
   glyph big on the dot grid; under it the title and its link on one line. Staff and members read one
   tile (0604): no type chip; NEW on a free one not taken, a training's badge on a training's one (0602).
   The drafts sit on their own board under the live one, for staff.
   ================================================================ */
.rs-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rs-tile{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;text-decoration:none;
  border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1);color:inherit;
  transition:border-color .14s,background .14s,color .14s}
.rs-tile:hover{border-color:var(--hl3);background:var(--s2)}
.rs-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rs-tile-top{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;
  aspect-ratio:16/9;padding:12px;overflow:hidden;border-bottom:1px solid var(--hl1);
  background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/14px 14px,var(--s2)}
/* the placeholder: the row's glyph, big, in the middle of the dot grid */
.rs-tile-ic{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px}
/* Erik's picture fills the panel; a chip stays readable on top of it. The hover (rs_index 04 promoted,
   0601): the picture rests a touch dim, lights up and zooms inside its own frame; no zoom when the
   person asks for less motion */
.rs-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.9)}
.rs-cover,.rs-tile-ic{transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s}
.rs-tile:is(:hover,:focus-visible) .rs-cover{filter:none}
@media (prefers-reduced-motion:no-preference){
  .rs-tile:is(:hover,:focus-visible) :is(.rs-cover,.rs-tile-ic){transform:scale(1.07)}
}
.rs-tile-top em{position:relative;z-index:1}
/* a training's resource (0602, rs_access 13 promoted): the training's own name as a code tag, top left */
.rs-acc{flex:none;margin-right:auto;padding:5px 8px;border:1px solid var(--hl3);border-radius:4px;background:var(--s1);
  font:600 9px/1.2 var(--fm);letter-spacing:.06em;font-style:normal;text-transform:uppercase;color:var(--ink)}
.rs-acc::before{content:"<";color:var(--faint)}
.rs-acc::after{content:"/>";color:var(--faint)}
/* the type on a Studio card (Settings > Resources): guide or download (Erik, 0601); the tile has none */
.rs-type{flex:none;font:600 8.5px/1 var(--fm);letter-spacing:.14em;font-style:normal;
  border:1px solid var(--hl2);border-radius:4px;padding:4px 6px;color:var(--faint);background:var(--s1)}
/* the title and its link share one line: the foot is the card's words, nothing more */
.rs-tfoot{display:flex;align-items:baseline;gap:12px;padding:13px 16px 14px}
.rs-tile h3{flex:1;min-width:0;font:700 1rem/1.3 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.rs-tile h3 .rs-lock{display:inline-block;vertical-align:middle;margin:0 0 2px 9px}
.rs-go{flex:none;font:600 11px/1 var(--fd);color:var(--acc2)}
.rs-tile:hover .rs-go{color:var(--acc)}
/* a free resource this person has not taken yet (0471): a faint mono chip, flat, no accent */
.rs-new{flex:none;font:600 8.5px/1 var(--fm);letter-spacing:.14em;font-style:normal;padding:4px 6px;
  border-radius:4px;background:var(--s3);border:1px solid var(--hl2);color:var(--dim2)}
/* the drafts board, staff only: the same cards under their own head, a staff drag moves one */
.rs-drafts-h{display:flex;align-items:baseline;gap:10px;margin:46px 0 16px;padding-top:22px;border-top:1px solid var(--hl1);
  font:600 10px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.rs-drafts-h em{font-style:normal;color:var(--dim2)}
[data-sort-row].rs-tile{cursor:grab}
/* the guest's last card (0601): the dot grid holds the words, the foot the one link */
.rs-join .rs-tile-top{align-items:center;justify-content:center;text-align:center}
.rs-join-h{padding:0 18px;font:700 1.35rem/1.25 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.rs-join h3{font-weight:600;color:var(--dim)}

/* ---------- one magnet: the opt-in and the thanks page are the same shape ---------- */
.rs-mg{max-width:none}
.rs-back{font:500 12px/1 var(--fm);letter-spacing:.06em;color:var(--faint)}
.rs-back:hover{color:var(--acc)}
.rs-mrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.rs-mg h1{margin-top:14px}
/* the row's cover (0601): a banner over the badges, cropped to one height whatever its shape */
.rs-mg-cover{margin:22px 0 0;border:1px solid var(--hl1);border-radius:var(--rc);overflow:hidden;background:var(--s2)}
.rs-mg-cover img{display:block;width:100%;height:clamp(160px,28cqw,280px);object-fit:cover}
.rs-mg .sub{margin-top:12px}
/* the tick list of app_pages under this app's own name: a class another app owns is never reused */
.rs-ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.rs-ticks li{font-size:.9rem;line-height:1.5;color:var(--dim);padding-left:22px;position:relative;min-width:0}
.rs-ticks li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:600}
.rs-act{margin-top:26px;border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1);
  padding:clamp(18px,2.4cqw,26px)}
.rs-dl{display:inline-block}
.rs-act .rs-dl + .cap-note{margin-top:12px}
.rs-inside{margin-top:38px;padding-top:26px;border-top:1px solid var(--hl1)}
.rs-inside-badge{display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--fm);
  letter-spacing:.2em;color:var(--faint);margin-bottom:18px}
.rs-inside-badge svg{width:14px;height:14px;fill:none;stroke:var(--acc);stroke-width:1.5}
/* the e-book a holder reads (0646): its section is the canvas, the width and the height, without the shell's
   frame (no card, no ticks), for the book app_ebooks draws in it; the title is for readers and search only */
main:has(> .rs-ebook){height:100%}
main > section.rs-ebook{display:flex;flex-direction:column;width:auto;height:100%;max-width:none;margin:0;border:0;
  border-radius:0;background:none;box-shadow:none}
main > section.rs-ebook::before{content:none}
/* the canvas's top right corner, where the staff switch stands (0651): the e-book's Download PDF beside it,
   btn-acc, smaller */
.rs-corner{position:absolute;top:12px;right:16px;z-index:6;display:flex;align-items:center;gap:8px}
.rs-corner > .gate-sw{position:static}
.rs-corner .rs-dl{padding:7px 12px;font-size:10.5px}
.rs-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ================================================================
   STARTERKIT (0603, sk_gate 26 promoted): the head on the left, the picture beside it at 16:9, the
   capture card under both, the video for a person who has the kit (sk_video 02 baked), what is
   included in three columns; one column under 620px. Every part is a child of the one grid.
   ================================================================ */
/* the frame around every resource opt-in and every guide gate (resource_card 03 promoted, Erik 2026-09-30,
   0369): it hugs the grid, the sides are the grid's own gutter, and it stands twice the shell's 18px below
   the tabs. Keyed on the frame holding the grid, so a guide's gate (section.gd-gate) takes it too. */
main > section:has(.rs-kit){max-width:1010px;margin-top:36px}
.wrap.rs-kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:900px;margin-inline:auto;
  column-gap:clamp(24px,4cqw,56px);row-gap:0;align-items:start;
  grid-template-areas:"pill pill" "h1 img" "sub img" "card card" "video video" "bar bar" "inc inc" "list list"}
.rs-kit > *{min-width:0}
.rs-kit .pill{grid-area:pill;justify-self:start}
.rs-kit h1{grid-area:h1;margin-top:12px}
.rs-kit .sub{grid-area:sub;max-width:40rem}
.rs-kit-side{grid-area:card;max-width:760px;width:100%;justify-self:center;margin-top:30px}
.rs-kit .rs-video{grid-area:video}
/* a holder's page: no card, so the side is empty; the download bar under the video, no card around it:
   the cover's dot grid, an orange glyph, the size beside the orange Download, the capture forms' beam
   (shell.css .captrace) running round it (starterkit_bar 10 baked, 0636) */
.rs-kit-side:empty{display:none}
.rs-kit-wait{grid-area:bar;margin-top:30px;text-align:center}
.rs-kit .rs-kitbar{grid-area:bar;margin-top:14px;position:relative;display:flex;align-items:center;gap:18px;
  padding:18px 20px;border:1px solid var(--hl1);border-radius:var(--rb);
  background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/14px 14px,var(--s2)}
.rs-kb-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:var(--rb);
  border:1px solid var(--hl3);background:var(--canvas);color:var(--acc)}
.rs-kb-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rs-kb-size{flex:none;font:400 11.5px/1 var(--fm);color:var(--dim)}
.rs-kitbar .btn{flex:none}
.rs-kit-inc{grid-area:inc;margin:28px 0 0;text-align:center}
.rs-kit-list{grid-area:list;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;gap:11px}
.rs-kit-list li{font-size:.95rem}
/* a magnet's WHAT IS INSIDE spans the grid under the list (0605) */
.rs-kit > .rs-inside{grid-column:1 / -1}
.rs-kit-note{margin-top:24px;font-size:.9rem;color:var(--dim);text-align:center}
.rs-kit-note a{color:var(--dim)}
.rs-kit-note a:hover{color:var(--acc)}
/* the picture: the row's cover (Settings > Resources) or its glyph on the dot grid; the width is set, as a
   grid item with an aspect ratio does not stretch */
.rs-kit-img{grid-area:img;position:relative;width:100%;margin:18px 0 0;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--hl1);border-radius:var(--rc);
  background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/14px 14px,var(--s2)}
.rs-kit-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rs-kit-ic{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px}
/* the click-to-load player: the poster is a button, the frame arrives on the click and nothing from
   a third party is on the page before it */
.rs-video{margin-top:26px;border:1px solid var(--hl2);border-radius:var(--rc);overflow:hidden;background:var(--canvas)}
.rs-vplay,.rs-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.rs-vplay{position:relative;padding:0;background:var(--canvas);cursor:pointer}
.rs-vplay img{width:100%;height:100%;object-fit:cover}
.rs-vglyph{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;
  border-radius:50%;background:var(--acc);color:var(--acc-ink)}
.rs-vglyph svg{width:26px;height:26px;fill:currentColor;stroke:none}
.rs-vplay:hover .rs-vglyph{background:var(--acc2)}
.rs-kitcard{background:var(--s1);border:1px solid var(--hl2);border-radius:var(--rc);padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.rs-kitcard h3{font-size:1.25rem;margin-bottom:8px}
.rs-kit-lead{font-size:.9rem;line-height:1.55;color:var(--dim);margin-bottom:20px}
.rs-kf-label{display:block;font:500 10px/1 var(--fm);letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin:0 0 8px}
.rs-kf-label span{text-transform:none;letter-spacing:.04em}
.rs-kf-input{display:block;width:100%;background:var(--canvas);border:1px solid var(--hl2);border-radius:var(--rb);
  color:var(--ink);font:400 14px/1 var(--fd);padding:13px 14px;outline:none;margin-bottom:16px}
.rs-kf-input::placeholder{color:var(--faint)}
.rs-kf-input:focus{border-color:var(--hl3)}
.rs-kitform .cap-fields{margin-bottom:18px}
.rs-kitform .cap-fields input{background:var(--canvas)}
/* auto width, never a full width bar, and the note stands clear of it (Erik, 0255) */
.rs-kf-btn{width:auto}
.rs-kitform .cap-note{margin-top:18px}
.rs-kd-check{width:52px;height:52px;margin:4px auto 16px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid var(--green)}
.rs-kd-check svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2}
.rs-kitcard h3,.rs-kitcard .rs-kit-lead{text-align:center}
.rs-kd-file{display:flex;align-items:center;gap:18px;background:var(--canvas);border:1px solid var(--hl2);
  border-radius:var(--rb);padding:16px 18px}
.rs-kd-meta{flex:1;min-width:0}
.rs-kd-meta > b{display:block;font:600 13px/1.3 var(--fm)}
.rs-kd-meta > span{display:block;font:400 11.5px/1.4 var(--fm);color:var(--dim);margin-top:3px}
.rs-kd-file .btn{flex:none}
/* the stubs page (0544; lab stubs_page closed on 06 Terminal, 0727): the video, then a mono listing, one zip
   per line named by its version, its size at the right, the All line orange on top */
.rs-stb-vid{margin:26px 0 0}
.rs-stubs{list-style:none;margin-top:12px;padding:14px 16px;background:var(--canvas);border:1px solid var(--hl2);
  border-radius:var(--rc);font:400 12.5px/1.5 var(--fm)}
.rs-stubs::before{content:"~/revit-api-stubs $ ls";display:block;margin-bottom:8px;color:var(--faint)}
.rs-stubs .rs-kd-file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;background:none;
  border:0;border-radius:0}
.rs-stubs .rs-kd-meta{flex:none;order:2}
.rs-stubs .rs-kd-meta > b{display:none}
.rs-stubs .rs-kd-meta > span{margin:0;font-size:11px;color:var(--faint)}
.rs-stubs .btn{display:inline-flex;align-items:center;gap:7px;padding:4px 6px;margin-left:-6px;border:0;border-radius:4px;
  background:none;font:400 12.5px/1.2 var(--fm);letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--dim)}
.rs-stubs .btn:hover{background:var(--s2);color:var(--ink)}
.rs-stubs .btn.btn-acc{margin:0 0 4px -6px;font-weight:600;background:var(--acc);color:var(--acc-ink)}
.rs-stubs .btn.btn-acc:hover{background:var(--acc2);color:var(--acc-ink)}
.rs-stubs .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* a guest's listing (0737): the names without their links, the form above the video */
.rs-stb-form{margin-top:26px}
.rs-stubs .rs-stb-name{padding:4px 0;color:var(--faint)}
.rs-stb-ic{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================================================================
   EF-APPS: the spotlight, one app at full size beside a rail you step through.
   The preview is CSS and SVG: rvtdocs.com sends X-Frame-Options, so a live frame
   is impossible and a screenshot would go stale on its own.
   ================================================================ */
.rs-spot{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--gap);align-items:start}
.rs-spot-rail{display:flex;flex-direction:column;gap:2px;border:1px solid var(--hl1);border-radius:var(--rc);
  background:var(--s1);padding:8px;position:sticky;top:14px}
.rs-spot-rail button{display:flex;align-items:center;gap:10px;text-align:left;background:none;cursor:pointer;
  border:1px solid transparent;border-radius:8px;padding:9px 10px;min-width:0;
  font:500 12.5px/1.3 var(--fd);color:var(--dim);transition:color .14s,background .14s,border-color .14s}
.rs-spot-rail button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-spot-rail button:hover{color:var(--ink);border-color:var(--hl2)}
.rs-spot-rail button.rs-act{color:var(--ink);background:var(--s2);border-color:var(--hl2)}
.rs-spot-main{border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1);overflow:hidden}
.rs-prev{position:relative;height:190px;background:var(--canvas);border-bottom:1px solid var(--hl1);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 22px;border-radius:11px 11px 0 0}
.rs-pl{display:block;height:5px;background:color-mix(in srgb,var(--c-docs) 28%,transparent)}
.rs-prev-off .rs-pl{background:var(--hl2)}
.rs-pc{display:block;height:5px}
.rs-c1{background:color-mix(in srgb,var(--c-docs) 35%,transparent)}
.rs-c2{background:color-mix(in srgb,var(--c-blog) 30%,transparent)}
.rs-c3{background:color-mix(in srgb,var(--acc) 30%,transparent)}
.rs-ind{margin-left:22px}
.rs-ind2{margin-left:44px}
.rs-w4{width:34%}
.rs-w5{width:44%}
.rs-w6{width:54%}
.rs-w7{width:64%}
.rs-w8{width:74%}
.rs-w9{width:86%}
.rs-prev-mcp svg{width:100%;height:60px}
.rs-prev-mcp svg *{fill:none;stroke:color-mix(in srgb,var(--c-forum) 40%,transparent);stroke-width:2}
.rs-prev-mcp circle{fill:color-mix(in srgb,var(--c-forum) 16%,transparent)}
.rs-wf-title{display:block;height:9px;width:40%;background:var(--hl3)}
.rs-wf-row{display:block;height:5px;width:80%;background:var(--hl2)}
.rs-wf-btn{display:block;height:9px;width:26%;background:color-mix(in srgb,var(--acc) 35%,transparent)}
.rs-prev-off .rs-wf-title,.rs-prev-off .rs-wf-btn{background:var(--hl2)}
.rs-sp-tx{padding:26px 28px 30px}
.rs-sp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rs-sp-head h2{margin:0;font-size:1.5rem}
.rs-sp-ic{width:24px;height:24px}
.rs-sp-p{font:400 1rem/1.6 var(--fd);color:var(--dim);max-width:52ch}
.rs-sp-need{display:flex;align-items:center;gap:12px;margin:20px 0 24px;padding:14px 16px;
  border:1px solid var(--hl1);border-radius:var(--rb);background:var(--canvas);
  font:400 13.5px/1.4 var(--fd);color:var(--ink)}
.rs-sp-soon{font:400 12px/1 var(--fm);color:var(--faint);letter-spacing:.04em}

/* ================================================================
   EF-TOOLS: the pyRevit tab drawn the way it sits in Revit.
   ================================================================ */
.rs-rib{border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1)}
.rs-rib-tabs{display:flex;gap:2px;padding:0 10px;background:var(--canvas);border-bottom:1px solid var(--hl1);
  border-radius:var(--rc) var(--rc) 0 0}
.rs-rib-tabs span{padding:11px 14px;font:500 11.5px/1 var(--fd);color:var(--faint)}
.rs-rib-tabs .rs-on{color:var(--ink);background:var(--s1);border:1px solid var(--hl1);border-bottom-color:var(--s1);
  border-radius:7px 7px 0 0;margin-bottom:-1px}
/* the ribbon can no longer clip, a pulldown menu has to hang below it, so the tab strip rounds its
   own top corners instead */
.rs-rib-body{display:flex;flex-wrap:wrap;gap:0;padding:16px 2px 10px}
.rs-grp{display:flex;flex-direction:column;gap:10px;padding:0 14px;border-right:1px solid var(--hl1)}
.rs-grp:last-child{border-right:none}
.rs-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.rs-btn{display:flex;flex-direction:column;align-items:center;gap:9px;width:88px;padding:12px 8px;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:9px;
  font:500 10.5px/1.35 var(--fd);color:var(--dim);text-align:center;transition:background .14s,border-color .14s,color .14s}
.rs-btn:hover{background:var(--s2);border-color:var(--hl2);color:var(--ink)}
.rs-btn.rs-act{background:var(--s2);border-color:var(--hl3);color:var(--ink)}
.rs-bic{width:26px;height:26px}
.rs-glabel{font:500 10px/1 var(--fm);letter-spacing:.18em;color:var(--faint);text-align:center;padding-bottom:4px;
  margin-top:auto}   /* every panel label sits on the same baseline */
/* split button: the arrow half is a strip UNDER the label, the way a large Revit ribbon split
   button reads, not a sliver stuck to the side */
.rs-wrap{position:relative;display:flex;flex-direction:column;align-items:stretch;width:88px}
.rs-wrap .rs-btn{width:auto;border-radius:9px 9px 0 0}
.rs-car{font-style:normal;font-size:9px;line-height:1;color:var(--dim)}
.rs-arrow{flex:none;height:15px;padding:0;background:none;border:1px solid transparent;border-top:1px solid var(--hl2);
  border-radius:0 0 9px 9px;color:var(--dim);font-size:9px;line-height:1;cursor:pointer}
.rs-arrow:hover{background:var(--s2);border-color:var(--hl2);color:var(--ink)}
.rs-menu{position:absolute;left:0;top:100%;z-index:30;min-width:172px;margin-top:4px;padding:5px;
  background:var(--s2);border:1px solid var(--hl2);border-radius:9px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.rs-menu button{display:block;width:100%;padding:8px 10px;background:none;border:0;border-radius:6px;
  font:500 12px/1.3 var(--fd);color:var(--dim);text-align:left;cursor:pointer}
.rs-menu button:hover{background:var(--s3);color:var(--ink)}
/* the 3-stack: three small rows in the height of one pushbutton */
.rs-stack{display:flex;flex-direction:column;gap:2px}
.rs-srow{display:flex;align-items:center;gap:8px;width:118px;padding:5px 9px;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:7px;
  font:500 10.5px/1.3 var(--fd);color:var(--dim);text-align:left}
.rs-sic{width:14px;height:14px}
.rs-srow:hover{background:var(--s2);border-color:var(--hl2);color:var(--ink)}
.rs-srow.rs-act{background:var(--s2);border-color:var(--hl3);color:var(--ink)}
/* the toggle keeps its state on the face of the button, dot on when it is on */
.rs-tg{display:inline-flex;align-items:center;gap:5px;font:600 8.5px/1 var(--fm);letter-spacing:.14em;
  font-style:normal;color:var(--faint)}
.rs-dot{width:5px;height:5px;border-radius:50%;background:var(--hl3)}
.rs-btn.rs-on{border-color:var(--hl3);background:var(--s3);color:var(--ink)}
.rs-btn.rs-on .rs-tg{color:var(--acc)}
.rs-btn.rs-on .rs-dot{background:var(--acc)}
.rs-rib-card{margin-top:22px;max-width:34rem;padding:22px 24px;border:1px solid var(--hl1);
  border-radius:var(--rc);background:var(--s1)}
.rs-card-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rs-card-head b{font:600 1.05rem/1.3 var(--fd);flex:1;min-width:0}
.rs-rib-card p{font:400 .92rem/1.6 var(--fd);color:var(--dim)}
/* .btn is inline by default, and an inline box ignores the margin, so the paragraph above it used to
   sit UNDER the button */
.rs-rib-card .btn{margin-top:18px;display:inline-block}

/* ================================================================
   The EF-Apps group in the member rail: the padlock idiom the locked trainings
   already use, one level down. Copied under rs- names, because .adm-row and
   .adm-kid belong to app_courses.
   ================================================================ */
.rs-grp-h{display:flex;align-items:baseline;gap:8px;padding:14px 8px 6px;font:600 9px/1 var(--fm);
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
/* the group label is the shell's .sb-grp; while the list is open it links the list (0471): the same
   look, one hover colour, no underline, no bar */
a.rs-grp-lk{display:block;text-decoration:none;transition:color .14s}
a.rs-grp-lk:hover{color:var(--ink)}
.rs-row{position:relative;display:flex;align-items:center;gap:9px;height:27px;padding:0 8px 0 13px;
  margin-left:22px;border-radius:7px;cursor:pointer;color:var(--dim);font:500 12px/1 var(--fd);min-width:0;
  text-decoration:none}
.rs-row:hover{background:var(--s2);color:var(--ink)}
.rs-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-row > em{flex:none;font:500 9.5px/1 var(--fm);color:var(--faint);font-style:normal}
.rs-locked{color:var(--faint)}
.rs-locked .rs-lab{opacity:.7}
.rs-locked > em{color:var(--acc2);letter-spacing:.1em;text-transform:uppercase}
.rs-lock{flex:none;width:9px;height:8px;border:1.5px solid var(--faint);border-radius:2px;position:relative;
  box-sizing:border-box;margin:3px 1px 0 0}
.rs-lock::before{content:"";position:absolute;left:1px;right:1px;top:-5px;height:4px;
  border:1.5px solid var(--faint);border-bottom:0;border-radius:3px 3px 0 0}
.rs-sp{flex:none;width:9px;height:8px}

/* ---------- the site window is the container, so every breakpoint is a container query ---------- */
@container page (max-width:1180px){
  .rs-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:820px){
  .rs-kit-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:900px){
  .rs-spot{grid-template-columns:minmax(0,1fr)}
  .rs-spot-rail{position:static;flex-direction:row;overflow-x:auto}
}
@container page (max-width:680px){
  .rs-bento,.rs-kit-list{grid-template-columns:minmax(0,1fr)}
}
@container page (max-width:620px){
  .wrap.rs-kit{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"pill" "h1" "sub" "img" "card" "video" "bar" "inc" "list"}
  .rs-kit-img{margin:24px 0 0;width:min(100%,480px);justify-self:center}
  /* the bar on a phone: the glyph and the words on one line, the size and Download under them, right */
  .rs-kit .rs-kitbar{flex-wrap:wrap;gap:14px 16px}
  .rs-kitbar .rs-kd-meta{flex-basis:calc(100% - 58px)}
  .rs-kitbar .rs-kb-size{margin-left:auto}
}

/* ---------- the RVTDocs MCP page (0618): lab 15 baked (0635), lab 34 "File tabs" baked (Erik 2026-10-01, 0650) ----------
   One left aligned column on one rhythm (--rsv-gap): the title, the lead, the plug scene (app_courses'
   icons/ai-lab-plug.html: the robot stays left, its wire grows into the socket), Activate alone (a normal
   Get Access while locked). Unlocked, numbered steps, each heading its number and a hairline to the
   edge: the token (Activated for under the heading, Copy inside the bar), how to connect (the AI tools as
   file tabs over one panel, the sub tabs underlined words, lab 31's), the tools behind their toggle, the
   FAQ (shell.css). Gray text, white for few accents. */
.rsv-hero{--rsv-gap:48px;--rsv-in:14px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding-bottom:calc(var(--secpad) * .6);counter-reset:rsv-sec}
.rsv-nl{max-width:34rem;margin:14px 0 0;font-size:1.15rem;line-height:1.55;color:var(--dim2)}
:is(.rsv-nf,.rsv-na,.rsv-nh,.rsv-ng,.rsv-nq){margin-top:var(--rsv-gap)}
.rsv-nf{width:min(100%,720px)}
:is(.rsv-na,.rsv-nh,.rsv-ng,.rsv-nq){width:min(100%,640px)}
.rsv-scene{width:100%;height:auto;color:var(--dim2)}
.rsv-nform{display:flex}
.rsv-nb{display:flex;align-items:center;justify-content:center;height:52px;padding:0 28px;font-size:15px}
.rsv-nct{margin-top:14px;font:500 12px/1.4 var(--fm);letter-spacing:.06em;color:var(--dim)}
.rsv-err{margin-top:12px;font-size:.9rem;color:var(--red)}
/* a step's heading: its number, its words, a hairline to the edge */
.rsv-ngk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:600 13px/1.3 var(--fm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2);counter-increment:rsv-sec}
.rsv-ngk::before{content:counter(rsv-sec,decimal-leading-zero);color:var(--faint)}
.rsv-ngk::after{content:"";flex:1 1 0;min-width:0;height:1px;background:var(--hl2)}
/* the token: Activated for under the heading, smaller and darker; the mask and its Copy one bar */
.rsv-tok{display:grid;gap:10px}
.rsv-tok .rsv-nct{margin-top:0}
.rsv-nid{margin-top:-4px;font-size:13px;color:var(--dim);overflow-wrap:anywhere}
.rsv-nid b{font-weight:600;color:var(--dim2)}
.rsv-tkr{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--hl3);border-radius:var(--rb);background:var(--s1)}
.rsv-tkv{flex:1 1 auto;min-width:0;font:500 12.5px/1.4 var(--fm);color:var(--ink);overflow-wrap:anywhere}
.rsv-tkv::before{content:"$ ";color:var(--faint)}
.btn.rsv-cp{flex-shrink:0;padding:5px 9px;font-size:10px}
/* how to connect: the AI tools as file tabs joined to the panel that holds their setup */
.rsv-cl{margin-top:var(--rsv-in)}
.rsv-clt{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:2px;margin-bottom:-1px}
.rsv-clt button{padding:9px 14px;border:1px solid;border-color:var(--hl1) var(--hl1) var(--hl2);border-radius:var(--rb) var(--rb) 0 0;
  background:var(--s1);font:500 12px/1 var(--fm);color:var(--faint);cursor:pointer}
.rsv-clt button:hover{color:var(--ink)}
.rsv-clt button.on{border-color:var(--hl2) var(--hl2) var(--s2);background:var(--s2);color:var(--ink)}
.rsv-clp{padding:16px;border:1px solid var(--hl2);border-radius:0 var(--rc) var(--rc) var(--rc);background:var(--s2)}
.rsv-clp > :first-child{margin-top:0}
/* the sub tabs (lab 31's): words in the mono face, the open one white over a white underline */
.rsv-cls{display:flex;flex-wrap:wrap;gap:16px}
.rsv-cls button{padding:2px 0;border:none;border-bottom:1px solid transparent;background:none;
  font:500 11px/1.4 var(--fm);letter-spacing:.04em;color:var(--faint);cursor:pointer}
.rsv-cls button:hover{color:var(--dim2)}
.rsv-cls button.on{border-bottom-color:var(--ink);color:var(--ink)}
:is(.rsv-clt,.rsv-cls) button:focus-visible{outline:2px solid var(--dim2);outline-offset:2px}
.rsv-clp .rsv-nct{margin-top:10px}
.rsv-clp a{color:var(--ink)}
.rsv-code{margin-top:12px}
.rsv-codeh{display:flex;align-items:center;gap:10px;margin-bottom:6px;font:500 11px/1.45 var(--fm);color:var(--dim)}
.rsv-codeh .rsv-cp{margin-left:auto}
.rsv-code pre{margin:0;max-height:320px;overflow:auto;padding:12px 14px;border:1px solid var(--hl2);border-radius:var(--rb);background:var(--canvas);
  font:500 12.5px/1.6 var(--fm);color:var(--dim2);white-space:pre-wrap;overflow-wrap:anywhere}
/* the tools (0641): a toggle, closed, like rvtdocs.com/mcp/'s, one line on what they do, a name and description table */
.rsv-ngs{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font:600 12px/1.3 var(--fm);
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.rsv-ngs::-webkit-details-marker{display:none}
.rsv-ngs::before{content:"+";width:1ch;font-size:14px;color:var(--faint)}
.rsv-ng[open] > .rsv-ngs::before{content:"\2212"}
.rsv-ngs:hover{color:var(--ink)}
.rsv-ngs:focus-visible{outline:2px solid var(--dim2);outline-offset:4px}
.rsv-ngd{margin-top:12px;font-size:14px;line-height:1.55;color:var(--dim)}
.rsv-tools{width:100%;margin-top:12px;border:1px solid var(--hl2);border-radius:var(--rc);border-spacing:0;overflow:hidden;background:var(--s1)}
.rsv-tools td{padding:11px 14px;border-top:1px solid var(--hl1);vertical-align:top;font:500 12.5px/1.6 var(--fm);color:var(--dim)}
.rsv-tools tr:first-child td{border-top:none}
.rsv-tools td:first-child{width:200px;font:600 12.5px/1.75 var(--fm);color:var(--acc);white-space:nowrap}
.rsv-nq .faqs{margin-top:var(--rsv-in)}
.rsv-nq .fa-a a{color:var(--acc)}
/* while Activate's request runs, the plug reaches toward the socket on its growing wire (keyframes: ticons.css') */
@media (prefers-reduced-motion:no-preference){
  .rsv:has(.rsv-nform.htmx-request) .tic-pl-end{animation:tic-pl-try .8s ease-in-out infinite alternate}
  .rsv:has(.rsv-nform.htmx-request) .tic-pl-wire{animation:tic-pl-try-w .8s ease-in-out infinite alternate}
}
@container page (max-width:640px){
  .rsv-hero{align-items:stretch}
  .rsv-hero h1{max-width:none}
  .rsv-tools td{display:block;width:auto}
  .rsv-tools td:first-child{width:auto;padding-bottom:0;border-bottom:none}
  .rsv-tools td + td{border-top:none}
}

/* ░█ CODE SAMPLES (0673) ░█ the index's cards, a page's cards (the editor's codeCard), the guest's free door */
.rs-cs h1{margin-top:14px}
.rs-cs .sub{margin-top:12px;max-width:640px}
.rs-cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:28px}
.card.rs-cs-card{position:relative;display:grid;gap:8px;padding:18px 40px 18px 18px;text-decoration:none;color:var(--dim)}
.rs-cs-card b{font:700 1.02rem/1.3 var(--fd);color:var(--ink)}
.rs-cs-card span{font-size:.9rem;line-height:1.45}
.rs-cs-card i{position:absolute;top:18px;right:18px;font-style:normal;color:var(--faint);transition:color .2s ease,transform .2s ease}
.rs-cs-card:hover i,.rs-cs-card:focus-visible i{color:var(--acc);transform:translateX(3px)}
.rs-cs-draft{opacity:.55}
.rs-cs-body{margin-top:24px}
.rs-cs-body .tt-doc > h3{margin-top:34px}
.rs-cs-gate{display:grid;gap:12px;max-width:640px;margin-top:24px;padding:22px}
.rs-cs-free{font:700 1.15rem/1.3 var(--fd);color:var(--acc)}
.rs-cs-gate p{margin:0;color:var(--dim);line-height:1.5}
.rs-cs-gate .cap{margin-top:4px}
.rs-cs-k{display:block;margin-top:28px;font:600 10px/1 var(--fm);letter-spacing:.14em;color:var(--faint)}
.rs-cs-k+.rs-cs-grid{margin-top:12px}
.card.rs-cs-want{border-color:var(--acc)}