/* The member area borrows the site's type and colour from ../styles.css and adds
   only what a signed-in page needs. Loaded after it, so the tokens are already
   defined here. */

body.members{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  margin:0;
}

.mwrap{
  max-width:960px;
  margin:0 auto;
  padding:0 var(--pad);
}

.mtop{margin:34px 0 20px}
.mtop h1{
  font-family:var(--mark);
  font-weight:700;
  font-size:clamp(30px,4vw,46px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0;
}

.mlede{font-size:17.5px;line-height:1.5;color:var(--ink-60);max-width:56ch;margin:0 0 26px}
.mfine{font-size:14px;color:var(--ink-60);line-height:1.5}

.mnotice{
  border:1px solid var(--panel-edge);
  border-left:5px solid var(--accent);
  background:var(--panel);
  padding:14px 18px;
  margin:0 0 24px;
  font-size:15px;
  line-height:1.5;
}

.msignin,.mnewkey{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:420px;
  margin:0 0 20px;
}
.msignin label,.mnewkey label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-60);
}
.msignin input,.mnewkey input{
  font-family:var(--body);
  font-size:16px;
  padding:13px 14px;
  border:1px solid var(--panel-edge);
  background:var(--paper);
  color:var(--ink);
  border-radius:0;
}
.msignin input:focus,.mnewkey input:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.msignin .cta,.mnewkey .cta{align-self:flex-start}
.mrecord{display:flex;flex-direction:column;gap:10px}
.mrecord .mfine{margin:0}
.mrecord .cta{align-self:flex-start}
.mrecord .cta:disabled{opacity:.6;cursor:default}
.mcheck{display:flex;gap:10px;align-items:flex-start;line-height:1.5;cursor:pointer}
.mcheck input{margin:4px 0 0;width:18px;height:18px;flex:none;accent-color:var(--accent)}

.panel .mresults{margin-bottom:0}
.panel .mresult{background:none;border:0;border-top:1px solid var(--panel-edge);padding:20px 0;margin:0}
.panel .mresult:first-child{border-top:0;padding-top:6px}
.panel h2{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.025em;
  margin:0 0 10px;
}
.panel p{margin:0 0 10px;line-height:1.55}
.panel--key{border-color:var(--accent)}

/* Latest sessions: cards, and a section that folds away. A member who came to
   ask a question does not need five recordings in front of them first. */
.mlatest summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.mlatest summary::-webkit-details-marker{display:none}
.mlatest summary h2{display:inline;margin:0}
.mlatest summary .mfine{margin:0;color:var(--ink-60)}
/* The marker is drawn rather than borrowed so it can rotate, and so the
   heading keeps the type it has everywhere else on the page. */
.mlatest summary::after{
  content:"";
  order:-1;
  width:0;height:0;
  border-left:5px solid var(--ink-40);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .12s ease;
  transform-origin:25% 50%;
}
.mlatest[open] summary::after{transform:rotate(90deg)}
.mlatest summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.mcards{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.mcard{margin:0}
.mcardlink{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--panel-edge);
  background:var(--paper);
  transition:border-color .12s ease;
}
.mcardlink:hover{border-color:var(--accent)}
.mcardlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Reserved by aspect ratio, so a lazy image arriving does not shove the card
   below it down the page. */
.mshot{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--ink);
}
/* Most of the corpus has no poster frame yet. An empty block of the same size
   keeps the grid honest rather than collapsing that one card. */
.mshot--none{background:var(--panel-edge)}

.mcardbody{display:block;padding:14px 16px 16px}
.mcardtitle{
  display:block;
  font-weight:600;
  line-height:1.3;
  margin-bottom:6px;
}
.mcardlink:hover .mcardtitle{color:var(--accent)}
.mcardbody .mmeta{display:block;margin:0 0 8px}
.mcardsummary{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
}

.mkey{
  display:block;
  font-family:var(--mono);
  font-size:14px;
  word-break:break-all;
  background:var(--paper);
  border:1px solid var(--panel-edge);
  padding:14px;
  margin-top:6px;
}

