.phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s3) var(--s5); margin-bottom: var(--s5); }

.pname { min-width: 0; }

.phead h2, .phd h1, .auth h1 { font-family: var(--fw); font-size: var(--t-page);
  line-height: var(--l-dsp); font-weight: 300; letter-spacing: 0; }
.phead .lead { margin: var(--s1) 0 0; color: var(--ink-2); }
.ptitle { display: flex; align-items: center; gap: var(--s3); }
.ptitle h2 { min-width: 0; }
.ptitle .pacts { display: flex; align-items: center; gap: var(--s2); }
.pfacts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); }
.pf { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.pfk { white-space: nowrap; }
.pfv { font-family: var(--fm); font-size: var(--t-lg); line-height: var(--l-lg); color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.pfv.mono { color: var(--ink-2); }

.phd { position: relative; margin-bottom: var(--s5); }
.pbar { display: flex; align-items: center; gap: var(--s2); min-height: var(--h); margin-bottom: var(--s4); }
.pbar .pacts { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.phd h1 { max-width: 60ch; }

.pane { container-type: inline-size; }

.pstep { position: relative; display: grid; grid-template-columns: var(--h) 1fr; gap: var(--s3);
  padding-bottom: var(--s5); }

.pstep::before { content: ''; position: absolute; left: calc(var(--h) / 2); top: var(--h); bottom: 0;
  width: 1px; background: var(--line-2); }
.pstep.last::before { display: none; }
.pstep.done::before { background: var(--ink-3); }
.pstep.skipped::before { background: var(--line); }
.pmark { position: relative; z-index: 1; }
.pstep .pip { width: var(--h); height: var(--h); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; font-family: var(--fm);
  font-size: var(--t-sm); font-weight: 500; font-variant-numeric: tabular-nums; }

.pstep .pip { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pstep .pip i { font-style: normal; }

.pstep.done .pip { background: var(--ok-fill); color: var(--ok-on);
  box-shadow: inset 0 0 0 1px var(--ok-edge); }
.pstep.now .pip { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.steptitle { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s1) 0 var(--s2); }
.steptitle time { margin-left: auto; font-family: var(--fm); font-size: var(--t-sm); font-weight: 400;
  color: var(--ink-3); }
.pstep.done .steptitle, .pstep.skipped .steptitle { color: var(--ink-2); }
.pstep.later .steptitle { color: var(--ink-3); }
.pstep.later .pbody { opacity: .6; }
.pbody { min-width: 0; }
.pbody .said { margin-bottom: var(--s2); }
.pbody .said:last-child { margin-bottom: 0; }

.pbody .emailed { margin: calc(-1 * var(--s1)) 0 var(--s2); font-size: var(--t-sm);
  line-height: var(--l-sm); color: var(--ink-3); }
.pbody .sentline { margin: calc(-1 * var(--s1)) 0 var(--s2); font-size: var(--t-sm); line-height: var(--l-sm);
  color: var(--ink-2); }
.ptech { margin-bottom: var(--s2); color: var(--ink-3); }
.asking { margin: var(--s1) 0 var(--s3); }
.plainsteps { margin: var(--s3) 0 var(--s2); padding-left: var(--s4); list-style: decimal; color: var(--ink-2); }
.plainsteps li { padding-left: var(--s1); }
.working { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s4); }
.wbig .nlogo { display: block; font-size: 84px; }
.wtext { min-width: 0; }
.wtext .chd { margin-bottom: var(--s3); }
.wtext h3, .fsec h4 { font-size: var(--t-md); font-weight: 500; color: var(--ink); }
.wtext h3 { margin: 0 0 var(--s2); }
.doing { margin: 0; font-family: var(--fm); color: var(--ink-2); }
.fnd { margin-top: var(--s3); }
.fnd .lead { margin-bottom: var(--s2); }
.fpin { display: inline-flex; align-items: center; gap: var(--s2); height: var(--h-sm); padding: 0 var(--s2);
  border-radius: var(--r); font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line-2); }
.fpin:hover { background: var(--hi); color: var(--ink); }

.fpin { max-width: 100%; min-width: 0; }
.fpin .fm { min-width: 0; font-family: var(--fm); overflow: hidden; text-overflow: ellipsis; }
.fwhere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.fsteps { display: flex; flex-direction: column; gap: var(--s3); }
.fsec { position: relative; }
.fsec h4 { margin: 0 0 var(--s1); }
.fsec p { white-space: pre-wrap; color: var(--ink); }
.byline { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-3); }
.wnote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3);
  font-size: var(--t-sm); color: var(--ink-3); }
