/* THE FRAME around a scene: one kind of quiet control, one edge, five type sizes (24 / 17 / 15.5 / 14 / 12.5 px).
 * The values are the art director's, word for word (tools/render/LOOK.md section 10, LOOK-OPEN.md A5).
 *
 * WHY THIS FILE EXISTS (round 2, seat B, r2-render-b-1111): the law says these classes live in
 * tools/render/engine.css, which is seat A's file, and they were not there when the three pages were moved onto
 * them. So the pages are ready and share ONE frame here; the day engine.css carries rn-pick / rn-asks / rn-opt,
 * delete this file and its three <link> lines, and nothing else changes. No page sets a type size of its own. */
.rn-page{margin:0;background:#000;color:var(--ink,#F5F7FA);font-family:var(--font,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
.rn-page #view{position:relative;height:100vh;min-height:520px;background:#000}

/* "which sample": plain text choices, top right */
.rn-pick{position:absolute;right:24px;top:24px;z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 20px}
/* under the caption, on the left edge: how it is drawn, then what a person can ask */
.rn-asks{position:absolute;left:24px;top:112px;z-index:5;max-width:min(420px,calc(100% - 48px));display:flex;flex-direction:column;align-items:flex-start;margin-top:16px;pointer-events:none}
.rn-asks>*{pointer-events:auto}
.rn-row{display:flex;flex-direction:column;align-items:flex-start}
.rn-row[hidden]{display:none}
.rn-lead{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:#8E9AAB}
.rn-note{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:#B4BFCC}
.rn-note:empty{display:none}
/* every button in both */
.rn-page .rn-opt{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;font:inherit;font-size:14px;font-weight:400;line-height:1.3;
  color:#8E9AAB;min-height:44px;padding:0;margin:0;background:none;border:0;box-shadow:none;border-radius:0;cursor:pointer;text-align:left;text-decoration:none}
.rn-page .rn-opt[aria-pressed="true"],.rn-page .rn-opt[aria-current="true"]{color:#F5F7FA;font-weight:600}
.rn-page .rn-opt:hover{color:#F5F7FA}
.rn-page .rn-opt:focus-visible{outline:2px solid #F5F7FA;outline-offset:2px}
/* the card moves down when the choices sit above it, so they never touch */
.rn-page .rn-card{top:72px}

/* opened on request, under the scene: what the files say, and the parts of the firm's own model */
.rn-more{padding:24px 24px 40px;max-width:900px;font-size:14px;line-height:1.5;color:#B4BFCC}
.rn-more[hidden]{display:none}
.rn-more h2{margin:0 0 8px;font-size:17px;font-weight:600;color:#F5F7FA}
.rn-more h2~h2{margin-top:24px}
.rn-more ul{margin:0;padding:0;list-style:none}
.rn-more li{margin:6px 0}
.rn-more .rn-dim{color:#8E9AAB;font-size:12.5px}
.rn-more select{background:#0C0D10;color:#F5F7FA;border:0;border-radius:8px;padding:6px 8px;font:inherit;box-shadow:inset 0 0 0 1px #3A3D44}

/* one line while a picture is being drawn, and the plain picture when the drawing code cannot load at all */
.rn-wait{position:absolute;left:24px;bottom:24px;margin:0;font-size:12.5px;color:#8E9AAB;z-index:4}
.rn-plain{width:100%;height:100%;display:block}
.rn-plain rect:focus,.rn-plain rect:focus-visible{outline:none;stroke:#F5F7FA}
.rn-plain-note{position:absolute;left:24px;bottom:16px;color:#8E9AAB;font-size:12.5px}
.rn-plain-card{position:absolute;right:24px;top:72px;max-width:min(340px,calc(100% - 48px));padding:16px;border-radius:14px;background:#0C0D10;box-shadow:inset 0 0 0 1px #3A3D44;font-size:14px}
.rn-plain-card b{display:block;font-size:15.5px;color:#F5F7FA}
.rn-plain-card div{display:flex;justify-content:space-between;gap:16px;padding:3px 0;color:#B4BFCC}
.rn-plain-card div span:last-child{color:#F5F7FA;text-align:right}
.rn-plain-card p{color:#8E9AAB;font-size:12.5px;margin-top:8px}

@media (max-width:600px){
  .rn-pick{position:absolute;left:16px;right:16px;top:auto;justify-content:flex-start;gap:0 16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .rn-pick::-webkit-scrollbar{display:none}
  .rn-pick .rn-opt{white-space:nowrap;flex:0 0 auto}
  .rn-asks{left:16px;right:16px;max-width:none;margin-top:0}
  .rn-lead{display:none}
  .rn-row{flex-direction:row;flex-wrap:nowrap;gap:0 18px;width:100%;overflow-x:auto;scrollbar-width:none}
  .rn-row::-webkit-scrollbar{display:none}
  .rn-row .rn-opt{white-space:nowrap;flex:0 0 auto}
  .rn-more{padding:16px 16px 32px}
  .rn-wait,.rn-plain-note{left:16px}
}