.mkeys{
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
  font-size:15px;
}
.mkeys th{
  text-align:left;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
  font-weight:500;
  padding:0 12px 8px 0;
  border-bottom:1px solid var(--ink);
}
.mkeys td{
  padding:12px 12px 12px 0;
  border-bottom:1px solid var(--panel-edge);
  vertical-align:middle;
}
.mkeys tr:last-child td{border-bottom:none}

.mlink{
  background:none;
  border:none;
  padding:0;
  font-family:var(--body);
  font-size:15px;
  color:var(--accent);
  cursor:pointer;
  text-decoration:underline;
}
.mlink:hover{color:var(--ink)}

/* Revoking a key cannot be undone, so it does not look like a way of going
   somewhere. Quiet, outlined, and plainly a different kind of thing. */
.mrevoke{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-60);
  background:none;
  border:1px solid var(--panel-edge);
  padding:5px 9px;
  cursor:pointer;
}
.mrevoke:hover{border-color:var(--ink);color:var(--ink)}

.msignout{margin-top:36px}
.mono{font-family:var(--mono);font-size:.92em}
.nowrap{white-space:nowrap}

@media (max-width:560px){
  .mkeys{font-size:14px}
  .mkeys th:nth-child(3),.mkeys td:nth-child(3){display:none}
}

/* ---------- search ---------- */

.msearch{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin:0 0 28px;
}
.msearch label{
  flex:0 0 100%;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
}
.msearch input{
  flex:1 1 340px;
  font-family:var(--body);
  font-size:16px;
  padding:13px 14px;
  border:1px solid var(--panel-edge);
  background:var(--paper);
  color:var(--ink);
  border-radius:0;
}
.msearch input:focus{outline:2px solid var(--accent);outline-offset:1px}

.mcount{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
  margin:0 0 16px;
}

.mresults{list-style:none;margin:0 0 30px;padding:0}
.mresult{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  padding:22px 26px;
  margin:0 0 12px;
}
.mresult h3{
  font-family:var(--display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 6px;
  line-height:1.25;
}
.mresult h3 a{color:var(--ink);text-decoration:none;box-shadow:0 1px 0 var(--accent-lift)}
.mresult h3 a:hover{color:var(--accent)}
.mmeta{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--ink-40);
  margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}
.mquote{
  border-left:2px solid var(--accent-lift);
  padding-left:14px;
  margin:0 0 10px;
  line-height:1.6;
  font-size:15px;
}

/* ------------------------------------------------------------ the viewer */

/* Wider than the rest of the member area: the point of this page is a video
   with its transcript beside it, and 780px makes both cramped. */
.wwrap{max-width:1180px}

.wmeta{margin:0 0 20px}

.wlayout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--gut);
  align-items:start;
}

.wstage{position:sticky;top:24px;background:var(--panel);border:1px solid var(--panel-edge);padding:18px}

.wvideo{
  width:100%;
  display:block;
  background:var(--ink);
  aspect-ratio:16/9;
}

.wsummary{margin:14px 0 0;max-width:60ch}

/* The chapters are the summary a member actually uses: the paragraph above
   them is written to be matched by a search, while every line here is a place
   to land. Same timestamp button and same "you are here" mark as a transcript
   cue, because they do the same job on a coarser grain. */
.wchapters{margin:20px 0 0}
.wchapters h2{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
  margin:0 0 10px;
  font-weight:500;
}
.wchaps{list-style:none;margin:0;padding:0}
.wchap{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:7px 0 7px 12px;
  /* The mark sits in this margin, so a line does not shift when it lands. */
  border-left:3px solid transparent;
}
.wchap + .wchap{border-top:1px solid var(--panel-edge)}
.wchap.is-now{border-left-color:var(--accent);background:rgba(29,64,200,.04)}
.wchap .wat{flex:0 0 auto;min-width:4.5em;text-align:right}
.wchaplabel{font-size:14px;line-height:1.45}