.wnote .nlogo { flex: none; font-size: 18px; }
.wnote span { flex: 1 1 12rem; min-width: 0; }

.compose { flex: 0 0 auto; padding: var(--s3) calc(var(--s5) + var(--sb)) var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--bg); }
.compose > textarea { display: block; }
.compose.shut { padding: var(--s2) calc(var(--s5) + var(--sb)) var(--s2) var(--s5); cursor: text; }
.compose.shut .clab { margin: 0; }
.compose.shut:hover { background: var(--hi); }
.clab { display: flex; align-items: center; gap: var(--s2); min-width: 0; margin-bottom: var(--s2);
  color: var(--ink-3); }
.clab .dimr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draftnote { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r); font-size: var(--t-sm); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.draftnote svg, .drafthint svg { flex: 0 0 auto; }
.drafthint { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; color: var(--ink); }

.feed { padding: var(--s2) 0 var(--s6); }
.ev { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--glass-ln); }
.ev:last-child { border-bottom: 0; }
.evh { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t-sm); }
.evh .what { color: var(--g-ink-2); }
.evh .file { min-width: 0; font-family: var(--fm); color: var(--g-ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.evh .cnt { flex: 0 0 auto; margin-left: auto; font-family: var(--fm); }
.evh .cnt .a { color: var(--add); }
.evh .cnt .d { margin-left: var(--s2); color: var(--del); }
.ev .say { white-space: pre-wrap; color: var(--g-ink-2); user-select: text; }
.ev .say .tw, .turn .tw { display: block; margin-bottom: var(--s1); font-size: var(--t-sm); color: var(--g-ink-3); }
.ev .say.you .tw, .turn.you .tw { color: var(--g-ink-2); }
.ev .think { padding-left: var(--s2); border-left: 1px solid var(--glass-ln); white-space: pre-wrap;
  color: var(--g-ink-3); }
.chat { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); }
.turn { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.turn .tsay { padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--glass-2);
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--g-ink-2); }
.turn.you .tsay { background: var(--glass-3); color: var(--g-ink); }
.wask { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--s2); padding: var(--s2) var(--s3);
  border-top: 1px solid var(--glass-ln); background: var(--glass-2); }
.wask textarea { flex: 1 1 auto; min-width: 0; min-height: var(--h); max-height: 160px; border: 0;
  background: var(--glass-3); color: var(--g-ink); resize: none; }
.wask textarea::placeholder { color: var(--g-ink-3); }
.wask .btn { flex: 0 0 auto; }

.paypick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.pay.on { box-shadow: inset 0 0 0 1px var(--act); }
.payh { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
  font-weight: 500; color: var(--ink); }
.pay p { margin: 0 0 var(--s2); }
.pay p:last-child, .pay .paynote { margin-bottom: 0; }
.pay .facts { margin: 0; }
button.pay { display: block; width: 100%; text-align: left; color: inherit; }
button.pay:hover:not(:disabled) { background: var(--hi); }
button.pay:disabled { opacity: .5; }
.paynote { display: block; color: var(--ink-2); }
.repopick, .modelpick { max-height: 420px; overflow-y: auto; }
.labgrp { margin-bottom: var(--s4); }
.labgrp:last-child { margin-bottom: 0; }
.labhd { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); padding: var(--s2) 0;
  border-bottom: 1px solid var(--line); }
.labhd b { font-size: var(--t-md); font-weight: 500; color: var(--ink); }
.labmk { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--h-sm); height: var(--h-sm); border-radius: var(--r); font-family: var(--fm);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); background: var(--hi); }
.labn { font-size: var(--t-sm); color: var(--ink-3); }
.sgroup { margin: var(--s5) 0 var(--s3); }
.sgroup:first-child { margin-top: 0; }
.swarn { max-width: var(--measure); margin: var(--s2) 0 0; font-weight: 500; color: var(--ink); }

