/* The conviction reader on the flow pages (see flow-reader.js). */

/* A wide reader. A strip of the diagram stays visible on the left, so it still reads as part of the flow. */
body.lab-doc .dw{width:min(1180px, calc(100% - 96px))}
#reader.lab-pane .article{max-width:none; padding:28px 36px 90px}

/* The article on the left, the recommendations as a sticky list on the right. The list scrolls on its own when it is long. */
.rd-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; max-width:1080px; margin:0 auto}
.rd-side{position:sticky; top:20px; max-height:calc(100vh - 170px); overflow-y:auto; overscroll-behavior:contain}
.rd-k{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--amber); padding:10px 14px; border-radius:12px 12px 0 0}
.rd-todo{list-style:none; margin:0; padding:4px 0; border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; background:#fff}
.rd-todo li + li{border-top:1px solid var(--line)}
.rd-todo a{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:11px 14px; color:var(--ink); text-decoration:none}
.rd-todo a:hover{background:var(--amber-soft); text-decoration:none}
.rd-todo b{font-size:14px; line-height:1.4; font-weight:700}
.rd-todo .cs-scope{font-size:9.5px; padding:3px 5px; margin-left:4px; vertical-align:1px}
.rd-n{font-size:13px; font-weight:800; color:var(--amber); line-height:1.5}
/* The main recommendation spans the full width; a group heading is a small label above its rows. */
.rd-todo .rd-main-item a{grid-template-columns:1fr; background:var(--amber-soft)}
.rd-todo .rd-main-item b{font-size:14.5px; font-weight:800}
.rd-todo .rd-g{padding:14px 14px 6px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.rd-todo .rd-g + li{border-top:0}

@media (max-width:860px){
  body.lab-doc .dw{width:100%}
  .rd-grid{grid-template-columns:1fr}
  .rd-side{position:static; order:-1}
  #reader.lab-pane .article{padding:22px 16px 80px}
}