.wtranscript{
  max-height:min(76vh,760px);
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  padding:0 22px 8px;
}
.wtranscript h2{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-60);
  margin:0 0 16px;
  font-weight:500;
}

/* The panel scrolls, so the search travels with it rather than scrolling away
   from the passage a member is reading. */
.whead{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--panel);
  padding:18px 0 12px;
  margin-bottom:4px;
}
.whead h2{margin:0 0 10px}
.wsearch{display:flex;align-items:center;gap:10px}
.wsearch input{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--body);
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--panel-edge);
  background:var(--paper);
  color:var(--ink);
}
.wsearch input:focus{outline:2px solid var(--accent);outline-offset:1px}
.wcount{flex:0 0 auto;font-size:12px;color:var(--ink-60)}
.wnone{margin:16px 0 0}
.wtext mark{background:var(--accent-lift);color:inherit;padding:0 1px}

.wcues{list-style:none;margin:0;padding:0}
.wcue{
  border-top:1px solid var(--panel-edge);
  padding:14px 0 14px 14px;
  /* The highlight sits in this margin, so a cue does not shift when it lands. */
  border-left:3px solid transparent;
}
.wcue.is-now{border-left-color:var(--accent);background:rgba(29,64,200,.04)}

.wat{
  font-size:12px;
  color:var(--ink-60);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.wat:hover{color:var(--accent)}

.wwho{
  font-size:12px;
  color:var(--ink-40);
  margin-left:10px;
}

.wtext{margin:6px 0 0;line-height:1.6;font-size:15px}

@media (max-width:860px){
  .wlayout{grid-template-columns:minmax(0,1fr)}
  .wstage{position:static}
  .wtranscript{max-height:none}
}

/* ---------- Live sessions ---------- */

/* Each kind of session wears one color, on its band, its cards and its page. */
.k-sprint{--k:#1D40C8;--kt:#E9EDFC}
.k-workshop{--k:#A3214B;--kt:#F9E7ED}
.k-ongoing{--k:#0F6E63;--kt:#E2F2EF}
.k-support{--k:#B5541A;--kt:#FAEDE3}
.k-own{--k:#6B2D8C;--kt:#F2E9F7}
.k-start{--k:#141414;--kt:#E8E8E5}

.ltop2{margin:34px 0 18px}
.ltop2 h1{font-family:var(--mark);font-weight:700;font-size:clamp(30px,4.4vw,48px);line-height:1;letter-spacing:-.035em;margin:0 0 12px}
.ltop2 .mlede{margin:0;max-width:60ch}
.ldoors{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin:0 0 30px}
.ldoor{display:flex;flex-direction:column;gap:8px;background:var(--kt);border:1px solid var(--panel-edge);border-top:4px solid var(--k);padding:16px;text-decoration:none}
.ldoor b{font-size:18px;line-height:1.25;color:var(--k)}
.ldoor span{font-size:15px;line-height:1.45;color:var(--ink)}
.ldoor em{font-style:normal;font-weight:700;font-size:14.5px;color:var(--k);margin-top:auto}


.lbtn{display:inline-block;background:var(--k,var(--ink));color:#fff;text-decoration:none;padding:10px 15px;font-family:var(--body);font-weight:600;font-size:15px;border:0;cursor:pointer;line-height:1.2}
.lbtn:disabled{opacity:.7;cursor:progress}
.lbtn--ghost{background:transparent;color:var(--k,var(--ink));box-shadow:inset 0 0 0 1.5px var(--k,var(--ink))}
.lrsvp{margin:0}
.lin{font-weight:700;font-size:14.5px;color:#0F6E63;white-space:nowrap}
.lmore{font-weight:600;font-size:15px;text-decoration:none;color:var(--k,var(--accent))}
.lmore::after{content:" →"}

.lseg{display:inline-flex;background:var(--panel);border:1px solid var(--panel-edge);padding:3px;gap:3px;margin:0 0 4px}
.lseg a{padding:8px 14px;font-weight:600;font-size:15px;color:var(--ink-60);text-decoration:none}
.lseg a[aria-current]{background:var(--ink);color:#fff}
.lseg em{font-style:normal;background:#1D40C8;color:#fff;font-size:12px;padding:1px 6px;margin-left:6px;border-radius:9px}

/* Each kind is a section: what it is and how it works on the left, its
   sessions stacked on the right. */
.lsec{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;margin-top:40px;padding-top:26px;border-top:1px solid var(--panel-edge);scroll-margin-top:20px}
.lexplain h2{font-weight:800;font-size:24px;letter-spacing:-.015em;line-height:1.15;margin:0 0 8px;color:var(--k)}
.lexplain > p{margin:0 0 14px;font-size:16px;line-height:1.5}
.lhow{list-style:none;margin:0 0 14px;padding:0;counter-reset:how}
.lhow li{counter-increment:how;position:relative;padding:0 0 14px 38px;font-size:15px;line-height:1.4;color:var(--ink-60)}
.lhow li::before{content:counter(how);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--k);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.lhow li:not(:last-child)::after{content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;background:var(--kt)}
.lhow li b{display:block;color:var(--ink);font-weight:700}
.lexplain .llib{font-size:14.5px;color:var(--ink-60);margin:0}
.lstack{display:flex;flex-direction:column;gap:12px;min-width:0}

.lcard2{background:var(--panel);border:1px solid var(--panel-edge);border-left:4px solid var(--k);padding:16px 18px;display:flex;flex-direction:column;gap:10px;scroll-margin-top:20px}
.lc2top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.lc2top h3{font-size:20px;letter-spacing:-.01em;line-height:1.2}
.lc2top h3 a{text-decoration:none}
.lc2top h3 a:hover{color:var(--k)}
.lwhen{font-size:13.5px;font-weight:600;color:var(--ink-60)}
.lwhen--soon{color:#B5541A}
.lpurpose{margin:0;font-size:16px;line-height:1.5}
.lpurpose b{color:var(--k)}
.ldates{display:flex;gap:6px;flex-wrap:wrap}
.ldates i{font-style:normal;font-size:13px;font-weight:500;padding:4px 8px;background:var(--paper);border-radius:3px}
.ldates i.in{background:var(--kt);color:var(--k);font-weight:700}
.ldates i.in::before{content:"✓ "}
.ldates i.past{color:var(--ink-40);text-decoration:line-through}
.lacts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.laside{background:var(--paper);border-left:4px solid #B5541A;padding:12px 14px;font-size:15px;line-height:1.5}
.laside strong{display:block;margin-bottom:2px}
.laside a{font-weight:700;color:#B5541A}

.lown{display:flex;flex-direction:column;gap:12px}
.lown a{display:block;background:var(--panel);border:1px solid var(--panel-edge);border-top:4px solid var(--k);padding:16px;text-decoration:none}
.lown b{display:block;font-size:17.5px;font-weight:700;margin-bottom:4px}
.lown span{font-size:14.5px;color:var(--ink-60);line-height:1.45}
.lnudge{background:var(--panel);border:1px solid var(--panel-edge);border-left:5px solid var(--k);padding:14px 16px;font-size:15.5px;line-height:1.5;margin:0}
.lstack .mnotice{margin:0}

/* An offering's own page. */
.ocrumb{font-size:14.5px;margin:26px 0 0}
.ocrumb a{text-decoration:none;color:var(--accent);font-weight:600}
.ohead{background:var(--kt);border-left:6px solid var(--k);padding:22px 24px;margin:16px 0 22px}
.otag{display:inline-block;color:var(--k);font-size:13.5px;font-weight:700}
.ohead h1{font-family:var(--mark);font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:-.03em;line-height:1.05;margin:12px 0 10px}
.ohead p{margin:0;font-size:18.5px;line-height:1.5;max-width:58ch}
.ogrid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.obox{background:var(--panel);border:1px solid var(--panel-edge);margin-bottom:16px}
.obox h2{font-size:17px;letter-spacing:-.005em;line-height:1.2;margin:0;padding:11px 16px;background:var(--kt);color:var(--k);border-bottom:1px solid var(--panel-edge)}
.obox--solid h2{background:var(--k);color:#fff}
.oin{padding:14px 16px}
.oin ul{margin:0;padding-left:18px;list-style:disc;line-height:1.6;font-size:15.5px}
.oin p{margin:0 0 10px;font-size:15.5px;line-height:1.55}
.oin p:last-child{margin-bottom:0}
.ostack{display:flex;flex-direction:column;gap:10px}
.ostack .lbtn{width:100%;text-align:center}
.ogrid .laside{margin:0 0 16px}
.srow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:12px 16px;border-top:1px solid var(--panel-edge);align-items:center;font-size:15.5px}
.obox h2 + .srow{border-top:0}
.sn{font-size:13px;font-weight:700;color:var(--k)}
.srow b{font-weight:600}
.srow b a{text-decoration:none}
.srow b a:hover{color:var(--k)}
.srow small{display:block;color:var(--ink-60);font-size:14px}
.sdone{font-size:14px;color:var(--ink-40)}

@media (max-width:1000px){
  .ldoors{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:780px){
  .ldoors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ldoor:last-child:nth-child(odd){grid-column:1/-1}
  .lsec,.ogrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .ldoors{grid-template-columns:minmax(0,1fr)}
}

/* Getting the CLI, on the page that hands out the keys it needs. Numbered
   because the order is the whole point: the tool, then a key, then login. */
.msteps{list-style:none;counter-reset:step;margin:22px 0 0;padding:0}
.msteps > li{
  counter-increment:step;
  position:relative;
  padding-left:38px;
  margin-bottom:26px;
}
.msteps > li:last-child{margin-bottom:0}
.msteps > li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:1px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
}
.msteps h3{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  letter-spacing:-.02em;
  margin:0 0 8px;
}
.msteps .mfine{margin:0 0 8px}
.mcmd{
  margin:0 0 12px;
  padding:11px 13px;
  background:var(--ink);
  overflow-x:auto;
}
.mcmd code{
  font-family:var(--mono);
  font-size:13px;
  color:var(--paper);
  white-space:pre;
}
/* These blocks are paper on ink, and the site-wide selection paints ink on
   paper — so dragging over a command to copy it selected ink on ink and the
   line appeared to vanish. Inverted here, the same way the dark sections of
   the sales page do it. */
.mcmd::selection,.mcmd ::selection{background:var(--accent);color:#F4F4F2}

/* The command and its copy button share a box so the button can sit in the
   corner of the block it copies. The block scrolls sideways on a narrow
   screen; the button does not move with it. */
.mcmdwrap{position:relative}
.mcmdwrap .mcmd{padding-right:74px}
.mcopy{
  position:absolute;
  top:7px;
  right:7px;
  font-family:var(--body);
  font-size:12px;
  line-height:1;
  padding:6px 9px;
  color:var(--paper);
  background:rgba(244,244,242,.12);
  border:1px solid rgba(244,244,242,.28);
  cursor:pointer;
}
.mcopy:hover{background:rgba(244,244,242,.22)}
.mcopy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mcopy.is-copied{background:var(--accent);border-color:var(--accent)}

/* The key is shown once, on paper rather than ink, so its button is the same
   button the other way up. */
.mkeywrap .mkey{padding-right:74px}
.mcopy-light{
  top:9px;
  color:var(--ink);
  background:rgba(20,20,20,.06);
  border-color:var(--panel-edge);
}
.mcopy-light:hover{background:rgba(20,20,20,.12)}
.mcopy-light.is-copied{color:#F4F4F2}

/* ---------- the onboarding videos ---------- */

/* Named above the frame, its length the label under the name, its description
   below — the same shape the sales page gives a video. */
.vsec{margin:0 0 20px}
.vsec > h2{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.03em;
  font-size:24px;
  line-height:1.1;
  margin:26px 0 14px;
}
.vid{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  padding:22px 24px;
  margin:0 0 20px;
}
.vid:last-child{margin-bottom:0}
.vid h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.02em;
  font-size:19px;
  line-height:1.15;
  margin:0 0 5px;
}
.vid__len{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-40);
  margin:0 0 14px;
}
.vid video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink)}
.vid__blurb{font-size:15.5px;line-height:1.6;color:var(--ink-60);margin:14px 0 0;max-width:66ch}

/* ---------- requests ---------- */

.rtop{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin:34px 0 12px;
}
.rtop h1{
  font-family:var(--mark);
  font-weight:700;
  font-size:clamp(30px,4vw,46px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0;
}
.rtop .cta{padding:13px 20px;font-size:16px}

.rchip{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 7px;
  border:1px solid var(--panel-edge);
  color:var(--ink-60);
  white-space:nowrap;
}
.rchip--planned{border-color:var(--accent);color:var(--accent)}
.rchip--scheduled{background:var(--accent);border-color:var(--accent);color:#fff}
.rchip--done{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.radd{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  padding:26px 28px;
  margin:32px 0 0;
  max-width:560px;
}
.radd h2{
  font-family:var(--display);
  font-weight:700;
  font-size:22px;
  letter-spacing:-.025em;
  margin:0 0 6px;
}
.radd-hint{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ink-60)}
.radd form{margin:0}
.rlabel{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.radd textarea{
  display:block;
  width:100%;
  min-height:120px;
  resize:vertical;
  font-family:var(--body);
  font-size:17px;
  line-height:1.45;
  padding:14px;
  border:1px solid var(--panel-edge);
  background:var(--paper);
  color:var(--ink);
  border-radius:0;
}
.radd textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.rcount{font-family:var(--mono);font-size:11px;color:var(--ink-40);text-align:right;margin:6px 0 14px}
.rfine{font-size:13.5px;line-height:1.5;color:var(--ink-60);margin:0 0 18px}
.rfine a{color:var(--accent)}
.ractions{display:flex;justify-content:flex-end;gap:10px}
.ractions .cta{padding:14px 22px;font-size:16px}
.rcancel{
  font-family:var(--display);
  font-weight:500;
  font-size:16px;
  background:none;
  border:1px solid var(--panel-edge);
  color:var(--ink);
  padding:13px 18px;
  cursor:pointer;
}
.rcancel:hover{border-color:var(--ink)}
.ractions .cta:disabled,.rjoin:disabled{opacity:.6;cursor:default}

/* Once script has moved the add box into a dialog, it opens over the page. */
.rdialog{
  border:0;
  padding:0;
  background:none;
  width:calc(100% - 32px);
  max-width:560px;
  margin:12vh auto auto;
}
.rdialog::backdrop{background:rgba(20,20,20,.45)}
.rdialog .radd{margin:0;box-shadow:0 20px 50px rgba(0,0,0,.18)}

.rlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rlist li{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid var(--panel-edge);
}
.rlist form{margin:0}
.rtext{font-weight:600;font-size:17px;line-height:1.35;margin:0 0 6px}
.rmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;font-size:14px;color:var(--ink-60);line-height:1.45}
.rmeta b{color:var(--ink);font-weight:600}

.rjoin{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:9px 12px;
  cursor:pointer;
  white-space:nowrap;
}
button.rjoin:hover{background:var(--ink);color:var(--paper)}
.rjoin[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rjoin--mine{border-color:var(--panel-edge);color:var(--ink-60);cursor:default}

@media (max-width:620px){
  .rlist li{flex-direction:column;align-items:stretch;gap:12px}
  .rlist form,.rjoin--mine{align-self:flex-start}
  .radd{padding:20px 18px}
  .ractions .cta,.rcancel{flex:1}
}