@media (max-width: 1080px) {
  .paypick { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .body { flex-direction: column-reverse; }
  .list { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: stretch;
    padding: var(--s1) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line); border-right: 0; }
  .list .hd { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: nowrap; padding: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .list .sp, .list .link, .list .ngroup { display: none; }

  .list .hd > .nav { display: contents; }
  .list .navrow { flex: 1 0 76px; min-width: 76px; height: var(--h-bar); flex-direction: column;
    justify-content: center; gap: var(--s1); padding: 0 var(--s1); font-size: var(--t-sm);
    line-height: var(--l-sm); text-align: center; }
  .list .navrow .nl { max-height: var(--s5); overflow: hidden; white-space: normal; }
  .navrow .nn { display: none; }

  .top { display: flex; flex-wrap: nowrap; align-items: center; height: var(--h-bar);
    gap: var(--s2); padding: 0 var(--s3); }
  .topmark { flex: 1 1 auto; min-width: 0; }
  .toptools { flex: 0 0 auto; justify-self: auto; }
  .topmark .mark, .topmark .homebtn { display: none; }

  .toptools .searchbox { width: var(--h); flex: 0 0 auto; padding: 0;
    justify-content: center; }
  .toptools .searchbox span { display: none; }
  .top .keysbtn[data-do="keys"] { display: none; }
  .top .navwho { max-width: none; }
  .pswitch .navwho { max-width: none; width: 100%; }
  .body, .main, .pane { max-width: 100%; overflow-x: hidden; }
  .main, .pane { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .page { padding: var(--s3) var(--s3) var(--s6); --t-page: var(--t-xl); --l-dsp: var(--l-xl); }
  .compose, .compose.shut { padding-left: var(--s3); padding-right: calc(var(--s3) + var(--sb)); }
  .work { display: none !important; }

  .pacts [data-do="showwork"] { display: none; }
  .phead { flex-direction: column; align-items: flex-start; }

  .pf { flex-direction: row; align-items: baseline; gap: var(--s2); }
  .pfv { font-size: var(--t-md); line-height: var(--l-md); }
  .pfacts { gap: var(--s2) var(--s4); }
  .pbar { flex-wrap: wrap; }
  .phd h1 { max-width: none; }
  .kvr { grid-template-columns: minmax(0, 1fr); }
  
  .setcols { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .setnav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: var(--s2); }
  .setnav .ngroup { display: none; }
  .setnav .navrow { flex: 0 0 auto; width: auto; }

  .tbl[class] { --cols: minmax(0, 1fr) auto !important; }
  .trow > *:not(.t):not(.m):not(:last-child) { display: none; }
  .thead { display: none; }
  .trow .subj { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; }
  .tbl.problems .trow .m { grid-row: 2; grid-column: 1; align-self: start; }
  .trow .found { display: block; }
  .trow .cz, .trow .cnum .cbar { display: none; }
  .filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg { flex: 0 0 auto; }
  .clab { flex-wrap: wrap; }
}

.page.convo { --chat: 760px; }
.page.convo > .phd, .page.convo > .pmeta, .page.convo > .thread { max-width: var(--chat); }
.page.convo > .phd { margin-bottom: var(--s2); }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  margin: 0 0 var(--s4); font-size: var(--t-sm); line-height: var(--l-sm); color: var(--ink-3); }
.pmeta .mono { font-family: var(--fm); }
.pmeta .dotsep { color: var(--line-3); }
.thread { display: flex; flex-direction: column; gap: var(--s4); padding-bottom: var(--s4); }
.turn { display: flex; flex-direction: column; gap: var(--s2); }
.twho { display: flex; align-items: center; gap: var(--s2); min-width: 0;
  font-size: var(--t-md); line-height: var(--l-md); color: var(--ink-2); }
.twho b { font-weight: 500; color: var(--ink); }
.twho time { margin-left: auto; font-size: var(--t-sm); color: var(--ink-3); }
.tav { width: var(--h-sm); height: var(--h-sm); flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--r); }
.tav.neural { background: var(--surf-2); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); }
.tav.note { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.tbody { padding-left: calc(var(--h-sm) + var(--s2)); min-width: 0; }
.turn.them .said.theirs { font-size: var(--t-lg); line-height: var(--l-lg); }
.turn.note .tbody { color: var(--ink-2); }
.tend { padding-left: calc(var(--h-sm) + var(--s2)); padding-top: var(--s3); border-top: 1px solid var(--line); }

.compose > * { max-width: 760px; }
.compose > textarea { width: 100%; min-height: var(--h); max-height: 40vh; resize: none; field-sizing: content;
  padding: var(--s2) var(--s3); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.compose > textarea:focus { box-shadow: inset 0 0 0 1px var(--line-3); }
.compose .acts { margin-top: var(--s2); }
.page.convo > .thread { margin-top: var(--s4); }

.compose:not(.shut) { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); }
.compose:not(.shut) > * { grid-column: 1; max-width: none; }
.compose:not(.shut) > .clab { grid-row: 1; }
.compose:not(.shut) > .draftnote { grid-row: 2; }
.compose:not(.shut) > textarea { grid-row: 3; padding-right: calc(var(--s6) * 3); min-height: var(--h-bar); }
.compose:not(.shut) > .acts { grid-row: 3; justify-self: end; align-self: end; margin: 0 var(--s2) var(--s2) 0; }
.compose:not(.shut) > .acts > .sp { display: none; }